ASP.NET Core MVC 之布局（Layout）
1.什么是布局
布局通常包含常见的用户界面元素，例如应用头，导航或菜单元素和页脚，如图：
常见的HTML结构（例如脚本和样式表）也经常被应用程序中许多页面使用。所有这些共享元素都可以在布局中定义，然后由应用程序中使用的任何视图引用。布局减少了视图中代码的重复。
按照惯例，ASP.NET 应用程序的默认布局名为 _Layout.cshtml。 vs 项目模板在 Views/Shared 文件夹中包含此布局文件。
这个布局为应用程序中的视图定义了一个顶层模板。布局对应用程序来说不是必需的，应用程序可以定义多个布局，不同的视图指定不同的布局。
一个_Layout.cshtml 例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - MVCTest</title> <environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/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" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">MVCTest</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
</ul>
</div>
</div>
</nav> <partial name="_CookieConsentPartial" /> <div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© 2019 - MVCTest</p>
</footer>
</div> <environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment exclude="Development">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment> @RenderSection("Scripts", required: false)
</body>
</html>
@RenderBody() 显示引用该布局的视图页面。
2.指定布局
Razor 视图有一个 Layout 属性。单个视图通过设置此属性来指定布局：
@{
Layout = "_Layout";
}
指定布局也可以使用完整路径。当提供部分视图名称时，先搜索与控制器相关的文件夹，然后搜索共享文件夹。默认情况下，每个布局都必须调用 RenderBody() 方法。哪里调用 RenderBody() 方法，视图内容就在哪里渲染。
* 部分
布局可以通过调用 RenderSection 方法，引用一个或多个部分。部分提供了组织某些页面元素放置位置的方法。每次调用 RenderSection 时，都可以指定该部分是必须还是可选。如果未找到必须的部分，将抛出异常。个别视图使用 @section Razor 语法指定要在某个部分中呈现的内容。如果视图定义了一个部分，那么它必须被渲染。
视图中的 @section 定义示例：
@section Scripts{
<script type="text/javascript" src="~/js/site.min.js"></script>
}
在上面的代码中，验证脚本被添加到包含表单的视图的脚本部分。同一应用程序中其他视图可能不需要任何其他脚本，因此不需要定义脚本部分。
视图中定义的部分仅在其直接布局页面中可用。它们不能从局部视图，视图组件或视图系统的其他部分引用。
*忽略部分
默认情况下，内容页面中的正文和所有部分都是必须由布局页面渲染。Razor 视图引擎通过跟踪主体和每个部分是否已渲染来实施此操作。
要想指示视图引擎忽略正文或部分，请在布局中调用 IgnoreBody 和 IgnoreSection 方法。
Razor 页面中的正文和每个部分必须呈现或忽略。
3.导入共享指令
视图可以使用 Razor 指令做许多事情，例如导入命名空间或执行依赖注入。许多视图共享的指令可以在公共的 _ViewImports.cshtml 文件中指定。_ViewImports.cshtml 文件支持以下指令：
@addTagHelper
@removeTagHelper
@tagHelperPrefix
@using
@model
@inherits
@inject
该文件不支持其他 Razor 特性，如函数和部分定义。
_ViewImports.cshtml 文件示例：
@using MVCTest
@using MVCTest.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper "MVCTest.TagHelpers.EmailTagHelper,MVCTest"
ASP.NET Core MVC 应用程序的 _ViewImports.cshtml 通常放在 Views 文件夹中。 _ViewImports.cshtml 文件可以放置在任何文件夹。在这种情况下，它将值应用于该文件夹及其子文件夹中的视图。 _ViewImports.cshtml 文件从根级开始处理，然后对每个文件夹处理，直到视图本身的位置。因此，在根级别指定的设置可能会在文件夹级别被覆盖。
如果为视图运行多个 _ViewImports.cshtml 文件，则 _ViewImports.cshtml 文件中包含的指令组合行为如下：
@addTagHelper，@removeTagHelper ： 按顺序全部运行
@tagHelperPrefix ： 与视图最近的一个覆盖任何其他 tagHelperPrefix
@using ： 包含所有 Using
@inherits ：与视图最近的一个覆盖任何其他 inherits
@inject ：对于每个属性，与视图最近的一个属性将覆盖所有具有相同属性名称的任何其他属性
@model : 与视图最近的一个覆盖任何其他 model
4.在每个视图之前运行代码
如果有代码需要在每个视图运行之前执行，这些代码应放在 _ViewStart.cshtml 文件中。_ViewStart.cshtml 文件位于 Views 文件夹中。 _ViewStart.cshtml 中列出的语句在每个完整视图（不包含布局和局部视图）之前运行。像 _ViewStart.cshtml 和 _ViewImports.cshtml 是层次结构。如果在控制器相关视图文件夹中定义了 _ViewStart.cshtml ，那么它将在 Views 文件夹根目录中定义的文件夹之后运行。
_ViewStart.cshtml 示例：
@{
Layout = "_Layout";
}
上面代码指定所有视图将使用 _Layout.cshtml 布局。
ASP.NET Core MVC 之布局（Layout）的更多相关文章
- ASP.NET Core 入门教程 6、ASP.NET Core MVC 视图布局入门
一.前言 1.本教程主要内容 ASP.NET Core MVC (Razor)视图母版页教程 ASP.NET Core MVC (Razor)带有Section的视图母版页教程 ASP.NET Cor ...
- ASP.NET Core 入门笔记7，ASP.NET Core MVC 视图布局入门
一.前言 1.本教程主要内容 ASP.NET Core MVC (Razor)视图母版页教程 ASP.NET Core MVC (Razor)带有Section的视图母版页教程 ASP.NET Cor ...
- ASP.NET Core MVC 视图
ASP.NET Core MVC中视图的知识和ASP.NET MVC有很多相似之处,学习难度较低.以下内容主要体现了编程中模块化的思想,模块化才应是我们关注的重点. Layout 布局用于提供各个页面 ...
- 创建ASP.NET Core MVC应用程序(1)-添加Controller和View
创建ASP.NET Core MVC应用程序(1)-添加Controller和View 参考文档:Getting started with ASP.NET Core MVC and Visual St ...
- Working with Data » 使用Visual Studio开发ASP.NET Core MVC and Entity Framework Core初学者教程
原文地址:https://docs.asp.net/en/latest/data/ef-mvc/intro.html The Contoso University sample web applica ...
- 007.Adding a view to an ASP.NET Core MVC app -- 【在asp.net core mvc中添加视图】
Adding a view to an ASP.NET Core MVC app 在asp.net core mvc中添加视图 2017-3-4 7 分钟阅读时长 本文内容 1.Changing vi ...
- Pro ASP.NET Core MVC 6th 第三章
第三章 MVC 模式,项目和约定 在深入了解ASP.NET Core MVC的细节之前,我想确保您熟悉MVC设计模式背后的思路以及将其转换为ASP.NET Core MVC项目的方式. 您可能已经了解 ...
- Pro ASP.NET Core MVC 第6版 第二章（后半章）
增加动态输出 整个web应用平台的关注点在于构建并显示动态输出内容.在MVC里,控制器负责构建一些数据并将其传给视图.视图负责渲染成HTML. 从控制器向视图传递数据的一种方式是使用ViewBag 对 ...
- ASP.NET Core MVC 之视图（Views）
ASP.NET Core MVC 控制器可以使用视图返回格式化的结果. 1.什么是视图 在 MVC 中,视图封装了用户与应用交互呈现细节.视图是具有生成要发送到客户端内容的,包含嵌入代码的HTML模板 ...
随机推荐
- bootstrap组件和插件
一.用node.js读取文件 //引入fs模块 var fs= require ('fs'); // console.log(fs); //调用fs模块的readFile方法 fs.readFile( ...
- Unity Shader 玻璃效果
一个玻璃效果主要分为两个部分,一部分是折射效果的计算,另一部分则是反射.下面分类进行讨论: 折射: 1.利用Grass Pass对当前屏幕的渲染图像进行采样 2.得到法线贴图对折射的影响 3.对采集的 ...
- JavaScript 操作 DOM 总结
基本概念 DOM 是 JavaScript 操作网页的接口,全称为"文档对象模型"(Document Object Model).它的作用是将网页转为一个 JavaScript 对 ...
- 【小记整理】mybatis配置多个扫描路径写法
百度得到,但是很乱,稍微整理下: 最近拆项目,遇到个小问题,稍微记录下: <!-- spring和MyBatis完美整合,不需要mybatis的配置映射文件 --> <bean id ...
- Logback详细整理，基于springboot的日志配置
Logback的配置介绍: 1.Logger.appender及layout Logger作为日志的记录器,把它关联到应用的对应的context上后,主要用于存放日志对象,也可以定义日志类型.级别. ...
- ajax：error：function (XMLHttpRequest, textStatus, errorThrown) 中status、readyState和textStatus状态意义
textStatus: "timeout", 超时 "error", 出错 "notmodified" , 未修改 "parser ...
- node中的session的使用
Session不是一个天生就有的技术,它的使用需要依赖cookie. session依赖cookie,当一个浏览器禁用cookie的时候,登陆效果消失: 或者用户清除了cookie,登陆也消失,ses ...
- Gradle +HanLP +SpringBoot 构建关键词提取，摘要提取 。入门篇
前段时间,领导要求出一个关键字提取的微服务,要求轻量级. 对于没写过微服务的一个小白来讲.有点赶鸭子上架,但是没办法,硬着头皮上也不能说不会啊. 首先了解下公司目前的架构体系,发现并不是分布式开发,只 ...
- 二进制mariadb多实例
实验环境: centos7.6 :IP: 192.168.99.110 1.首先下载二进制的压缩包,解压到一个指定的目录/hx/下 [root@centos7 hx]#tar xf mariadb-1 ...
- canvas多彩粒子星空背景
HTML5 canvas 实现多颜色粒子星空页面背景,喜欢的可以收藏.自己可以定义颜色,粒子透明度,粒子数量,粒子大小. 预览效果图如下: 1.获取canvas上下文,并且动态设置canvas尺寸和屏 ...