ASP.NET Core MVC 之佈局（Layout）

卡西莫多_Ruby發表於2019-07-26
ASP.NETMVC

　　1.什麼是佈局

　　佈局通常包含常見的使用者介面元素，例如應用頭，導航或選單元素和頁尾，如圖：

　　常見的HTML結構（例如指令碼和樣式表）也經常被應用程式中許多頁面使用。所有這些共享元素都可以在佈局中定義，然後由應用程式中使用的任何檢視引用。佈局減少了檢視中程式碼的重複。

　　按照慣例，ASP.NET 應用程式的預設佈局名為 _Layout.cshtml。 vs 專案模板在 Views/Shared 資料夾中包含此佈局檔案。

　　這個佈局為應用程式中的檢視定義了一個頂層模板。佈局對應用程式來說不是必需的，應用程式可以定義多個佈局，不同的檢視指定不同的佈局。

　　一個_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" />
        <link rel="stylesheet" href="~/css/site.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" href="~/css/site.min.css" 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 屬性。單個檢視通過設定此屬性來指定佈局：

@{
    Layout = "_Layout";
}

　　指定佈局也可以使用完整路徑。當提供部分檢視名稱時，先搜尋與控制器相關的資料夾，然後搜尋共享資料夾。預設情況下，每個佈局都必須呼叫 RenderBody()  方法。哪裡呼叫 RenderBody()  方法，檢視內容就在哪裡渲染。

　　

　　* 部分

　　佈局可以通過呼叫 RenderSection 方法，引用一個或多個部分。部分提供了組織某些頁面元素放置位置的方法。每次呼叫 RenderSection 時，都可以指定該部分是必須還是可選。如果未找到必須的部分，將丟擲異常。個別檢視使用 @section Razor 語法指定要在某個部分中呈現的內容。如果檢視定義了一個部分，那麼它必須被渲染。

　　檢視中的 @section 定義示例：

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

　　在上面的程式碼中，驗證指令碼被新增到包含表單的檢視的指令碼部分。同一應用程式中其他檢視可能不需要任何其他指令碼，因此不需要定義指令碼部分。

　　檢視中定義的部分僅在其直接佈局頁面中可用。它們不能從區域性檢視，檢視元件或檢視系統的其他部分引用。

 

　　*忽略部分

 　　預設情況下，內容頁面中的正文和所有部分都是必須由佈局頁面渲染。Razor 檢視引擎通過跟蹤主體和每個部分是否已渲染來實施此操作。

　　要想指示檢視引擎忽略正文或部分，請在佈局中呼叫 IgnoreBody 和 IgnoreSection 方法。

　　Razor 頁面中的正文和每個部分必須呈現或忽略。

 

　　3.匯入共享指令

 　　檢視可以使用 Razor 指令做許多事情，例如匯入名稱空間或執行依賴注入。許多檢視共享的指令可以在公共的  _ViewImports.cshtml 檔案中指定。_ViewImports.cshtml 檔案支援以下指令：

　　　　@addTagHelper

　　　　@removeTagHelper

　　　　@tagHelperPrefix

　　　　@using

　　　　@model

　　　　@inherits

　　　　@inject

　　該檔案不支援其他 Razor 特性，如函式和部分定義。

　　_ViewImports.cshtml 檔案示例：

@using MVCTest
@using MVCTest.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper "MVCTest.TagHelpers.EmailTagHelper,MVCTest"

　　ASP.NET Core MVC 應用程式的 _ViewImports.cshtml 通常放在 Views 資料夾中。 _ViewImports.cshtml 檔案可以放置在任何資料夾。在這種情況下，它將值應用於該資料夾及其子資料夾中的檢視。 _ViewImports.cshtml  檔案從根級開始處理，然後對每個資料夾處理，直到檢視本身的位置。因此，在根級別指定的設定可能會在資料夾級別被覆蓋。

　　如果為檢視執行多個 _ViewImports.cshtml  檔案，則 _ViewImports.cshtml  檔案中包含的指令組合行為如下：

　　　　@addTagHelper，@removeTagHelper ： 按順序全部執行

　　　　@tagHelperPrefix ： 與檢視最近的一個覆蓋任何其他 tagHelperPrefix

　　　　@using ： 包含所有 Using

　　　　@inherits ：與檢視最近的一個覆蓋任何其他 inherits 

　　　　@inject ：對於每個屬性，與檢視最近的一個屬性將覆蓋所有具有相同屬性名稱的任何其他屬性

　　　　@model : 與檢視最近的一個覆蓋任何其他 model

 

　　4.在每個檢視之前執行程式碼

　　如果有程式碼需要在每個檢視執行之前執行，這些程式碼應放在 _ViewStart.cshtml 檔案中。_ViewStart.cshtml 檔案位於 Views 資料夾中。 _ViewStart.cshtml 中列出的語句在每個完整檢視（不包含佈局和區域性檢視）之前執行。像 _ViewStart.cshtml 和  _ViewImports.cshtml   是層次結構。如果在控制器相關檢視資料夾中定義了 _ViewStart.cshtml  ，那麼它將在 Views 資料夾根目錄中定義的資料夾之後執行。

　　_ViewStart.cshtml 示例：

@{
    Layout = "_Layout";
}

　　上面程式碼指定所有檢視將使用  _Layout.cshtml 佈局。

　　

 

相關文章