ASP.NET Core Razor 布局视图 - ASP.NET Core 基础教程 - 简单教程，简单编程
原文:ASP.NET Core Razor 布局视图 - ASP.NET Core 基础教程 - 简单教程，简单编程
ASP.NET Core Razor 布局视图
上一章节中我们学习了如何使用 EF 框架从数据库中读取并显示数据，我们使用了两个模板文件 Index.cshtml 和 Detail.cshtml 。相信大家在创建填充 Detail.cshtml 内容的时候会想，为什么 <!DOCTYPE html> 这样重复的内容我们要输入一次又一次，有没有办法只输入一次呢？
答案是肯定的，有的。
Razor 视图引擎提供了 Layout 布局的功能，可以把视图中公共的部分抽出来单独为一个文件，这样就省去了不少的麻烦
本章节，我们就来学习下 Razor 布局视图。大多数网站和 Web 应用程序都会创建具有一些通用元素的页面
- 通常每个页面顶部都有一个区域用于显示公共的 logo 和导航菜单
- 页面的左边侧栏都会添加一些其它的链接和信息，且页面底部都会显示版权信息和一些公司信息
几乎应用程序的每个页面都可能包含这些公共元素。在 ASP.NET Core 中，我们可以使用布局视图来避免一次又一次的重复编写它们
布局视图 ( Layout View )
首先，我们来了解下 ASP.NET Core 中的布局视图到底是什么：
布局视图是带有
.cshtml扩展名的 Razor 视图可以随意给布局视图命名，一般情况下，默认的约定的布局视图名字是
_Layout.cshtml这是布局视图的通用名称，可以不需要前导下划线。因为这只是许多开发者遵循的一个约定
用来区分布局视图与普通视图
布局视图是一种特殊的视图，一旦我们有了布局视图，我们就可以设置我们的控制器视图，如
Home的Index视图
我们可以将控制器视图设置为在布局视图内的特定位置显示
这种视图布局方法意味着
Index.cshtml不需要知道有关 logo 或顶级导航的任何信息Index.cshtml视图只需要显示控制器操提供模型的特定内容，其它内容则由 布局视图来负责处理
范例
我们举一个简单的例子，给我们的 HelloWorld 项目添加一个布局视图
如果我们有多个视图，那么会看到所有的视图都会包含一些重复的标记。比如都有一个 <html> 标签，<head> 标签和 <body> 标签
虽然我们的 HelloWorld 项目中没有导航菜单，但其它应用程序则可能存在，我们并不希望在每个视图中都复制这些相同的标签
现在，我们来创建 Layout 视图
我们会在 Views 目录下新建一个目录 Shared，然后添加一个布局视图 _Layout.cshtml
从前面的几章节中我们了解到，如果 MVC 框架在控制器目录找不到视图，它们就会尝试在 Shared 目录中查找，也就是说 Shared 目录里的视图可以被多个控制器使用
在
Views目录下新建一个目录Shared
右键点击
Shared目录，选择 添加 -> 新建文件 打开新建文件对话框如果你的电脑是
Windows系统，则是选择 添加 -> 新建项
选中左边的 ASP.NET Core，然后从中间选中 MVC 视图布局页面
如果你的电脑是
Windows系统，则是先选中 ASP.NET Core -> Web -> ASP.NET ，然后从中间选择 Razor 布局
在名称中输入
_Layout或_Layout.cshtml( Windows )，然后点击右下角的 新建 或 添加 ( Windows )
创建完成后的目录结果如下
_Layout.cshtml 中默认的内容如下
<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> </head> <body> <div> @RenderBody() </div> </body> </html>
因为布局视图也是一个 Razor 视图，所以也可以使用 C# 表达式
在上面的代码中，可以看到像 RenderBody 和 ViewBag.Title 这样的 C# 表达式。 当一个 MVC 控制器方法渲染一个普通的视图时，如果普通的视图有加载一个布局视图。 那么普通视图和它生成的 HTML 片段就会被包含进布局视图中
而被包含的位置，就是 @RenderBody 表达式的地方，也就是说 @RenderBody 表达式用于包含普通视图生成的内容
布局视图中的其它表达式，例如 @ViewBag.Title，ViewBag 是一种数据结构，可以添加任何想要放入 ViewBag 的属性或数据。 例如可以在 ViewBag 上添加 ViewBag.Title，ViewBag.CurrentDate 或我们想要的任何属性
我们修改下 _Layout.cshtml 文件，添加一个当前的时间
<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> </head> <body> <div>@DateTime.Now</div> <div> @RenderBody() </div> </body> </html>
接下来我们回到 Home/Index.html 普通控制器视图，它的原本内容如下
@model HelloWorld.Controllers.HomePageViewModel
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8" /> <title>Home 控制器下的 Index 方法</title> </head> <body> <h1>欢迎!</h1> <div>这个消息来自 Home 控制器下的 Index 的视图文件 index.cshtml </div> <table> @foreach (var employee in Model.Employees) { <tr> <td><a href="/Home/Detail/@employee.ID">@employee.ID</a></td> <td>@employee.Name</td> </tr> } </table> </body> </html> 有了布局视图，我们就可以删除所有我们不在需要的 HTML 标签，比如 <!DOCTHPE html> 、<html> 和 <head>，还有 <body> 以及它们对应的结束标记
删除后的代码如下
<h1>欢迎!</h1> <div>这个消息来自 Home 控制器下的 Index 的视图文件 index.cshtml </div> <table> @foreach (var employee in Model.Employees) { <tr> <td><a href="/Home/Detail/@employee.ID">@employee.ID</a></td> <td>@employee.Name</td> </tr> } </table> 当然了，我们还要引入布局视图和给 ViewBag 赋值一个 title 属性，这可以使用 @{} C# 语句块来完成
@model HelloWorld.Controllers.HomePageViewModel
@{ViewBag.Title = "Home 控制器下的 Index 方法";Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>欢迎!</h1> <div>这个消息来自 Home 控制器下的 Index 的视图文件 index.cshtml </div> <table> @foreach (var employee in Model.Employees) { <tr> <td><a href="/Home/Detail/@employee.ID">@employee.ID</a></td> <td>@employee.Name</td> </tr> } </table> 保存所有的代码，然后刷新浏览器，显示如下
每刷新一次时间就会变一次，是不是很有成就感？
转载于:https://www.cnblogs.com/lonelyxmas/p/9724307.html
ASP.NET Core Razor 布局视图 - ASP.NET Core 基础教程 - 简单教程，简单编程相关推荐
- ASP.NET Core Razor 标签助手 - ASP.NET Core 基础教程 - 简单教程，简单编程
原文:ASP.NET Core Razor 标签助手 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core Razor 标签助手 上一章节我们介绍了视图导入,学习了 ...
- netcore 编译 html dll,ASP.NET Core Razor 视图预编译、动态编译
0x01 前言 ASP.NET Core在默认发布情况下,会启动预编译将试图编译成xx.Views.dll,也许在视图中打算修改一处很细小的地方我们需要再重新编译视图进行发布.下面我将从 ASP.NE ...
- ASP.Net Core Razor 部署AdminLTE框架
1.AdminLTE 一个基于 bootstrap 的轻量级后台模板 2.AdminLTE 文档 在线中文Demo:http://adminlte.la998.com/ 在线中文文档:http://a ...
- ASP.NET Core Razor 页面使用教程
ASP.NET Core Razor 页面作为 ASP.NET Core 2.0的一部分发布,它是基于页面的全新的Web开发框架.如果您想学习如何使用 ASP.NET Core Razor 页面,可以 ...
- ASP.NET Core Razor 视图组件
视图组件简介 在新的ASP.NET Core MVC中,视图组件类似于局部视图,但它们更强大.视图组件不使用模型绑定,仅依赖于您在调用时提供的数据. 视图组件特性: 呈现页面响应的某一部分而不是整个响 ...
- 使用EntityFramework Core和Enums作为字符串的ASP.NET Core Razor页面——第一部分
目录 介绍 背景 开发环境 使用代码 开始构建UI和数据访问 EF迁移和数据库创建 摘要 创建初始对象模型和数据库并显示第一个Razor页面 下载源码(QuantumWeb) 介绍 这是一篇由多部分组 ...
- 学习ASP.NET Core Razor 编程系列三——创建数据表及创建项目基本页面
原文:学习ASP.NET Core Razor 编程系列三--创建数据表及创建项目基本页面 学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 ...
- 学习ASP.NET Core Razor 编程系列四——Asp.Net Core Razor列表模板页面
学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二--添加一个实体 学习ASP.NET ...
- [九] ASP.NET CoreMVC 中的布局视图
布局视图 1.布局视图 2.ASP.NET Core MVC 中布局页面中 Sections 3.什么是_ViewStart.cshtml 文件 4._ViewImports.cshtml 文件 1. ...
最新文章
- MyClass a,b[2]，*p[2]调用了几次构造函数
- Citrix虚拟化技术之一XenServer6.2安装
- php九宫格代码,用php数字九宫格.
- 获取上传图片路径方法(新旧方法)
- P2572 [SCOI2010]序列操作
- C和指针 第四章 习题
- 为什么中文分词比英文分词更难？有哪些常用算法？（附代码）
- 完整的SQL Server邮件服务
- Java Swing Mysql实现的员工工资管理系统项目源码附带视频指导运行教程
- 微信python天天学_教你使用python实现微信每天给女朋友说晚安
- Rhel6-piranha配置文档
- 进化算法之粒子群算法介绍附代码——PSO
- Eclipse使用Ant编译时报错Perhaps JAVA_HOME does not point to the JDK
- 不一样的“人工智能语言”Prolog
- At least one JAR was scanned for TLDs yet contained no TLDs. Enable debug logging for this logger fo
- 小女子菜鸟一枚，因本科毕业设计第一次接触安卓开发……图片上传问题求教
- 华中科技大学计算机叶磊,叶磊-华中科技大学公共卫生学院
- win10系统c盘C:Users后面的用户名怎么更改
- 使用这5款模拟器访问备选操作系统
- Re:if java for