一.概述
MVC的視圖與Razor頁面經常共享視覺和程序元素，通過使用布局來完成，布局還可減少重復代碼。本章演示了以下內容的操作方法：(1)使用通用布局，(2)自定義布局，(3) 共享指令，(4)在呈現Razor頁面或MVC視圖之前運行通用代碼。
大多數 Web 應用都有一個通用布局，可在頁面間切換時，為用戶提供一致體驗。 布局通常包括應用頁頭、導航或菜單、頁腳等常見的用戶界面元素，還有經常使用script和css等常用的 HTML 結構。 所有這些共享元素均可在布局文件中進行定義，在Content內容視圖中套用布局來共享視覺和程序元素。
1.1 默認布局
按照約定: ASP.NET Core 應用的默認布局名為 _Layout.cshtml。 在vs中創建ASP.NET Core 項目使用模板的布局文件如下所示：
(1) Razor頁面的布局：Pages/Shared/_Layout.cshtml
(2) Mvc視圖的布局： Views/Shared/_Layout.cshtml
下面的代碼是創建的項目模板，默認的_Layout的布局文件：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> @* viewport兼容移動端 *@ <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>@ViewData["Title"] - StudyMVCDemo</title> @* 定義不同的環境加載不同的css文件 *@ <environment include="Development"> <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" /> </environment> <environment exclude="Development"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/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" crossorigin="anonymous" integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE="/> </environment> <link rel="stylesheet" href="~/css/site.css" /> </head> <body> @*頁頭區 定義頁面導航 *@ <header> <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3"> <div class="container"> <a class="navbar-brand" asp-area="" asp-controller="Movies" asp-action="Index">StudyMVCDemo</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse"> <ul class="navbar-nav flex-grow-1"> <li class="nav-item"> <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a> </li> <li class="nav-item"> <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a> </li> </ul> </div> </div> </nav> </header> @*內容區 調用RenderBody 來呈現內容視圖 *@ <div class="container"> @* GDPR(個人數據保護條例)協議的支持，關聯UseCookiePolicy*@ <partial name="_CookieConsentPartial" /> <main role="main" class="pb-3"> @RenderBody() </main> </div> @*頁腳區 *@ <footer class="border-top footer text-muted"> <div class="container"> © 2019 - StudyMVCDemo - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a> </div> </footer> @* 定義不同的環境加載不同的js文件 *@ <environment include="Development"> <script src="~/lib/jquery/dist/jquery.js"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script> </environment> <environment exclude="Development"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" asp-fallback-src="~/lib/jquery/dist/jquery.min.js" asp-fallback-test="window.jQuery" crossorigin="anonymous" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js" asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js" asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal" crossorigin="anonymous" integrity="sha256-E/V4cWE4qvAeO5MOhjtGtqDzPndRO1LBk8lJ/PR7CA4="> </script> </environment> <script src="~/js/site.js" asp-append-version="true"></script> @* RenderSection是加載內容視圖中的js文件, Scripts是一個節點名稱。 例如：在Privacy.cshtml內容視圖中，需要加載一個1.js文件，下面使用節點名稱Scripts。 @section Scripts { <script src="~/lib/jquery/dist/1.js"></script> } *@ @RenderSection("Scripts", required: false) </body> </html>
1.2 自定義布局
上面的布局_Layout是通過_ViewStart.cshtml 分部視圖來指定的。在應用程序中可以定義多個布局，並且不同的視圖指定不同的布局，下面新建一個_MyLayout.cshtml布局，在Privacy.cshtml視圖中應用布局，代碼如下：
(1) _MyLayout.cshtml布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>@ViewData["Title"] - StudyMVCDemo</title> </head> <body> <header> <div style="height:50px; width:auto; text-align:center; border:solid red 1px" >_MyLayout頁頭</div> </header> <div class="container"> <partial name="_CookieConsentPartial" /> <main role="main" class="pb-3"> @RenderBody() </main> </div> <footer class="border-top footer text-muted"> <div style="height:50px; width:auto; text-align:center; border:solid red 1px">_MyLayout頁尾</div> </footer> </body> </html>
(2) Privacy.cshtml視圖中應用布局
@{ ViewData["Title"] = "Privacy Policy"; Layout = "_MyLayout"; } <h1>@ViewData["Title"]</h1>
Privacy頁面應用布局后效果如下：
1.3 共享指令_ViewImports.cshtml
MVC視圖和Razor頁面可以使用 Razor 指令來導入命名空間並使用依賴項注入。 由多個視圖共享的指令可以在通用 _ViewImports.cshtml 文件中進行指定。 _ViewImports 文件支持以下指令：
@addTagHelper
@removeTagHelper
@tagHelperPrefix
@using
@model
@inherits
@inject
_ViewImports.cshtml 文件可以放在任何文件夾中，在這種情況下，它只會應用於該文件夾及其子文件夾中的頁面或視圖。 可以在不同視圖目錄存放_ViewImports.cshtml。 這樣文件夾級別覆蓋根級別指定的 _ViewImports 設置。默認是存放在根級別下（見圖1.1）。 新建項目默認引入的共享指令如下：
@using StudyMVCDemo
@using StudyMVCDemo.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
如果去掉using StudyMVCDemo.Models，在其它內容視圖頁引用實體時(比如：@model Movie)，會生成時報錯。
1.4 _ViewStart.cshtml
需要在每個MVC視圖或Razor頁面之前，運行的代碼應放在_ViewStart.cshtml文件中。 在呈現每個完整視圖（不是布局頁，也不是分部視圖頁）之前運行 _ViewStart.cshtml 中列出的語句。與_ViewImports.cshtml一樣也是分層結構。比如該頁默認指定的布局是Layout 。
@{
Layout = "_Layout";
}
參考文獻