ASP.NET Core 入门教程 7、ASP.NET Core MVC 分部视图入门
一、前言
1、本教程主要内容
- ASP.NET Core MVC (Razor)分部视图简介
- ASP.NET Core MVC (Razor)分部视图基础教程
- ASP.NET Core MVC (Razor)强类型分部视图教程
2、本教程环境信息
软件/环境 | 说明 |
---|---|
操作系统 | Windows 10 |
SDK | 2.1.401 |
ASP.NET Core | 2.1.3 |
IDE | Visual Studio Code 1.30 |
浏览器 | Chrome 70 |
本篇代码以下代码进行调整:https://github.com/ken-io/asp.net-core-tutorial/tree/master/chapter-06
3、准备工作
VS Code 本身不提供 ASP.NET Core MVC 视图引擎(Razor)的智能感知。
幸运的是,VS Code C#扩展 从 1.17.0 版本开始支持Razor视图引擎的智能感知。
所以,我们要将VS Code C#扩展升级到最新版本。
另外,要特意说明的是,在VS Code 1.30版本,解决方案(Solution)视图的视图入口改到了侧边工具栏
image二、ASP.NET Core MVC (Razor)分部视图简介
1、Razor分部视图概述
在Razor视图引擎中,我们可以定义.cshtml文件作为“视图”来渲染需要呈现给用户的内容。对于所有页面共用的部分,我们可以定义母版页(Layout)让视图继承共用的部分。当有些公共的部分我们只在某些页面用到,不需要每个页面都用到。或者这个公共的内容需要作为模板使用多次,母版页就不适合承担这样的作用。这时候我们可以使用分部视图来实现。
2、Razor分部视图定义与引用
Razor分部视图定义
视图与分部视图在定义上并没有本质的不同,均是创建.cshtml文件作为视图使用,只是在渲染的时候作为分部视图来渲染/加载。
在之前提到过,通常公共的Razor视图文件名都以_开头并放在
/Views/Shared文件夹中,分部视图也不例外。
例如:
/Views/Shared/_PartialViewTest.cshtml
如果分部视图只在某个控制器返回的视图中引用,也可以创建在该控制器对应的视图目录。
例如:
/Views/Home/_PartialViewTest.cshtml
Razor分部视图引用
//同步引用 @Html.Partial("_PartialViewTest") //异步引用(官方推荐) @await Html.PartialAsync("_PartialViewTest")
微软官方更推荐使用异步加载的方式,因为同步加载可能会出现程序死锁的情况
如果没有使用异步方式,会收到编译器警告:warning MVC1000: Use of IHtmlHelper.Partial may result in application deadlocks. Consider using <partial> Tag Helper or IHtmlHelper.PartialAsync.
如果你非常在意性能,也可以使用
Html.RenderPartialAsync呈现分部视图。 这种方式会直接呈现分部视图的内容,而不会组装成
IHtmlContent对象放回。
@{ await Html.RenderPartialAsync("_PartialViewTest"); }
由于
Html.RenderPartialAsync并不会返回任何内容,所以需要在Razor语句块中调用
Razor分部视图查找顺序同视图相同:
- Views/[ControllerName]/[PartialViewName].cshtml
- Views/Shared/[PartialViewName].cshtml
当然,你也可以直接指定完整路径,例如:
@await Html.PartialAsync("/Views/Home/_PartialViewTest.cshtml")
三、 Razor分部视图基础使用
1、定义分部视图
在
/Views/Shared目录下创建视图 '_DateTimeInfo.cshtml'
当前时间:@DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss:fff") 当前星期:@DateTime.Now.DayOfWeek
2、创建视图并引用分部视图
在
/Views目录下创建目录
Partial,并在
/Views/Partial目录下创建文件
Demo.cshtml
@{ ViewBag.Title = "PartialView Demo"; } <h3>@ViewBag.Title</h3> <p>PartialView Demo by ken.io</p> @Html.Partial("_DateTimeInfo") <hr/> @await Html.PartialAsync("_DateTimeInfo")
3、创建控制器
在
/Controllers目录下创建
PartialController.cs并创建对应Action
using System; using Microsoft.AspNetCore.Mvc; namespace Ken.Tutorial.Web.Controllers { public class PartialController : Controller { public IActionResult Demo() { return View(); } } }
4、访问测试
启动项目,访问
/partial/demo,将会看到 image
四、带参数的Razor分部视图
1、视图对象准备
在项目根目录中创建模型目录
Models,并在下面创建对象
NoteViewModel.cs
using System; namespace Ken.Tutorial.Web.Models { public class NoteViewModel { public string Title { get; set; } public DateTime PublishTime { get; set; } public string Body { get; set; } } }
2、定义分部视图
在
/Views/Shared目录下创建视图 '_NoteInfo.cshtml'
@model Ken.Tutorial.Web.Models.NoteViewModel; <h3>@Model.Title</h3> <span>@Model.PublishTime.ToString("yyyy-MM-dd")</span> <p>@Model.Body</p>
实际上就是创建强类型分部视图:-D
3、创建视图并引用分部视图
在
/Views/Partial目录下创建文件
DemoWithParams.cshtml
@using Ken.Tutorial.Web.Models; @{ ViewBag.Title = "PartialView With Params Demo"; } <h3>@ViewBag.Title</h3> <p>PartialView With Params Demo by ken.io</p> @await Html.PartialAsync("_NoteInfo", new NoteViewModel() { Title = "这是一个分部视图测试笔记", PublishTime = DateTime.Now, Body = "这是笔记的内容" })
4、在控制器中编写对应Action
在控制器
PartialController.cs中增加以下 Action:
public IActionResult DemoWithParams() { return View(); }
5、访问测试
启动项目,访问
/partial/demowithparams,将会看到 image
如果是文章列表页,用起来会显得更方便。
五、备注
1、附录
- 本文代码示例
https://github.com/ken-io/asp.net-core-tutorial/tree/master/chapter-07
- 本文参考
https://docs.microsoft.com/zh-cn/aspnet/core/mvc/views/partial?view=aspnetcore-2.1
本文首发于我的独立博客:https://ken.io/note/asp.net-core-tutorial-mvc-view-partial
- ASP.NET Core 入门教程 6、ASP.NET Core MVC 视图布局入门
- ASP.NET Core 入门教程 5、ASP.NET Core MVC 视图传值入门
- 基于Asp.Net Core Mvc和EntityFramework Core 的实战入门教程系列-2
- ASP.NET Core 入门教程 2、使用ASP.NET Core MVC框架构建Web应用
- ASP.NET Core 入门教程 3、ASP.NET Core MVC路由入门
- 基于Asp.Net Core Mvc和EntityFramework Core 的实战入门教程系列-3
- ASP.NET Core 入门教程 4、ASP.NET Core MVC控制器入门
- 基于Asp.Net Core Mvc和EntityFramework Core 的实战入门教程系列-1
- 基于Asp.Net Core Mvc和EntityFramework Core 的实战入门教程系列-4
- 基于Asp.Net Core Mvc和EntityFramework Core 的实战入门教程系列-5
- 基于Asp.Net Core Mvc和EntityFramework Core 的实战入门教程系列-1
- 【ASP.NET Core快速入门】(五)命令行配置、Json文件配置、Bind读取配置到C#实例、在Core Mvc中使用Options
- ASP.NET Core 和 EF Core 系列教程——入门
- 菜鸟入门【ASP.NET Core】5:命令行配置、Json文件配置、Bind读取配置到C#实例、在Core Mvc中使用Options
- Asp.net mvc 3.0入门教程之三————视图View
- ASP.NET Core 入门教程 1、使用ASP.NET Core 构建第一个Web应用
- 增、查、改、删 -- EF Core 与 ASP.NET Core MVC 教程(2 of 10)
- ASP.NET Core 入门教程 8、ASP.NET Core + Entity Framework Core 数据访问入门
- Visual Studio ASP.NET Core MVC入门教程第一篇
- ASP.NET Core 入门教程 1、使用ASP.NET Core 构建第一个Web应用