一.概述

　　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的布局文件：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.      @* viewport兼容移动端 *@
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>@ViewData["Title"] - StudyMVCDemo</title>
  8.  
  9.       @* 定义不同的环境加载不同的css文件 *@
  10.         <environment include="Development">
  11.             <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
  12.         </environment>
  13.         <environment exclude="Development">
  14.             <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"
  15.                   asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
  16.                   asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
  17.                   crossorigin="anonymous"
  18.                   integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE="/>
  19.         </environment>
  20.         <link rel="stylesheet" href="~/css/site.css" />
  21.     </head>
  22.     <body>
  23.  
  24.         @*页头区 定义页面导航 *@
  25.         <header>
  26.             <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
  27.                 <div class="container">
  28.                     <a class="navbar-brand" asp-area="" asp-controller="Movies" asp-action="Index">StudyMVCDemo</a>
  29.                     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"
     　　　　　　　　　　　　　　　　aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  30.                         <span class="navbar-toggler-icon"></span>
  31.                     </button>
  32.                     <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
  33.                         <ul class="navbar-nav flex-grow-1">
  34.                             <li class="nav-item">
  35.                                 <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
  36.                             </li>
  37.                             <li class="nav-item">
  38.                                 <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
  39.                             </li>
  40.                         </ul>
  41.                     </div>
  42.                 </div>
  43.             </nav>
  44.         </header>
  45.  
  46.         @*内容区 调用RenderBody 来呈现内容视图 *@
  47.         <div class="container">
  48.             @* GDPR(个人数据保护条例)协议的支持，关联UseCookiePolicy*@
  49.             <partial name="_CookieConsentPartial" />
  50.             <main role="main" class="pb-3">
  51.                 @RenderBody()
  52.             </main>
  53.         </div>
  54.  
  55.         @*页脚区 *@
  56.         <footer class="border-top footer text-muted">
  57.             <div class="container">
  58.                 &copy; 2019 - StudyMVCDemo - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
  59.             </div>
  60.         </footer>
  61.  
  62.         @* 定义不同的环境加载不同的js文件 *@
  63.         <environment include="Development">
  64.             <script src="~/lib/jquery/dist/jquery.js"></script>
  65.             <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
  66.         </environment>
  67.         <environment exclude="Development">
  68.             <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
  69.                     asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
  70.                     asp-fallback-test="window.jQuery"
  71.                     crossorigin="anonymous"
  72.                     integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
  73.             </script>
  74.             <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"
  75.                     asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
  76.                     asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
  77.                     crossorigin="anonymous"
  78.                     integrity="sha256-E/V4cWE4qvAeO5MOhjtGtqDzPndRO1LBk8lJ/PR7CA4=">
  79.             </script>
  80.         </environment>
  81.         <script src="~/js/site.js" asp-append-version="true"></script>
  82.  
  83.       @* RenderSection是加载内容视图中的js文件, Scripts是一个节点名称。
  84.       例如：在Privacy.cshtml内容视图中，需要加载一个1.js文件，下面使用节点名称Scripts。
  85.       @section Scripts {
  86.          <script src="~/lib/jquery/dist/1.js"></script>
  87.          }
  88.       *@
  89.         @RenderSection("Scripts", required: false)
  90.     </body>
  91.     </html>

　　

　　1.2 自定义布局

　　　　上面的布局_Layout是通过_ViewStart.cshtml 分部视图来指定的。在应用程序中可以定义多个布局，并且不同的视图指定不同的布局，下面新建一个_MyLayout.cshtml布局，在Privacy.cshtml视图中应用布局，代码如下：

　　　　(1) _MyLayout.cshtml布局

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>@ViewData["Title"] - StudyMVCDemo</title>
  7.     </head>
  8.     <body>
  9.         <header>
  10.             <div style="height:50px; width:auto;  text-align:center; border:solid red 1px" >_MyLayout页头</div>
  11.         </header>
  12.  
  13.         <div class="container">
  14.             <partial name="_CookieConsentPartial" />
  15.             <main role="main" class="pb-3">
  16.                 @RenderBody()
  17.             </main>
  18.         </div>
  19.  
  20.         <footer class="border-top footer text-muted">
  21.             <div style="height:50px; width:auto;  text-align:center; border:solid red 1px">_MyLayout页尾</div>
  22.         </footer>
  23.  
  24.     </body>
  25.     </html>

　　　　(2) Privacy.cshtml视图中应用布局

  1. @{
  2.     ViewData["Title"] = "Privacy Policy";
  3.     Layout = "_MyLayout";
  4. }
  5. <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）。  新建项目默认引入的共享指令如下：

  1.     　　@using StudyMVCDemo
  2.    　　 @using StudyMVCDemo.Models
  3.    　　 @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

　　　　如果去掉using StudyMVCDemo.Models，在其它内容视图页引用实体时(比如：@model Movie)，会生成时报错。

　　　　

　　1.4 _ViewStart.cshtml

　　　　需要在每个MVC视图或Razor页面之前，运行的代码应放在_ViewStart.cshtml文件中。 在呈现每个完整视图（不是布局页，也不是分部视图页）之前运行 _ViewStart.cshtml 中列出的语句。与_ViewImports.cshtml一样也是分层结构。比如该页默认指定的布局是Layout 。

  1. 　　　　@{
  2.    　　　　 Layout = "_Layout";
  3. 　　　　}

　　参考文献

　　　　ASP.NET Core 中的布局

　　　　

asp.net core系列 44 Web应用 布局的更多相关文章

  1. asp.net core系列 40 Web 应用MVC 介绍与详细示例

    一. MVC介绍 MVC架构模式有助于实现关注点分离.视图和控制器均依赖于模型. 但是,模型既不依赖于视图,也不依赖于控制器. 这是分离的一个关键优势. 这种分离允许模型独立于可视化展示进行构建和测试 ...

  2. asp.net core系列 39 Web 应用Razor 介绍与详细示例

    一. Razor介绍 在使用ASP.NET Core Web开发时, ASP.NET Core MVC 提供了一个新特性Razor. 这样开发Web包括了MVC框架和Razor框架.对于Razor来说 ...

  3. asp.net core 系列 18 web服务器实现

    一. ASP.NET Core Module 在介绍ASP.NET Core Web实现之前,先来了解下ASP.NET Core Module.该模块是插入 IIS 管道的本机 IIS 模块(本机是指 ...

  4. asp.net core 系列 16 Web主机 IWebHostBuilder

    一.概述 在asp.net core中,Host主机负责应用程序启动和生存期管理.host主机包括Web 主机(IWebHostBuilder)和通用主机(IHostBuilder).Web 主机是适 ...

  5. asp.net core系列 43 Web应用 Session分布式存储(in memory与Redis)

    一.概述 HTTP 是无状态的协议. 默认情况下,HTTP 请求是不保留用户值或应用状态的独立消息. 本文介绍了几种保留请求间用户数据和应用状态的方法.下面以表格形式列出这些存储方式,本篇专讲Sess ...

  6. asp.net core系列 42 Web 应用 分部视图

    一.分部视图 对于MVC 视图和 Razor Pages 页面,都有分部视图功能.通常将 MVC 视图和 Razor Pages 页面统称为“标记文件”,下面会常提到该名词.使用分部视图的优势包括:( ...

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

    一.MVC视图 在Web开发的MVC和Razor中,都有使用视图,在Razor中称为"页"..cshtml视图是嵌入了Razor标记的HTML模板. Razor 标记使用C#代码, ...

  8. asp.net core系列 67 Web压力测试工具WCAT

    一.介绍 最近搭建了一套CQRS框架,需要在投入开发前,进行必要的压力测试.Web Capacity Analysis Tool  (Wcat)是一种轻量级HTTP负载生成工具,主要用于衡量受控环境中 ...

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

    一. 模型绑定 ASP.NET Core MVC 中的模型绑定,是将 HTTP 请求中的数据映射到action方法参数. 这些参数可能是简单类型的参数,如字符串.整数或浮点数,也可能是复杂类型的参数. ...

随机推荐

  1. Chatbot思考录

    人工分词产生不一致性的原因主要在于人们对词的颗粒度的认知问题.在汉语里,词是表达意最基本的意思,再小意思就变了.在机器翻译中会有一种颗粒度比另外一种颗粒度更好的情况,颗粒度大的翻译效果好. 为了解决词 ...

  2. 115个Java面试题和答案——终极列表（下）【转】

    第一篇讨论了面向对象编程和它的特点,关于Java和它的功能的常见问题,Java的集合类,垃圾收集器,本章主要讨论异常处理,Java小应用程序,Swing,JDBC,远程方法调用(RMI),Servle ...

  3. 洛谷 P1613 解题报告

    P1613 跑路 题目描述 小\(A\)的工作不仅繁琐,更有苛刻的规定,要求小\(A\)每天早上在\(6:00\)之前到达公司,否则这个月工资清零.可是小\(A\)偏偏又有赖床的坏毛病.于是为了保住自 ...

  4. Unite Beijing 2018 参会简要分享

    一. Training Day 主讲人:鲍建运 操作:马瑞 课程包括较为完整的功能,如灯光设置,角色动画控制,Cinemachine,Timeline,AI寻路,以及最新的Post Processin ...

  5. javascript中的隐式类型转化

    javascript中的隐式类型转化 #隐式转换 ## "+" 字符串和数字 如果某个操作数是字符串或者能够通过以下步骤转换为字符串的话,+将进行拼接操作. 如果其中一个操作数是对 ...

  6. 《Linux/Unix系统编程手册》 时间子系统

    Linux下操作系统编程有两本经典APUE即<Advanced Programming in the UNIX Environment>和TLPI<The Linux Program ...

  7. Linux时间子系统之一：认识timer_list和timer_stats和使用

    内核版本:v3.4.xxx 一.前言 内核提供了方便查看当前系统TickDevice.活动的Timer列表以及Timer使用的统计信息. 内核分别用两个节点来表示TimerList和Timer统计信息 ...

  8. Socket Connect问题

    一.非阻塞Connect对于Select时应注意的问题二.linux客户端socket非阻塞connect编程 一.非阻塞Connect对于Select时应注意的问题 对于面向连接的socket(SO ...

  9. LINUX PID 1和SYSTEMD 专题

    Linux下有3个特殊的进程,idle进程(PID = 0), init进程(PID = 1)和kthreadd(PID = 2) idle进程其pid=0,其前身是系统创建的第一个进程,也是唯一一个 ...

  10. Spring cloud整体框架

    研究了一段时间spring boot了准备向spirng cloud进发,公司架构和项目也全面拥抱了Spring Cloud.在使用了一段时间后发现Spring Cloud从技术架构上降低了对大型系统 ...