快捷導(dǎo)航

ASP.NET?Core?MVC中的布局（Layout）

更新時(shí)間：2022年04月14日 09:01:28 作者：Ruby_Lu

這篇文章介紹了ASP.NET?Core?MVC中的布局（Layout），文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

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>&copy; 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 示例：