原文: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,调用 IgnoreBodyIgnoreSection 方法。

在 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)布局视图的更多相关文章

  1. ASP.NET Core 中文文档 第四章 MVC(4.2)控制器操作的路由

    原文:Routing to Controller Actions 作者:Ryan Nowak.Rick Anderson 翻译:娄宇(Lyrics) 校对:何镇汐.姚阿勇(Dr.Yao) ASP.NE ...

  2. ASP.NET Core 中文文档 第四章 MVC(3.6.1 )Tag Helpers 介绍

    原文:Introduction to Tag Helpers 作者:Rick Anderson 翻译:刘浩杨 校对:高嵩(Jack) 什么是 Tag Helpers? Tag Helpers 提供了什 ...

  3. ASP.NET Core 中文文档 第四章 MVC(3.8)视图中的依赖注入

    原文:Dependency injection into views 作者:Steve Smith 翻译:姚阿勇(Dr.Yao) 校对:孟帅洋(书缘) ASP.NET Core 支持在视图中使用 依赖 ...

  4. ASP.NET Core 中文文档 第四章 MVC(4.6)Areas(区域)

    原文:Areas 作者:Dhananjay Kumar 和 Rick Anderson 翻译:耿晓亮(Blue) 校对:许登洋(Seay) Areas 是 ASP.NET MVC 用来将相关功能组织成 ...

  5. ASP.NET Core 中文文档 第四章 MVC(4.5)测试控制器逻辑

    原文: Testing Controller Logic 作者: Steve Smith 翻译: 姚阿勇(Dr.Yao) 校对: 高嵩(Jack) ASP.NET MVC 应用程序的控制器应当小巧并专 ...

  6. ASP.NET Core 中文文档 第四章 MVC(4.4)依赖注入和控制器

    原文: Dependency Injection and Controllers 作者: Steve Smith 翻译: 刘浩杨 校对: 孟帅洋(书缘) ASP.NET Core MVC 控制器应通过 ...

  7. ASP.NET Core 中文文档 第四章 MVC(4.1)Controllers, Actions 和 Action Results

    原文:Controllers, Actions, and Action Results 作者:Steve Smith 翻译:姚阿勇(Dr.Yao) 校对:许登洋(Seay) Action 和 acti ...

  8. ASP.NET Core 中文文档 第四章 MVC(3.9)视图组件

    作者: Rick Anderson 翻译: 娄宇(Lyrics) 校对: 高嵩 章节: 介绍视图组件 创建视图组件 调用视图组件 演练:创建一个简单的视图组件 附加的资源 查看或下载示例代码 介绍视图 ...

  9. ASP.NET Core 中文文档 第四章 MVC(3.7 )局部视图(partial)

    原文:Partial Views 作者:Steve Smith 翻译:张海龙(jiechen).刘怡(AlexLEWIS) 校对:许登洋(Seay).何镇汐.魏美娟(初见) ASP.NET Core ...

  10. ASP.NET Core 中文文档 第四章 MVC(01)ASP.NET Core MVC 概览

    原文:Overview of ASP.NET Core MVC 作者:Steve Smith 翻译:张海龙(jiechen) 校对:高嵩 ASP.NET Core MVC 是使用模型-视图-控制器(M ...

随机推荐

  1. JavaScript 开发规范

    本篇主要介绍JS的命名规范.注释规范以及框架开发的一些问题. 目录 1. 命名规范:介绍变量.函数.常量.构造函数.类的成员等等的命名规范 2. 注释规范:介绍单行注释.多行注释以及函数注释 3. 框 ...

  2. Android权限管理之Permission权限机制及使用

    前言: 最近突然喜欢上一句诗:"宠辱不惊,看庭前花开花落:去留无意,望天空云卷云舒." 哈哈~,这个和今天的主题无关,最近只要不学习总觉得生活中少了点什么,所以想着围绕着最近面试过 ...

  3. 【基于WinForm+Access局域网共享数据库的项目总结】之篇一:WinForm开发总体概述与技术实现

    篇一:WinForm开发总体概述与技术实现 篇二:WinForm开发扇形图统计和Excel数据导出 篇三:Access远程连接数据库和窗体打包部署 [小记]:最近基于WinForm+Access数据库 ...

  4. [开发笔记]yum错误

    yum 错误TypeError: rpmdb open failed 解决办法 是因为RPM数据库出现损坏导致的,它导致所有的软件的升级.安装甚至是删除都会出现问题,终端出现乱码,YUMEX也用不成, ...

  5. 神技!微信小程序(应用号)抢先入门教程(附最新案例DEMO-豆瓣电影)持续更新

    微信小程序 Demo(豆瓣电影) 由于时间的关系,没有办法写一个完整的说明,后续配合一些视频资料,请持续关注 官方文档:https://mp.weixin.qq.com/debug/wxadoc/de ...

  6. ASP.Net MVC——使用 ITextSharp 完美解决HTML转PDF(中文也可以)

    前言: 最近在做老师交代的一个在线写实验报告的小项目中,有这么个需求:把学生提交的实验报告(HTML形式)直接转成PDF,方便下载和打印. 以前都是直接用rdlc报表实现的,可这次牵扯到图片,并且更为 ...

  7. SQLServer 各版本区别

    SQLServer 2012 新特性 通过AlwaysOn实现各种高可用级别 通过列存储索引技术实现超快速的查询,其中星型链接查询及相似查询的性能提升幅度可高达100倍,同时支持超快速的全文查询 通过 ...

  8. linux之查看系统命令

    cpu信息 1.查看逻辑cpu核数 # cat /proc/cpuinfo| grep "processor"| wc -l 2.查看物理cpu个数 # cat /proc/cpu ...

  9. 在Linux(Luna)下向Launch启动器中添加图标

    记录下在Luna下向Launch中添加图标的步骤,以供以后参考,这里我以加入eclipse图标为例: 首先,我们来创建一个desktop文件(Luna中到启动器Launch可以看作是Ubuntu中到桌 ...

  10. 2000条你应知的WPF小姿势 基础篇<74-77 WPF 多窗口Tips>

    在正文开始之前需要介绍一个人:Sean Sexton. 来自明尼苏达双城的软件工程师.最为出色的是他维护了两个博客:2,000ThingsYou Should Know About C# 和 2,00 ...