原文：Layout

作者：Steve Smith

翻译：娄宇(Lyrics)

校对：孟帅洋(书缘)

视图(View)经常共享视觉元素和编程元素。在本篇文章中，你将学习如何在你的 ASP.NET 应用程序中使用通用布局视图、共享指令以及在渲染视图前运行通用代码。

章节：

什么是布局视图
指定布局
导入共享指令
在视图之前运行代码

什么是布局视图

大部分 Web 应用程序在用户切换页面时，使用通用布局提供了一致的用户体验。通用布局通常包含页眉、导航栏（或菜单）以及页脚等通用 UI 元素。

在一个应用程序中，诸如脚本(scripts)和样式表(stylesheets)这样的通用 HTML 结构也频繁的被许多页面使用。所有的这些共享元素可以在 layout 文件中定义，这样应用程序中的任何视图都可以使用它们。布局视图减少了视图中的重复代码，帮助我们遵循 Don't Repeat Yourself (DRY) 原则。

按照惯例，ASP.NET 应用程序的默认布局文件命名为 _Layout.cshtml。Visual Studio ASP.NET Core MVC 项目模板包含这个布局文件，位置在 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"] - WebApplication1</title>

    <environment names="Development">

        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />

        <link rel="stylesheet" href="~/css/site.css" />

    </environment>

    <environment names="Staging,Production">

        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/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>

    <div 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">WebApplication1</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>

                @await Html.PartialAsync("_LoginPartial")

            </div>

        </div>

    </div>

    <div class="container body-content">

        @RenderBody()

        <hr />

        <footer>

            <p>&copy; 2016 - WebApplication1</p>

        </footer>

    </div>

    <environment names="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 names="Staging,Production">

        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"

                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"

                asp-fallback-test="window.jQuery">

        </script>

        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/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">

        </script>

        <script src="~/js/site.min.js" asp-append-version="true"></script>

    </environment>

    @RenderSection("scripts", required: false)

</body>

</html>

指定布局

Razor 视图拥有一个 Layout 属性。各个视图可以通过设置这个属性来指定布局：

@{

    Layout = "_Layout";

}

指定布局时可以用完整路径（例如： /Views/Shared/_Layout.cshtml ）或者部分名称（例如： _Layout ）。当使用部分名称时，Razor 视图引擎将使用它的标准发现流程搜索布局文件。首先 Controller 相关的文件夹，其次是 Shared 文件夹。这个发现流程和部分视图的是完全相同的。

默认情况下，每个布局视图必须调用 RenderBody 方法。在哪里调用 RenderBody ，视图内容就会在那里被渲染。

Sections

布局视图可以通过调用 RenderSection 方法来引用一个或多个 sections （布局视图不是必须引用 Section）。Section 提供了组织某些页面元素放置的方法。每一个 RenderSection 调用都可以指定 Secton 是必须还是可选的。如果找不到一个必须的 Section，会抛出异常。个别视图使用 @section 指定被渲染的内容。如果一个视图定义了一个 Section，它必须被渲染（否则将会发生错误）。（译者注：这里的必须被渲染指必须通过 RenderSection 方法调用。）

一个在视图中定义 @section 的例子：

@section Scripts {

  <script type="text/javascript" src="/scripts/main.js"></script>

}

在上面的代码中，将验证脚本添加到一个包含 Form 表单的视图中的 scripts Section 中。其它在同一个应用程序的视图也许不需要任何额外的脚本，所以不需要定义 scripts Section。

定义在视图中的 Section 只在其相关的布局页中可用。它们不能在局部视图、视图组件或视图系统的其他部分中引用。（译者注：Section 可以在任何视图系统中定义，但只能在布局视图中调用 RenderSection 进行渲染。）

忽略 Section

默认情况下，内容页中 Body 和所有 Section 都必须在布局页中渲染。Razor 视图引擎通过跟踪 Body 和每个 Section 是否被渲染来强制执行。

如果需要指示视图引擎忽略 Body 和 Section，调用 IgnoreBody 和 IgnoreSection 方法。

在 Razor 页面的 Body 和每个 Section 必须被渲染或忽略。

导入共享指令

视图可以使用 Razor 指令做许多事，比如导入命名空间或者进行依赖注入。由多个视图共享的指令可以在公共的 _ViewImports.cshtml 文件中指定。 _ViewImports 文件支持以下指令：

@addTagHelper
@removeTagHelper
@tagHelperPrefix
@using
@model
@inherits
@inject

这个文件不支持其他 Razor 特性，比如 functions 和 section 的定义等等。

一个 _ViewImports.cshtml 文件的例子：

@using WebApplication1

@using WebApplication1.Models

@using WebApplication1.Models.AccountViewModels

@using WebApplication1.Models.ManageViewModels

@using Microsoft.AspNetCore.Identity

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

在ASP.NET Core MVC 应用程序中， _ViewImports.cshtml 通常被放置在 Views 文件夹下。_ViewImports.cshtml 文件也可以放在任何文件夹下面，在这种情况下，它将只作用于该文件夹和其子文件夹下的视图。在执行顺序上，首先执行在根目录下的 _ViewImports 文件，然后执行视图所在文件夹下的 _ViewImports文件，所以在根目录中 _ViewImports 文件里指定的设定可能会被覆盖掉。

举个例子，如果根目录中 _ViewImports.cshtml 文件指定了 @model 和 @addTagHelper，另外一个 Controller 相关文件夹下的 _ViewImports.cshtml 文件指定一个不同的 @model 并添加另外一个 @addTagHelper ，视图将可访问两种 TagHelper 并使用后者指定的 @model 。

如果一个视图中有多个 _ViewImports.cshtml 文件被运行，多个 ViewImports.cshtml 文件中指令的组合行为如下：

@addTagHelper, @removeTagHelper：按照顺序全部运行
@tagHelperPrefix：离视图最近的一个覆盖其他的
@model：离视图最近的一个覆盖其他的
@inherits：离视图最近的一个覆盖其他的
@using：全部包含; 重复的忽略
@inject：对每一个属性而言（通过属性名区分），离视图最近的一个覆盖其他的

在视图之前运行代码

如果你有代码需要在每个视图之前运行，这些代码应该放在 _ViewStart.cshtml 文件中。按照约定， _ViewStart.cshtml 文件位于 Views 文件夹。 _ViewStart.cshtml 中列出的语句会在所有完整的视图（不包含布局视图和部分视图）之前运行。就像 ViewImports.cshtml ，_ViewStart.cshtml 也有优先级。如果一个 _ViewStart.cshtml 文件定义在 Controller 相关的视图文件夹内，它将比 Views 文件夹根目录下的 _ViewStart.cshtml 文件更晚运行（如果根目录下有这个文件的话）。

一个 _ViewStart.cshtml 文件例子：

@{

    Layout = "_Layout";

}

上面的文件指定了所有的视图将使用 _Layout.cshtml 布局视图。

注意

通常无论 _ViewStart.cshtml 还是 _ViewImports.cshtml 都不能放在 /Views/Shared 文件夹下。应用程序级别的这些文件，应该直接放在 /Views 文件夹下。

返回目录

ASP.NET Core 中文文档第四章 MVC（3.3）布局视图的更多相关文章

ASP.NET Core 中文文档第四章 MVC（4.2）控制器操作的路由
原文:Routing to Controller Actions 作者:Ryan Nowak.Rick Anderson 翻译:娄宇(Lyrics) 校对:何镇汐.姚阿勇(Dr.Yao) ASP.NE ...
ASP.NET Core 中文文档第四章 MVC（3.6.1 ）Tag Helpers 介绍
原文:Introduction to Tag Helpers 作者:Rick Anderson 翻译:刘浩杨校对:高嵩(Jack) 什么是 Tag Helpers? Tag Helpers 提供了什 ...
ASP.NET Core 中文文档第四章 MVC（3.8）视图中的依赖注入
原文:Dependency injection into views 作者:Steve Smith 翻译:姚阿勇(Dr.Yao) 校对:孟帅洋(书缘) ASP.NET Core 支持在视图中使用依赖 ...
ASP.NET Core 中文文档第四章 MVC（4.6）Areas（区域）
原文:Areas 作者:Dhananjay Kumar 和 Rick Anderson 翻译:耿晓亮(Blue) 校对:许登洋(Seay) Areas 是 ASP.NET MVC 用来将相关功能组织成 ...
ASP.NET Core 中文文档第四章 MVC（4.5）测试控制器逻辑
原文: Testing Controller Logic 作者: Steve Smith 翻译: 姚阿勇(Dr.Yao) 校对: 高嵩(Jack) ASP.NET MVC 应用程序的控制器应当小巧并专 ...
ASP.NET Core 中文文档第四章 MVC（4.4）依赖注入和控制器
原文: Dependency Injection and Controllers 作者: Steve Smith 翻译: 刘浩杨校对: 孟帅洋(书缘) ASP.NET Core MVC 控制器应通过 ...
ASP.NET Core 中文文档第四章 MVC（4.1）Controllers, Actions 和 Action Results
原文:Controllers, Actions, and Action Results 作者:Steve Smith 翻译:姚阿勇(Dr.Yao) 校对:许登洋(Seay) Action 和 acti ...
ASP.NET Core 中文文档第四章 MVC（3.9）视图组件
作者: Rick Anderson 翻译: 娄宇(Lyrics) 校对: 高嵩章节: 介绍视图组件创建视图组件调用视图组件演练:创建一个简单的视图组件附加的资源查看或下载示例代码介绍视图 ...
ASP.NET Core 中文文档第四章 MVC（3.7 ）局部视图（partial）
原文:Partial Views 作者:Steve Smith 翻译:张海龙(jiechen).刘怡(AlexLEWIS) 校对:许登洋(Seay).何镇汐.魏美娟(初见) ASP.NET Core ...
ASP.NET Core 中文文档第四章 MVC（01）ASP.NET Core MVC 概览
原文:Overview of ASP.NET Core MVC 作者:Steve Smith 翻译:张海龙(jiechen) 校对:高嵩 ASP.NET Core MVC 是使用模型-视图-控制器(M ...

随机推荐

MSDN文档篇
很多人网上下载3~10G不等的MSDN文档,发现,下载完成了不会用很多人每次都得在线下载文档,手上万千PC,都重新下载不是得疯了? so==> 先看几张图推荐一个工具:https://vsh ...
[版本控制之道] Git 常用的命令总结（欢迎收藏备用）
坚持每天学习,坚持每天复习,技术永远学不完,自己永远要前进总结日常开发生产中常用的Git版本控制命令 ------------------------------main-------------- ...
Android业务组件化之现状分析与探讨
前言: 从个人经历来说的话,从事APP开发这么多年来,所接触的APP的体积变得越来越大,业务的也变得越来越复杂,总来来说只有一句话:这是一个APP臃肿的时代!所以为了告别APP臃肿的时代,让我们进入一 ...
jQuery学习之路（8）- 表单验证插件-Validation
▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...
NET Core-学习笔记（四）
经过前面分享的三篇netcore心得再加上本篇分享的知识,netcore大部分常用知识应该差不多了,接下来将不会按照章节整合一起分享,因为涉及到的东西整合到一起篇幅太大了,所以后面分享将会按照某一个知 ...
4.Android 打包时出现的Android Export aborted because fatal error were founds [closed]
Android 程序开发完成后,如果要发布到互联网上供别人使用,就需要将自己的程序打包成Android 安装包文件(Android Package,APK),其扩展名为.apk.使用run as 也能 ...
[原] KVM虚拟机网络闪断分析
背景公司云平台的机器时常会发生网络闪断,通常在10s-100s之间. 异常情况 VM出现问题时,表现出来的情况是外部监控系统无法访问,猜测可能是由于系统假死,OVS链路问题等等.但是在出现网络问题的 ...
spider RPC入门指南
本部分将介绍使用spider RPC开发分布式应用的客户端和服务端. spider RPC中间件基于J2SE 8开发,因此需要确保服务器上安装了JDK 8及以上版本,不依赖于任何额外需要独立安装和配置 ...
负载均衡——nginx理论
nginx是什么? nginx是一个强大的web服务器软件,用于处理高并发的http请求和作为反向代理服务器做负载均衡.具有高性能.轻量级.内存消耗少,强大的负载均衡能力等优势. nginx架构? ...
IIS启动失败，启动Windows Process Activation Service时，出现错误13：数据无效 ;HTTP 错误 401.2 - Unauthorized 由于身份验证头无效，您无权查看此页
因为修改过管理员账号的密码后重启服务器导致IIS无法启动,出现已下异常 1.解决:"启动Windows Process Activation Service时,出现错误13:数据无效&quo ...

ASP.NET Core 中文文档 第四章 MVC（3.3）布局视图