ASP.NET Web Pages - 頁面布局

通過 Web Pages，很容易創建布局一致的網站。

一致的外觀

在因特網上，您會發現很多擁有統一外觀的網站：

  • 每頁擁有相同的頁眉
  • 每頁擁有相同的頁腳
  • 每頁擁有相同的樣式和布局

通過 Web Pages，可以高效地實現這些。您可以得到可重復使用的代碼塊（內容塊），比如頁眉和頁腳，在獨立的文件中。

您也可以為所有頁面定義一致的布局，使用布局模板（布局文件）。

內容塊

很多網站都有需要在每張頁面上顯示的內容（比如頁眉和頁腳）。

通過 Web Pages，您可以使用 @RenderPage() 方法從不同的文件導入內容。

內容塊（來自另一個文件）能夠被輸入網頁中的任意位置，并可包含文本、標記和代碼，就像任何常規的網頁那樣。

使用通用的頁眉和頁腳，會省去大量的工作。您不必在每頁中編寫相同的內容，并且當您改變頁眉或頁腳文件時，內容會在所有頁面中更新。

在代碼中是這樣的：

實例

<html>
<body>
@RenderPage("header.cshtml")
<h1>Hello Web Pages</h1> 
<p>This is a paragraph</p>
@RenderPage("footer.cshtml")
</body>
</html>

運行實例

使用布局頁面

在之前的內容中，您已看到在多個網頁中引用相同的內容是很簡單的。

創建一致外觀的另一種方法是使用布局網頁。布局網頁包含網頁的結構，而不是內容。當網頁（內容頁）鏈接到布局頁時，它會根據布局頁（模板）來顯示。

布局頁類似普通的網頁，但是會在引用內容頁的位置調用 @RenderBody() 方法。

每個內容頁必須以 Layout 指令開頭。

在代碼中是這樣的：

布局網頁：

<html>
<body>
<p>這是文本。</p>
@RenderBody()
<p>© 2012 CodeW3C.com. All rights reserved.</p>
</body>
</html>

任意網頁：

@{Layout="Layout.cshtml";}
<h1>Welcome to CodeW3C.com</h1>
<p>
這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。
這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。
這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。
</p>

運行實例

不要重復自己

通過兩個 ASP.NET 工具，內容塊和布局頁，您能夠為 web 應用程序設定一致的外觀。

這些工具會為您省去大量的工作，因為您不必在所有頁面上重復相同的信息。將標記、樣式和代碼集中起來，使得 web 應用程序更便于管理和維護。

防止代碼泄露

在 ASP.NET 中，名稱以下劃線開頭的文件無法通過 web 來瀏覽。

如果您希望禁止用戶查看內容塊或布局文件，請對文件重新命名：

  • _header.cshtm
  • _footer.cshtml
  • _Layout.cshtml

隱藏敏感信息

在 ASP.NET 中，隱藏敏感信息（數據庫密碼、電郵密碼等）的常用方法是把這些信息保存在名為 "_AppStart" 的獨立文件中。

_AppStart.cshtml

@{
WebMail.SmtpServer = "mailserver.example.com";
WebMail.EnableSsl = true;
WebMail.UserName = "username@example.com";
WebMail.Password = "your-password";
WebMail.From = "your-name-here@example.com";
}