|
通過Razor使用布局 在我上一篇博客中,，我演示了一個簡單的例子來呈示一列商品目錄的商品URL:
下面用一個簡單的ProductsController實(shí)現(xiàn)上面的商品URL列表。它從數(shù)據(jù)庫返回一列商品種類,，然后傳到視圖文件,，以在瀏覽器以合適的HTML響應(yīng)呈示出來。
下面顯示Index.cshtml視圖文件（用Razor來實(shí)現(xiàn)的）
上面的視圖文件沒有使用布局頁面——這意味著我們往站點(diǎn)添加新的URLs和頁面的時候我們會在不同的地方重復(fù)我們的核心網(wǎng)站布局,。使用布局可以讓我們避免這種重復(fù),，以后管理我們的網(wǎng)站設(shè)計更加容易。讓我們現(xiàn)在更新我們的示例來使用一個吧,。 重構(gòu)以使用布局 Razor使重構(gòu)現(xiàn)有頁面以使用布局變得簡單,。 讓我們用上面的簡單示例做一下吧。 我們的第一步是往項目的\視圖\共享文件夾（這是通用視圖文件、模板所放置的地方）下添加一個“SiteLayout.cshtml”文件：
SiteLayout.cshtml 我們將用SiteLayout.cshtml文件來定義我們網(wǎng)站的通用內(nèi)容,， 可能看起來像下面這樣：
上面文件需要注意： · 文件頂端不需要有一個@inherits指令了。你想要的話也可以選擇加上一個（比如：如果你希望有一個定制基類）,，但是這不是必需的,。這樣就能讓文件美觀而干凈， 而且也方便程序員之外的人處理文件,， 遇到他們不理解的概念也不會覺得疑惑,。 · 我們在上面的布局文件中調(diào)用@RenderBody()方法， · 我們在<head>部分的<title>元素內(nèi)輸出“View.Title”屬性,。我還將討論一下這是怎么使用的,。 現(xiàn)在我們有了一個通用的布局模板來保持我們網(wǎng)站任意頁面的外觀一致性。 Index.cshtml 我們下面根據(jù)我們剛才創(chuàng)建的SiteLayout.cshtml文件來更新我們的Index.cshtml視圖,。下面是它可能的樣子的首次截圖：
關(guān)于上面的文件需要注意： · 我們不需要將我們的主體內(nèi)容包裝在一個標(biāo)記或元素中——Razor將默認(rèn)自動將Index.cshtml中的內(nèi)容視為布局頁面的主體部分,。如果我們的布局有幾個可更換的區(qū)域，我們能選擇性地定義“name sections”,。但是Razor讓90%的情況（你只需要有一個主體部分就可以了）超級干凈而簡練,。 · 上面我們編程設(shè)置了Index.cshtml頁面中的View.Title的值。我們的Index.cshtml文件中的代碼會比SiteLayout.cshtml中的代碼先執(zhí)行——這樣我們就能編寫視圖代碼編程設(shè)置需要被呈示到布局的值,。對像設(shè)置頁面的標(biāo)題,，和為搜索引擎優(yōu)化內(nèi)的<head>設(shè)置<meta>元素這樣的事情，上面功能尤其有用,。 · 剛才我們在Index.cshtml頁面內(nèi)編程設(shè)置所用的布局模板,。它也可以通過設(shè)置視圖上的布局屬性來實(shí)現(xiàn)（注意：在第一個預(yù)覽版中，這個屬性被稱為“LayoutPage”——我們在ASP.NET MVC 3 Beta版中將其更名為“Layout”）,。我將簡單地介紹設(shè)置這個屬性的幾個替代方法,。 現(xiàn)在當(dāng)我們在網(wǎng)站內(nèi)請求/商品URL的時候，將得到返回如下HTML:
注意上面是怎樣返回一個SiteLayout.cshtml和Index.cshtml的合并HTML內(nèi)容的,。頂端的“Product categories”標(biāo)題根據(jù)視圖正確設(shè)置,，我們的動態(tài)目錄列表顯示在正確的位置。 用ViewStart保持事物“干燥”(DRY) 現(xiàn)在我們在Index.cshtml文件的頂端通過編程設(shè)置所要用的布局文件,。對包含一些專門針對視圖的邏輯的情況還好,，因?yàn)椴季治募S著特定視圖的不同而不同。但是這樣設(shè)置的話會最終導(dǎo)致大部分網(wǎng)頁應(yīng)用程序的冗余和重復(fù)——要不就所有的視圖都使用同樣的布局,，要不這樣：如果他們有不同的布局（比如：對移動設(shè)備或本地化網(wǎng)站）,，選擇使用布局的邏輯在所有視圖中通用。 好消息是Razor包括一個能讓我們不需要在每個視圖中顯式設(shè)置布局的新功能——而是讓我們能一次性定義網(wǎng)站內(nèi)所有視圖的布局邏輯,，從而讓我們的視圖文件更干凈,，也更容易維護(hù)（確保我們堅持DRY原則：不要重復(fù)你自己）：
自ASP.NET MVC 3 BETA發(fā)布版開始， 你現(xiàn)在能在項目的\視圖文件夾下添加一個_ViewStart.cshtml（或VB的_ViewStart.vbhtml）的文件：
_ViewStart文件可以被用來定義想要在每次視圖呈現(xiàn)開始的時候執(zhí)行的通用視圖代碼。比如,，我們能在在我們的_ViewStart.cshtml文件中寫下面這樣的代碼來編程設(shè)置每個視圖的默認(rèn)布局屬性為SiteLayout.cshtml文件：
因?yàn)檫@段代碼在每個視圖開始的時候執(zhí)行,，我們不需要在任何單個視圖文件中顯式設(shè)置布局（除非我們想要覆蓋上面的默認(rèn)值）。 重要： 因?yàn)開ViewStart.cshtml允許我們編寫代碼,，所以我們能有選擇地讓我們的布局選擇邏輯比基本的屬性設(shè)置更豐富,。比如：我們能根據(jù)訪問網(wǎng)站的設(shè)備的不同來使用不同的布局模板——有針對手機(jī)或tablet等這些設(shè)備的優(yōu)化布局，針對PCs/筆記本的桌面優(yōu)化布局,?；蛘呷绻覀儎?chuàng)建一個被不同的用戶使用的CMS系統(tǒng)或通用共享應(yīng)用，我們能根據(jù)訪問網(wǎng)站的客戶（或角色）的不同而選擇不同的布局,。 這大大提高了用戶界面的靈活用,。允許你更容易地一次性編寫視圖邏輯，避免在不同的地方重復(fù)它,。 注意：你也能在一個控制器或操作篩選器重指定布局,。這樣如果你更愿意保留布局邏輯在那里，你也能那樣做,。 完成的示例 下面是我們一直在創(chuàng)建的簡單應(yīng)用程序的截圖：
下面是ProductsControlles,它實(shí)現(xiàn)/Product URL并從數(shù)據(jù)庫返回目錄并將它們傳到視圖模板呈示出來：
這里是我們用來呈示/Products響應(yīng)的Index.cshtml視圖：
這里是用來在網(wǎng)站內(nèi)實(shí)現(xiàn)統(tǒng)一外觀的SiteLayout.cshtml布局文件：
這里是指定我們所有視圖都默認(rèn)使用SiteLayout.cshtml文件的_ViewStart.cshtml文件：
這里是/Products URL所生成的HTML:
既然我們現(xiàn)在的網(wǎng)站上有了一個通用布局文件,，我們能在應(yīng)用程序中構(gòu)建更多功能，控制器和視圖——從而獲得一個連貫又容易維護(hù)的網(wǎng)站用戶界面體驗(yàn),。 更多高級內(nèi)容 人們經(jīng)常問兩個常見問題： 1) 我能使用嵌套的布局文件嗎,？ 2) 在一個布局文件中，我們有多個非連續(xù)的可替換區(qū)域嗎,？——這樣我就能在幾處不同的地方填充我自己的視圖文件,。 這兩個問題的答案都是肯定的！我以后會寫一些展示如何實(shí)現(xiàn)的示例的博文,。 總結(jié) 像我之前提到的,，我們發(fā)布ASP.NET MVC 3和Razor所堅持的一個主旨是讓你寫的代碼更干凈更簡潔。我們認(rèn)為這個發(fā)布版帶來的新布局功能非常有助于方便視圖文件的讀寫,。 希望對您有所幫助,。 Scott |
|
|
