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

程序员文章站 2022-04-28 13:23:46

一.概述 MVC的视图与Razor页面经常共享视觉和程序元素，通过使用布局来完成，布局还可减少重复代码。本章演示了以下内容的操作方法：(1)使用通用布局，(2)自定义布局，(3) 共享指令，(4)在呈现Razor页面或MVC视图之前运行通用代码。大多数 Web 应用都有一个通用布局，可在页面间切换 ......

一.概述

　　mvc的视图与razor页面经常共享视觉和程序元素，通过使用布局来完成，布局还可减少重复代码。本章演示了以下内容的操作方法：(1)使用通用布局，(2)自定义布局，(3) 共享指令，(4)在呈现razor页面或mvc视图之前运行通用代码。

　　大多数 web 应用都有一个通用布局，可在页面间切换时，为用户提供一致体验。布局通常包括应用页头、导航或菜单、页脚等常见的用户界面元素，还有经常使用script和css等常用的 html 结构。所有这些共享元素均可在布局文件中进行定义，在content内容视图中套用布局来共享视觉和程序元素。

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

　　1.1 默认布局

　　　　按照约定: asp.net core 应用的默认布局名为 _layout.cshtml。在vs中创建asp.net core 项目使用模板的布局文件如下所示：

　　　　(1) razor页面的布局：pages/shared/_layout.cshtml

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

　　　　(2) mvc视图的布局： views/shared/_layout.cshtml

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

　　　　下面的代码是创建的项目模板，默认的_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页面应用布局后效果如下：

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

　　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 中的布局

上一篇：我是一个体育老师啊

下一篇： keepalived介绍

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

一.概述

（二）快速搭建 ASP.net core Web 应用

ASP.NET Core Web 应用程序开发期间部署到IIS自定义主机域名并附加到进程调试

【Web API系列教材】1.3 — 实战：用ASP.NET Web API和Angular.js创建单页面应用程序（上）

【Web API系列教材】1.3 — 实战：用ASP.NET Web API和Angular.js创建单页面应用程序（下）

循序渐进学.Net Core Web Api开发系列【15】：应用安全

asp.net core系列 41 Web 应用 MVC视图

《ASP.NET Core In Action》读书笔记系列二 ASP.NET Core 能用于什么样的应用，什么时候选择ASP.NET Core

【Web API系列教程】1.3 — 实战：用ASP.NET Web API和Angular.js创建单页面应用程序（上）...

asp.net core系列 45 Web应用模型绑定和验证