asp.net core系列 44 Web應用佈局_ZenDei技術網路在線

一.概述 MVC的視圖與Razor頁面經常共用視覺和程式元素，通過使用佈局來完成，佈局還可減少重覆代碼。本章演示了以下內容的操作方法：(1)使用通用佈局，(2)自定義佈局，(3) 共用指令，(4)在呈現Razor頁面或MVC視圖之前運行通用代碼。大多數 Web 應用都有一個通用佈局，可在頁面間切換 ...

一.概述

　　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">
                &copy; 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";
　　　　}

　　參考文獻

　　　　ASP.NET Core 中的佈局

asp.net core系列 44 Web應用 佈局

一.概述

asp.net core系列 44 Web應用佈局