ASP.NET Core 入门教程 6、ASP.NET Core MVC 视图布局入门
一、前言
1、本教程主要内容
- ASP.NET Core MVC (Razor)视图母版页教程
- ASP.NET Core MVC (Razor)带有Section的视图母版页教程
- ASP.NET Core MVC (Razor)视图全局代码(_ViewStart.cshtml)教程
2、本教程环境信息
软件/环境 | 说明 |
---|---|
操作系统 | Windows 10 |
SDK | 2.1.401 |
ASP.NET Core | 2.1.3 |
IDE | Visual Studio Code 1.28 |
浏览器 | Chrome 70 |
本篇代码以下代码进行调整:https://github.com/ken-io/asp...
3、准备工作
VS Code 本身不提供 ASP.NET Core MVC 视图引擎(Razor)的智能感知。
幸运的是,VS Code C#扩展 从 1.17.0 版本开始支持Razor视图引擎的智能感知。
所以,我们要将VS Code C#扩展升级到最新版本。
二、母版页视图模板
网页中往往有通用的布局,比如导航、底部等等,这些页面中共用的部分,就需要放在母版页里面。
这样每个页面只用关注本页面要完成的功能/内容即可。提高了开发效率,也降低了公共部分的维护成本。
Razor视图引擎原生提供了Layout
的概念,作为视图布局的基础,可以让我们在视图中引用另外一个视图作为该视图的母版。
1、创建布局页(Layout)作为母版页
在项目根目录Views
文件夹中创建子目录Shared
,并在Shared
目录中创建母版页 _Layout.cshtml
通常公共的Razor视图文件名都以_开头
<html><head><title>@ViewBag.Title - Ken.Tutorial</title></head><body><h1>Ken.Tutorial</h1>@RenderBody()</body>
</html>
@
ViewBag.Title 用于当前应用该模板的视图自定义标题
@
RenderBody(`表示渲染当前应用该母版的视图,并填充到当前位置。
2、创建视图作为子页面
创建视图并指定母版页(Layout)
在/Views/Home
中新建文件Index.cshtml
在页面中可以通过以下方式指定母版页
- 指定母版页名字
@{Layout = "_Layout";
}
- 指定母版页完整路径
@{Layout = " /Views/Shared/_Layout.cshtml";
}
以上两种方式任选其一即可
@{Layout = "_Layout";
}
<h3>@ViewBag.Title</h3>
@ViewBag.Message
修改Action
调整 HomeController.cs
中Action:Index()
,通过视图输出Message
public IActionResult Index()
{ViewBag.Title = "Home";ViewBag.Message = "Hello World ! -ken.io";return View();
}
3、访问测试
启动项目,访问 /
或者 /home/index
将会看到:
三、带片段的母版页视图模板
通过母版页,我们可以方便的共用一些页面内容或者功能。但是对于一些特殊的子页面可能需要重写母版页中一些内容,或者在母版页中插入自己想呈现的内容,而不是只能将子页面呈现在固定的位置。
Razor视图引擎提供了Section
的概念,我们可以在视图中定义Section
,然后再母版视图中通过RenderSection
方式加载视图定义的Section
。
1、Section的定义与加载
Section定义
Section定义在子页面才有效。
Section定义示例:
@section test{<p>Section Content</p>}
@
section:定义Section的关键字
test:SectionName,命名规则同C#变量名一样,字母或下划线开头后面可以跟字母、下划线、数字
Section加载
在母版页中可以通过@RenderSection()
方法加载子页面中定义的Section
RenderSection只有在母版页(Layout)中使用才有效
- 强制加载
@RenderSection("test")
- 子页面中有定义就加载
@RenderSection("test", false)
- 子页面中有定义就加载,没有就显示默认内容
@if(IsSectionDefined("test"))
{RenderSection("test");
}
else
{<p>Layout Content</p>
}
2、Section使用示例
创建Controller与Action
在Controllers
文件夹中创建LayoutController.cs
using System;
using Microsoft.AspNetCore.Mvc;namespace Ken.Tutorial.Web.Controllers
{public class LayoutController : Controller{public IActionResult SectionDemo(){return View();}}
}
创建带有Section视图
在Views
文件夹中创建Layout
文件夹并创建视图文件:SectionDemo.cshtml
@{Layout = "_Layout";ViewBag.Title = "SectionDemo";
}
<h3>@ViewBag.Title</h3>
<p>Section Demo by ken.io</p>@section footer{<p>Section Footer</p>
}
修改模板页
修改 _Layout.cshtml
增加Section加载
<html><head><title>@ViewBag.Title - Ken.Tutorial</title></head><body><div class="header"><h1>Ken.Tutorial</h1><hr/></div><div class="content">@RenderBody()</div><div class="footer"><hr/>@if(IsSectionDefined("footer")){RenderSection("footer");}else{<p>Layout Footer</p>}</div></body>
</html>
3、访问测试
启动项目,通过浏览器进行访问测试:/
,/layout/sectiondemo
访问 /
,将看到:
访问/layout/sectiondemo
将看到:
四、视图呈现之前的全局代码
Razor视图引擎,提供了在视图呈现之前执行代码的入口。
这个入口是一个约定的文件即:_ViewStart.cshtml
,我们可以通过该文件定义全局视图呈现前执行的代码,也是定义某个文件夹下的视图呈现前需要执行的代码。
完整路径示例:
- /Views/_ViewStart.cshtml
- /Views/Home/_ViewStart.cshtml
如果两个_ViewStart.cshtml
文件同时存在,那么/Views/_ViewStart.cshtml
的执行优先级高于/Views/Home/_ViewStart.cshtml
全局代码示例
在Views
文件夹下创建视图文件_ViewStart.cshtml
@{Layout = "_Layout";
}
这里我们通过全局代码,将所有视图的母版页都指定为_Layout
。
这样我们在视图子页面就不用逐一制定母版页了。
如果我们将Index.cshtml
中指定的Layout注释掉
@{//Layout = "_Layout";
}
然后启动项目,访问 /
,依然看到:
局部全局代码示例
在/Views/Home
文件夹下创建视图文件_ViewStart.cshtml
@{Layout = null;
}
这里我们局部全局代码,将在/Views/Home
文件夹下的所有视图的母版页都指定为null
,默认不引用任何母版页。
这时我们启动项目,访问 /
,将看到:
五、备注
1、附录
- 本文代码示例
https://github.com/ken-io/asp...
- 本文参考
https://docs.microsoft.com/zh...
本文首发于我的独立博客:https://ken.io/note/asp.net-c...
ASP.NET Core 入门教程 6、ASP.NET Core MVC 视图布局入门相关推荐
- ASP.NET Core 入门教程 6、ASP.NET Core MVC 视图布局入门 1
ASP.NET Core 入门教程 6.ASP.NET Core MVC 视图布局入门 原文:ASP.NET Core 入门教程 6.ASP.NET Core MVC 视图布局入门 一.前言 1.本教 ...
- Android基础入门教程——2.4.13 ViewFlipper(翻转视图)的基本使用
Android基础入门教程--2.4.13 ViewFlipper(翻转视图)的基本使用 标签(空格分隔): Android基础入门教程 本节引言: 本节给大家带了的是ViewFlipper,它是An ...
- Android基础入门教程——2.4.8 ListView Item多布局的实现
Android基础入门教程--2.4.8 ListView Item多布局的实现 标签(空格分隔): Android基础入门教程 本节引言: 本节是ListView这个小节的最后一节,给大家带来的是L ...
- 网络安全工程师入门教程(非常详细)从零基础入门到精通,看完这一篇就够了
前言 想要成为网络安全工程师,却苦于没有方向,不知道从何学起的话,下面这篇 网络安全入门 教程可以帮你实现自己的网络安全工程师梦想,如果想学,可以继续看下去,文章有点长,希望你可以耐心看到最后! 1. ...
- python零基础入门教程免费版_毫无基础的人如何入门 Python ?Python入门教程拿走不谢啦!...
随着人工智能的发展,Python近两年也是大火,越来越多的人加入到Python学习大军,对于毫无基础的人该如何入门Python呢?这里整理了一些个人经验和Python入门教程供大家参考. 如果你是零基 ...
- 网络安全入门教程(非常详细)从零基础入门到精通,看完这一篇就够了!
想要成为黑客/红客,却苦于没有方向,不知道从何学起,下面这篇网络安全入门教程可以帮你实现自己的黑客梦想,如果想学,可以继续看下去,文章有点长,希望你可以耐心看到最后 网络安全入门路线 Web安全相关概 ...
- 黑客入门教程(非常详细)从零基础入门到精通,看完这一篇就够了
这篇文章没有什么套路.就是一套自学理论和方向,具体的需要配合网络黑白去学习.毕竟是有网络才会有黑白! 有自学也有培训! 1.打死也不要相信什么分分钟钟教你成为大黑阔的,各种包教包会的教程,就算打不死也 ...
- Kali Linux入门教程(非常详细)从零基础入门到精通,看完这一篇就够了。
作为一名从事渗透测试的人员,不懂Kali Linux的话,就out了.它预装了数百种享誉盛名的渗透工具,使你可以更轻松地测试.破解以及进行与数字取证相关的任何其他工作. 今天给大家分享一套Kali L ...
- 黑客入门教程(非常详细)从零基础入门到精通
1.这是一条坚持的道路,三分钟的热情可以放弃往下看了. 2.多练多想,不要离开了教程什么都不会了.最好看完教程自己独立完成技术方面的开发. 3.有时多google,baidu,我们往往都遇不到好心的大 ...
最新文章
- SQL*Loader 笔记 (一) 热身练习
- TabHost选项卡的 功能和用法
- Ubuntu的中文是哪种字体?python的词云分析和 三国演义人物出场统计
- Java zset 应用_Java简单使用redis-zset实现排行榜
- 计算机专业 毕业论文 百度云,计算机专业毕业论文.pdf
- kmp学英语必须设置
- 轻松搞定RocketMQ入门 1
- CRM 客户端程序开发:设置实体表单界面字段的值
- python之celery使用详解一
- php旅游管理系统,基于Laravel框架开发的旅游网站管理系统PHP源码
- BT656视频传输标准
- JPA如何查询部分字段
- python爬取wifi密码完整代码_WIFIpass – Python获取本机保存的所有WIFI密码(附源代码)...
- web咸鱼自救攻略--typescript的类没有你想象中的那么难
- 如何安装CentOS7.5
- 【机智云专题】①:乐鑫esp8266巧用机智云自动代码生成功能,移植加入驱动单路继电器,实现智能定时插座。(附带demo)
- Activiti工作流会签设计
- Deployer php自动部署,Deployer 自动部署
- 机器学习模型设计准则:“无免费午餐”定理和“奥卡姆剃刀”原则
- 基于Yocto的qmake编译环境默认QMAKE_SPEC不是linux-oe-g++的问题