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

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

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

1.什么是布局

布局通常包含常見的用戶界面元素，例如應(yīng)用頭，導(dǎo)航或菜單元素和頁腳，如圖：

常見的HTML結(jié)構(gòu)（例如腳本和樣式表）也經(jīng)常被應(yīng)用程序中許多頁面使用。所有這些共享元素都可以在布局中定義，然后由應(yīng)用程序中使用的任何視圖引用。布局減少了視圖中代碼的重復(fù)。

按照慣例，ASP.NET 應(yīng)用程序的默認(rèn)布局名為 _Layout.cshtml。 vs 項目模板在 Views/Shared 文件夾中包含此布局文件。

這個布局為應(yīng)用程序中的視圖定義了一個頂層模板。布局對應(yīng)用程序來說不是必需的，應(yīng)用程序可以定義多個布局，不同的視圖指定不同的布局。

一個_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() 顯示引用該布局的視圖頁面。

2.指定布局

Razor 視圖有一個 Layout 屬性。單個視圖通過設(shè)置此屬性來指定布局：

@{
    Layout = "_Layout";
}

指定布局也可以使用完整路徑。當(dāng)提供部分視圖名稱時，先搜索與控制器相關(guān)的文件夾，然后搜索共享文件夾。默認(rèn)情況下，每個布局都必須調(diào)用 RenderBody() 方法。哪里調(diào)用 RenderBody() 方法，視圖內(nèi)容就在哪里渲染。

* 部分

布局可以通過調(diào)用 RenderSection 方法，引用一個或多個部分。部分提供了組織某些頁面元素放置位置的方法。每次調(diào)用 RenderSection 時，都可以指定該部分是必須還是可選。如果未找到必須的部分，將拋出異常。個別視圖使用 @section Razor 語法指定要在某個部分中呈現(xiàn)的內(nèi)容。如果視圖定義了一個部分，那么它必須被渲染。

視圖中的 @section 定義示例：

@section Scripts{ 
    <script type="text/javascript" src="~/js/site.min.js"></script>
}

在上面的代碼中，驗證腳本被添加到包含表單的視圖的腳本部分。同一應(yīng)用程序中其他視圖可能不需要任何其他腳本，因此不需要定義腳本部分。

視圖中定義的部分僅在其直接布局頁面中可用。它們不能從局部視圖，視圖組件或視圖系統(tǒng)的其他部分引用。

*忽略部分

默認(rèn)情況下，內(nèi)容頁面中的正文和所有部分都是必須由布局頁面渲染。Razor 視圖引擎通過跟蹤主體和每個部分是否已渲染來實施此操作。

要想指示視圖引擎忽略正文或部分，請在布局中調(diào)用 IgnoreBody 和 IgnoreSection 方法。

Razor 頁面中的正文和每個部分必須呈現(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 文件從根級開始處理，然后對每個文件夾處理，直到視圖本身的位置。因此，在根級別指定的設(shè)置可能會在文件夾級別被覆蓋。

如果為視圖運行多個 _ViewImports.cshtml 文件，則 _ViewImports.cshtml 文件中包含的指令組合行為如下：

@addTagHelper，@removeTagHelper ：按順序全部運行
@tagHelperPrefix ：與視圖最近的一個覆蓋任何其他 tagHelperPrefix
@using ：包含所有 Using
@inherits ：與視圖最近的一個覆蓋任何其他 inherits
@inject ：對于每個屬性，與視圖最近的一個屬性將覆蓋所有具有相同屬性名稱的任何其他屬性
@model : 與視圖最近的一個覆蓋任何其他 model

4.在每個視圖之前運行代碼

如果有代碼需要在每個視圖運行之前執(zhí)行，這些代碼應(yīng)放在 _ViewStart.cshtml 文件中。_ViewStart.cshtml 文件位于 Views 文件夾中。 _ViewStart.cshtml 中列出的語句在每個完整視圖（不包含布局和局部視圖）之前運行。像 _ViewStart.cshtml 和 _ViewImports.cshtml 是層次結(jié)構(gòu)。如果在控制器相關(guān)視圖文件夾中定義了 _ViewStart.cshtml ，那么它將在 Views 文件夾根目錄中定義的文件夾之后運行。

_ViewStart.cshtml 示例：