asp.net core系列 44 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 中的布局

posted on 2019-03-19 09:05 花陰偷移閱讀(...) 評論(...) 編輯收藏

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