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>&copy; 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）的更多相关文章

  1. ASP.NET Core 入门教程 6、ASP.NET Core MVC 视图布局入门

    一.前言 1.本教程主要内容 ASP.NET Core MVC (Razor)视图母版页教程 ASP.NET Core MVC (Razor)带有Section的视图母版页教程 ASP.NET Cor ...

  2. ASP.NET Core 入门笔记7，ASP.NET Core MVC 视图布局入门

    一.前言 1.本教程主要内容 ASP.NET Core MVC (Razor)视图母版页教程 ASP.NET Core MVC (Razor)带有Section的视图母版页教程 ASP.NET Cor ...

  3. ASP.NET Core MVC 视图

    ASP.NET Core MVC中视图的知识和ASP.NET MVC有很多相似之处,学习难度较低.以下内容主要体现了编程中模块化的思想,模块化才应是我们关注的重点. Layout 布局用于提供各个页面 ...

  4. 创建ASP.NET Core MVC应用程序(1)-添加Controller和View

    创建ASP.NET Core MVC应用程序(1)-添加Controller和View 参考文档:Getting started with ASP.NET Core MVC and Visual St ...

  5. 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 ...

  6. 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 ...

  7. Pro ASP.NET Core MVC 6th 第三章

    第三章 MVC 模式,项目和约定 在深入了解ASP.NET Core MVC的细节之前,我想确保您熟悉MVC设计模式背后的思路以及将其转换为ASP.NET Core MVC项目的方式. 您可能已经了解 ...

  8. Pro ASP.NET Core MVC 第6版 第二章（后半章）

    增加动态输出 整个web应用平台的关注点在于构建并显示动态输出内容.在MVC里,控制器负责构建一些数据并将其传给视图.视图负责渲染成HTML. 从控制器向视图传递数据的一种方式是使用ViewBag 对 ...

  9. ASP.NET Core MVC 之视图（Views）

    ASP.NET Core MVC 控制器可以使用视图返回格式化的结果. 1.什么是视图 在 MVC 中,视图封装了用户与应用交互呈现细节.视图是具有生成要发送到客户端内容的,包含嵌入代码的HTML模板 ...

随机推荐

  1. 2013年最流行的php框架盘点

    2013年最流行的php框架盘点 PHP框架的发展背景 毫无疑问,Web框架技术在近几年已经得到了突飞猛进的发展和普及,在过去几年里,框架技术的普遍经历了比较大的完善过程,很大一部分可以归因于Ruby ...

  2. python发送邮件554DT:SPM已解决

    说明:本例使用163邮箱 一.报错信息 使用SMTP发送邮件遇到以下报错: 554, b'DT:SPM 163 smtp10,DsCowACXeOtmjRRdsY8aCw--.21947S2 1561 ...

  3. Web框架之Django重要组件（Django中间件、csrf跨站请求伪造）

    Web框架之Django_09 重要组件(Django中间件.csrf跨站请求伪造)   摘要 Django中间件 csrf跨站请求伪造 一.Django中间件: 什么是中间件? 官方的说法:中间件是 ...

  4. Spark学习之路（十五）—— Spark Streaming 整合 Flume

    一.简介 Apache Flume是一个分布式,高可用的数据收集系统,可以从不同的数据源收集数据,经过聚合后发送到分布式计算框架或者存储系统中.Spark Straming提供了以下两种方式用于Flu ...

  5. feign之间传递oauth2-token的问题和解决

    在微服务架构里,服务与服务之间的调用一般用feign就可以实现,它是一种可视化的rpc,并且集成了ribbon的负载均衡能力,所以很受欢迎. 授权服务 在授权服务里,用户通过用户名密码,或者手机和验证 ...

  6. node.js + mssql 简易封装操作

    时间吧,总是这么凑巧,在我学习[node.js]还没几天,我的 Microsoft SQL Server Management Studio 18 就歇菜了,至于怎么歇菜的吧....它可能的意思就是想 ...

  7. 【数据库】Navicat Premium12远程连接MySQL数据库

    目录 00. 目录 01. 环境介绍 02. Navicat安装 03. MySQL开启远程登录权限 04. Navicat连接MySQL 00. 目录 @ 参考博客:https://blog.csd ...

  8. 并发编程-concurrent指南-原子操作类-AtomicInteger

    在java并发编程中,会出现++,--等操作,但是这些不是原子性操作,这在线程安全上面就会出现相应的问题.因此java提供了相应类的原子性操作类. 1.AtomicInteger

  9. HDU 2121：Ice_cream’s world II（不定根的最小树形图）

    题目链接 题意 求有向图的最小生成树,且根不定. 思路 最小树形图即求有向图的最小生成树,用的是朱刘算法. 这里不定根,那么可以建立一个虚根,让虚根和所有点相连,权值为一个很大的数(这里直接设为所有边 ...

  10. CSDN,CNBLOGS博客文章一键转载插件（转载测试）

    插件地址: https://greasyfork.org/zh-CN/scripts/381053-csdn%E5%8D%9A%E5%AE%A2%E6%96%87%E7%AB%A0%E8%BD%AC% ...