1. 程式人生 > 實用技巧 >ASP.NET Web Pages - 頁面佈局

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>This is header text</p>
@RenderBody()
<p>© 2012 W3School. All rights reserved.</p>
</body>
</html>

任意網頁:

@{Layout="Layout.cshtml";}

<h1>Welcome to W3Schools</h1>

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laborisnisi ut aliquip ex ea commodo consequat.
</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 = "[email protected]";
WebMail.Password = "your-password";
WebMail.From = "[email protected]";