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. 完美解决iis下JWplayer提示Error loading media: File could not be played错误

    最近开发项目需要使用JWplayer插件播放视频,但是无论换那个版本.换什么样的视频总是提示Error loading media: File could not be played错误,废了好大的劲 ...

  2. python中的内置函数(2)

    一.lambda匿名函数定义:为了解决一些简单的需求而设计的一句话函数例子:计算n的n次方 def func(n):#正常的写法 return n**2 f=lambda n:n**2 这里的lamb ...

  3. MyBatis中二级缓存和延时加载同时开启的问题

    首先,二级缓存默认不开启! 要配置 <setting name="cacheEnabled" value="true"/> 在MyBatis中:一级 ...

  4. 深入理解计算机系统 BombLab 实验报告

    又快有一个月没写博客了,最近在看<深入理解计算机系统>这本书,目前看完了第三章,看完这章,对程序的机器级表示算是有了一个入门,也对 C 语言里函数栈帧有了一个初步的理解. 为了加深对书本内 ...

  5. MQ消息队列搭建命令及方法

    MQ 是一款稳定.安全又可靠的消息传递中间件.它使用消息和队列来支持应用程序.系统.服务和文件之间的信息交换.它可以简化和加速多个平台中不同应用程序和业务数据的集成.支持各种 API 和语言,并可以在 ...

  6. 重磅发布：阿里开源 OpenJDK 长期支持版本 Alibaba Dragonwell

    原文地址:https://yq.aliyun.com/articles/694603 本文作者:阿里开源  本文来自云栖社区合作伙伴"阿里系统软件技术",了解相关信息可以关注&qu ...

  7. 【多处摘抄】Tomcat监视与调优

    文章摘抄大量内容,已附上摘抄地址,未找到最初博文作者,在此对原作者表述感谢:    最近调整了公司的Web容器,然后把项目转移到了idea,并且重新分了包,我以前很多重复的东西整合了一下,但是最近线下 ...

  8. docker 获取镜像

    之前提到过,Docker Hub 上有大量的高质量的镜像可以用,这里我们就说一下怎么获取这些镜像. 从 Docker 镜像仓库获取镜像的命令是 docker pull.其命令格式为: docker p ...

  9. shell写的俄罗斯方块

    共享一下. #!/bin/bash # Tetris Game # xhchen<[email]xhchen@winbond.com.tw[/email]> #APP declaratio ...

  10. 《收获，不止SQL优化》读书笔记

    整体性能分析 AWR.ASH.ADDM.AWRDD 整体分析调优工具 AWR:关注数据库的整体性能的报告: ASH:数据库中的等待事件与哪些SQL具体对应的报告: ADDM:oracle给出的一些建议 ...