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. java关键字-final

    final特点: 1:这个关键字是一个修饰符,可以修饰类,方法,变量. 2:被final修饰的类是一个最终类,不可以被继承. 3:被final修饰的方法是一个最终方法,不可以被覆盖. 4:被final ...

  2. Redis 学习笔记（篇一）：字符串和链表

    本次学习除了基本内容之外主要思考三个问题:why(为什么).what(原理是什么).which(同类中还有哪些类似的东西,相比有什么区别). 由于我对 java 比较熟悉,并且 java 中也有字符串 ...

  3. 第二章 在Linux上部署.net core

    项目目标部署环境:CentOS 7+ 项目技术点:.netcore2.0 + Autofac +webAPI + NHibernate5.1 + mysql5.6 + nginx 开源地址:https ...

  4. python trojan development 2nd —— use python to send mail and listen to the key board then combine them

    请勿用于非法用途!!!!!本人概不负责!!!原创作品,转载说明出处!!!!! from pynput.keyboard import Key,Listener import logging impor ...

  5. 【记录】Field required a single bean, but 2 were found:

    重构遇到个小问题,记录下: 错误信息: *************************** APPLICATION FAILED TO START ************************ ...

  6. python算法与数据结构-数据结构中常用树的介绍(45)

    一.树的定义 树是一种非线性的数据结构,是由n(n >=0)个结点组成的有限集合.如果n==0,树为空树.如果n>0,树有一个特定的结点,根结点根结点只有直接后继,没有直接前驱.除根结点以 ...

  7. J2SE的基本简介与J2EE/J2ME的差异

    J2SE简介与J2EE.J2ME的比较 Java2平台包括:标准版(J2SE).企业版(J2EE)和微缩版(J2ME)三个版本. J2SE,J2ME和J2EE,这也就是SunONE(Open NetE ...

  8. HTML和CSS 基本要点必看

    今天的课程名称叫HTML和CSS HTML:它是标记语言,全称为超文本标记语言,它不是编译语言.(说白了就是标签) CSS:它是给标签添加样式的,全称为层叠样式表. 想了解这些必须得知道两个东西 一是 ...

  9. LNet代码分析

    源码版本:lustre-release 2.15.55 介绍 LNet是Lustre的网络模块,代码目录分为了lnet和lnd lnet提供了统一的接口 lnd封装了底层驱动,有socklnd(TCP ...

  10. Linux命令学习-tail命令

    Linux中,tail命令的全称就是tail,主要用于监控日志文件. 对于一个正在运行应用来说,其对应的log日志文件肯定是在不断的更新,此时,便可通过tail命令来动态显示日志文件的内容.假设当前目 ...