原文發表地址:ASP.NET MVC 3: Layouts with Razor
原文發表時間:October 22, 2010 3:05 PM
通過Razor使用布局
在我上一篇部落格中，我示範了一個簡單的例子來呈示一列商品目錄的商品URL:
下面用一個簡單的ProductsController實現上面的商品URL列表。它從資料庫返回一列商品種類，然後傳到視圖檔案，以在瀏覽器以合適的HTML響應呈示出來。
下面顯示Index.cshtml視圖檔案（用Razor來實現的）
上面的視圖檔案沒有使用布局頁面——這意味著我們往網站添加新的URLs和頁面的時候我們會在不同的地方重複我們的核心網站布局。使用布局可以讓我們避免這種重複，以後管理我們的網站設計更加容易。讓我們現在更新我們的樣本來使用一個吧。
重構以使用布局
Razor使重構現有頁面以使用布局變得簡單。 讓我們用上面的簡單樣本做一下吧。
我們的第一步是往項目的\視圖\共用資料夾（這是通用視圖檔案、模板所放置的地方）下添加一個“SiteLayout.cshtml”檔案：
SiteLayout.cshtml
我們將用SiteLayout.cshtml檔案來定義我們網站的通用內容， 可能看起來像下面這樣：
上面檔案需要注意：
檔案頂端不需要有一個@inherits指令了。你想要的話也可以選擇加上一個（比如：如果你希望有一個定製基類），但是這不是必需的。這樣就能讓檔案美觀而乾淨，
而且也方便程式員之外的人處理檔案， 遇到他們不理解的概念也不會覺得疑惑。 我們在上面的布局檔案中調用@RenderBody()方法，
我們在<head>部分的<title>元素內輸出“View.Title”屬性。我還將討論一下這是怎麼使用的。
現在我們有了一個通用的布局模板來保持我們網站任意頁面的外觀一致性。
Index.cshtml
我們下面根據我們剛才建立的SiteLayout.cshtml檔案來更新我們的Index.cshtml視圖。下面是它可能的樣子的首次：
關於上面的檔案需要注意：
我們不需要將我們的主體內容封裝在一個標記或元素中——Razor將預設自動將Index.cshtml中的內容視為布局頁面的主體部分。如果我們的布局有幾個可更換的地區，我們能選擇性地定義“name
sections”。但是Razor讓90%的情況（你只需要有一個主體部分就可以了）超級乾淨而簡練。
上面我們編程設定了Index.cshtml頁面中的View.Title的值。我們的Index.cshtml檔案中的代碼會比SiteLayout.cshtml中的代碼先執行——這樣我們就能編寫視圖代碼編程設定需要被呈示到布局的值。對像設定頁面的標題，和為搜尋引擎最佳化內的<head>設定<meta>元素這樣的事情，上面功能尤其有用。
剛才我們在Index.cshtml頁面內編程設定所用的布局模板。它也可以通過設定視圖上的布局屬性來實現（注意：在第一個預覽版中，這個屬性被稱為“LayoutPage”——我們在ASP.NET
MVC 3 Beta版中將其更名為“Layout”）。我將簡單地介紹設定這個屬性的幾個替代方法。
現在當我們在網站內請求/商品URL的時候，將得到返回如下HTML:
注意上面是怎樣返回一個SiteLayout.cshtml和Index.cshtml的合并HTML內容的。頂端的“Product
categories”標題根據視圖正確設定，我們的動態目錄列表顯示在正確的位置。
用ViewStart保持事物“乾燥”(DRY)
現在我們在Index.cshtml檔案的頂端通過編程設定所要用的布局檔案。對包含一些專門針對視圖的邏輯的情況還好，因為布局檔案會隨著特定視圖的不同而不同。但是這樣設定的話會最終導致大部分網頁應用程式的冗餘和重複——要不就所有的視圖都使用同樣的布局，要不這樣：如果他們有不同的布局（比如：對行動裝置或本地化網站），選擇使用布局的邏輯在所有視圖中通用。
好訊息是Razor包括一個能讓我們不需要在每個視圖中顯式設定布局的新功能——而是讓我們能一次性定義網站內所有視圖的布局邏輯，從而讓我們的視圖檔案更乾淨，也更容易維護（確保我們堅持DRY原則：不要重複你自己）：
自ASP.NET MVC 3 BETA發布版開始，
你現在能在項目的\視圖檔案夾下添加一個_ViewStart.cshtml（或VB的_ViewStart.vbhtml）的檔案：
_ViewStart檔案可以被用來定義想要在每次視圖呈現開始的時候執行的通用視圖代碼。比如，我們能在在我們的_ViewStart.cshtml檔案中寫下面這樣的代碼來編程設定每個視圖的預設布局屬性為SiteLayout.cshtml檔案：
因為這段代碼在每個視圖開始的時候執行，我們不需要在任何單個視圖檔案中顯式設定布局（除非我們想要覆蓋上面的預設值）。
重要：
因為_ViewStart.cshtml允許我們編寫代碼，所以我們能有選擇地讓我們的布局選擇邏輯比基本的屬性設定更豐富。比如：我們能根據訪問網站的裝置的不同來使用不同的布局模板——有針對手機或tablet等這些裝置的最佳化布局，針對PCs/筆記本的案頭最佳化布局。或者如果我們建立一個被不同的使用者使用的CMS系統或通用共用應用，我們能根據訪問網站的客戶（或角色）的不同而選擇不同的布局。
這大大提高了使用者介面的靈活用。允許你更容易地一次性編寫視圖邏輯，避免在不同的地方重複它。
注意：你也能在一個控制器或操作篩選器重指定布局。這樣如果你更願意保留布局邏輯在那裡，你也能那樣做。
完成的樣本
下面是我們一直在建立的簡單應用程式的：
下面是ProductsControlles,它實現/Product URL並從資料庫返回目錄並將它們傳到視圖模板呈示出來：
這裡是我們用來呈示/Products響應的Index.cshtml視圖：
這裡是用來在網站內實現統一外觀的SiteLayout.cshtml布局檔案：
這裡是指定我們所有視圖都預設使用SiteLayout.cshtml檔案的_ViewStart.cshtml檔案：
這裡是/Products URL所產生的HTML:
既然我們現在的網站上有了一個通用布局檔案，我們能在應用程式中構建更多功能，控制器和視圖——從而獲得一個連貫又容易維護的網站使用者介面體驗。
更多進階內容
人們經常問兩個常見問題：
1) 我能使用嵌套的布局檔案嗎？
2) 在一個布局檔案中，我們有多個非連續的可替換地區嗎？——這樣我就能在幾處不同的地方填充我自己的視圖檔案。
這兩個問題的答案都是肯定的！我以後會寫一些展示如何?的樣本的博文。
總結
像我之前提到的，我們發布ASP.NET MVC
3和Razor所堅持的一個主旨是讓你寫的代碼更乾淨更簡潔。我們認為這個發布版帶來的新布局功能非常有助於方便視圖檔案的讀寫。
希望對您有所協助。
Scott
附：除了發表部落格之外，我還用Twitter進行快速更新和分享連結。請關注我：twitter.com/scottgu
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
