最新的Web開發教程
 

ASP.NET網頁 - 頁面佈局


與網頁很容易地創建一個網站具有一致的佈局。


外觀的一致性

在互聯網上,你會發現有一個一致的外觀和感覺,許多網站:

  • 每一頁都有相同的標題
  • 每一頁都具有相同的頁腳
  • 每一頁都具有相同的樣式和佈局

與網頁這樣可以非常有效地進行。 你可以有內容可重複使用的塊(content blocks) ,喜歡的頁眉和頁腳,在不同的文件。

您也可以定義為所有網頁一致的佈局,使用佈局模板(layout file)


內容塊

許多網站有一個在每個頁面上顯示的內容(like headers and footers)

與網頁,你可以使用@ RenderPage()方法來從不同的文件中導入內容。

內容塊(from another file)可以在任何地方在網頁中導入,可以包含文本,標記和代碼,就像任何普通的網頁。

使用普通的頁眉和頁腳作為一個例子,這為您節省了大量的工作。 你不必寫在每一頁的內容相同,當您更改頁眉或頁腳文件,內容是所有網頁更新。

這是它的外觀的代碼:

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

使用佈局頁

在上一節,你看到了,包括許多網頁相同的內容很容易。

創建一致的外觀另一種方法是使用一個頁面佈局。 佈局頁包含的結構,而不是內容的網頁。 當一個網頁(content page)鏈接到頁面佈局,它會根據頁面佈局顯示(template)

佈局頁面就像一個正常的網頁,除了來自於呼叫@ RenderBody()在內容頁面將包含方法。

每個內容頁必須有一個佈局指令啟動。

這是它的外觀的代碼:

佈局頁:

<html>
<body>
<p>This is header text</p>
@RenderBody()
<p>&copy; 2014 w3ii. All rights reserved.</p>
</body>
</html>

任何網頁:

@{Layout="Layout.cshtml";}

<h1>Welcome to w3ii</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>
運行示例»

DRY - 不要重複自己

有兩個ASP.NET工具,內容塊和佈局頁,你可以給你的web應用程序外觀的一致性。

這些工具還為您節省了大量的工作,因為你沒有重複的所有網頁上相同的信息。 集中化的標記,樣式和代碼使Web應用程序更易於管理,更容易維護。


從正在瀏覽的文件預防

在ASP.NET,與以下劃線開頭的名稱的文件無法從網絡瀏覽。

如果你想阻止你的內容塊或佈局文件從您的用戶正在觀看的文件重命名為:

_header.cshtml

_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]";
}