ASP.NET?Core?MVC中的布局(Layout)
1.什么是布局
布局通常包含常見(jiàn)的用戶界面元素,例如應(yīng)用頭,導(dǎo)航或菜單元素和頁(yè)腳,如圖:
常見(jiàn)的HTML結(jié)構(gòu)(例如腳本和樣式表)也經(jīng)常被應(yīng)用程序中許多頁(yè)面使用。所有這些共享元素都可以在布局中定義,然后由應(yīng)用程序中使用的任何視圖引用。布局減少了視圖中代碼的重復(fù)。
按照慣例,ASP.NET 應(yīng)用程序的默認(rèn)布局名為 _Layout.cshtml。 vs 項(xiàng)目模板在 Views/Shared 文件夾中包含此布局文件。
這個(gè)布局為應(yīng)用程序中的視圖定義了一個(gè)頂層模板。布局對(duì)應(yīng)用程序來(lái)說(shuō)不是必需的,應(yīng)用程序可以定義多個(gè)布局,不同的視圖指定不同的布局。
一個(gè)_Layout.cshtml 例子:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>@ViewData["Title"] - MVCTest</title> <environment include="Development"> <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" rel="external nofollow" /> <link rel="stylesheet" href="~/css/site.css" rel="external nofollow" /> </environment> <environment exclude="Development"> <link rel="stylesheet" rel="external nofollow" asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" /> <link rel="stylesheet" href="~/css/site.min.css" rel="external nofollow" asp-append-version="true" /> </environment> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">MVCTest</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li> <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li> <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li> </ul> </div> </div> </nav> <partial name="_CookieConsentPartial" /> <div class="container body-content"> @RenderBody() <hr /> <footer> <p>© 2019 - MVCTest</p> </footer> </div> <environment include="Development"> <script src="~/lib/jquery/dist/jquery.js"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script> <script src="~/js/site.js" asp-append-version="true"></script> </environment> <environment exclude="Development"> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js" asp-fallback-src="~/lib/jquery/dist/jquery.min.js" asp-fallback-test="window.jQuery" crossorigin="anonymous" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"> </script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js" asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal" crossorigin="anonymous" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"> </script> <script src="~/js/site.min.js" asp-append-version="true"></script> </environment> @RenderSection("Scripts", required: false) </body> </html>
@RenderBody() 顯示引用該布局的視圖頁(yè)面。
2.指定布局
Razor 視圖有一個(gè) Layout 屬性。單個(gè)視圖通過(guò)設(shè)置此屬性來(lái)指定布局:
@{ Layout = "_Layout"; }
指定布局也可以使用完整路徑。當(dāng)提供部分視圖名稱時(shí),先搜索與控制器相關(guān)的文件夾,然后搜索共享文件夾。默認(rèn)情況下,每個(gè)布局都必須調(diào)用 RenderBody() 方法。哪里調(diào)用 RenderBody() 方法,視圖內(nèi)容就在哪里渲染。
* 部分
布局可以通過(guò)調(diào)用 RenderSection 方法,引用一個(gè)或多個(gè)部分。部分提供了組織某些頁(yè)面元素放置位置的方法。每次調(diào)用 RenderSection 時(shí),都可以指定該部分是必須還是可選。如果未找到必須的部分,將拋出異常。個(gè)別視圖使用 @section Razor 語(yǔ)法指定要在某個(gè)部分中呈現(xiàn)的內(nèi)容。如果視圖定義了一個(gè)部分,那么它必須被渲染。
視圖中的 @section 定義示例:
@section Scripts{ <script type="text/javascript" src="~/js/site.min.js"></script> }
在上面的代碼中,驗(yàn)證腳本被添加到包含表單的視圖的腳本部分。同一應(yīng)用程序中其他視圖可能不需要任何其他腳本,因此不需要定義腳本部分。
視圖中定義的部分僅在其直接布局頁(yè)面中可用。它們不能從局部視圖,視圖組件或視圖系統(tǒng)的其他部分引用。
*忽略部分
默認(rèn)情況下,內(nèi)容頁(yè)面中的正文和所有部分都是必須由布局頁(yè)面渲染。Razor 視圖引擎通過(guò)跟蹤主體和每個(gè)部分是否已渲染來(lái)實(shí)施此操作。
要想指示視圖引擎忽略正文或部分,請(qǐng)?jiān)诓季种姓{(diào)用 IgnoreBody 和 IgnoreSection 方法。
Razor 頁(yè)面中的正文和每個(gè)部分必須呈現(xiàn)或忽略。
3.導(dǎo)入共享指令
視圖可以使用 Razor 指令做許多事情,例如導(dǎo)入命名空間或執(zhí)行依賴注入。許多視圖共享的指令可以在公共的 _ViewImports.cshtml 文件中指定。_ViewImports.cshtml 文件支持以下指令:
- @addTagHelper
- @removeTagHelper
- @tagHelperPrefix
- @using
- @model
- @inherits
- @inject
該文件不支持其他 Razor 特性,如函數(shù)和部分定義。
_ViewImports.cshtml 文件示例:
@using MVCTest @using MVCTest.Models @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers @addTagHelper "MVCTest.TagHelpers.EmailTagHelper,MVCTest"
ASP.NET Core MVC 應(yīng)用程序的 _ViewImports.cshtml 通常放在 Views 文件夾中。 _ViewImports.cshtml 文件可以放置在任何文件夾。在這種情況下,它將值應(yīng)用于該文件夾及其子文件夾中的視圖。 _ViewImports.cshtml 文件從根級(jí)開(kāi)始處理,然后對(duì)每個(gè)文件夾處理,直到視圖本身的位置。因此,在根級(jí)別指定的設(shè)置可能會(huì)在文件夾級(jí)別被覆蓋。
如果為視圖運(yùn)行多個(gè) _ViewImports.cshtml 文件,則 _ViewImports.cshtml 文件中包含的指令組合行為如下:
- @addTagHelper,@removeTagHelper : 按順序全部運(yùn)行
- @tagHelperPrefix : 與視圖最近的一個(gè)覆蓋任何其他 tagHelperPrefix
- @using : 包含所有 Using
- @inherits :與視圖最近的一個(gè)覆蓋任何其他 inherits
- @inject :對(duì)于每個(gè)屬性,與視圖最近的一個(gè)屬性將覆蓋所有具有相同屬性名稱的任何其他屬性
- @model : 與視圖最近的一個(gè)覆蓋任何其他 model
4.在每個(gè)視圖之前運(yùn)行代碼
如果有代碼需要在每個(gè)視圖運(yùn)行之前執(zhí)行,這些代碼應(yīng)放在 _ViewStart.cshtml 文件中。_ViewStart.cshtml 文件位于 Views 文件夾中。 _ViewStart.cshtml 中列出的語(yǔ)句在每個(gè)完整視圖(不包含布局和局部視圖)之前運(yùn)行。像 _ViewStart.cshtml 和 _ViewImports.cshtml 是層次結(jié)構(gòu)。如果在控制器相關(guān)視圖文件夾中定義了 _ViewStart.cshtml ,那么它將在 Views 文件夾根目錄中定義的文件夾之后運(yùn)行。
_ViewStart.cshtml 示例:
@{ Layout = "_Layout"; }
上面代碼指定所有視圖將使用 _Layout.cshtml 布局。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
檢測(cè)含有中文字符串的實(shí)際長(zhǎng)度
檢測(cè)含有中文字符串的實(shí)際長(zhǎng)度...2006-08-08C#列出局域網(wǎng)中可用SQL Server服務(wù)器(續(xù))
上一篇文章展示了使用COM對(duì)象如何列出局域網(wǎng)中的 SQL Server服務(wù)器信息,后來(lái)還發(fā)現(xiàn)在.Net中有現(xiàn)成的類可用,而不需要使用不太熟悉的COM對(duì)象了,這樣豈不是更好?下面我把代碼展示給大家:2008-04-04Linux下使用Jenkins自動(dòng)化構(gòu)建.NET?Core應(yīng)用
這篇文章介紹了Linux下使用Jenkins自動(dòng)化構(gòu)建.NET?Core應(yīng)用的方法,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04.Net行為型設(shè)計(jì)模式之備忘錄模式(Memento)
這篇文章介紹了.Net行為型設(shè)計(jì)模式之備忘錄模式(Memento),文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-05-05ASP.NET Core開(kāi)發(fā)Docker部署
這篇文章介紹了ASP.NET Core開(kāi)發(fā)Docker部署的方法,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-12-12