一、前言

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 入门教程 7、ASP.NET Core MVC 分部视图入门的更多相关文章

  1. ASP.NET Core 入门笔记8,ASP.NET Core MVC 分部视图入门

    一.前言 1.本教程主要内容 ASP.NET Core MVC (Razor)分部视图简介 ASP.NET Core MVC (Razor)分部视图基础教程 ASP.NET Core MVC (Raz ...

  2. ASP.NET Core 基础教程总结 - ASP.NET Core 基础教程 - 简单教程,简单编程

    原文:ASP.NET Core 基础教程总结 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 基础教程总结 ASP.NET Core 基础教程总算是有了个简单 ...

  3. ASP.NET Core 基础教程-约定 - ASP.NET Core 基础教程 - 简单教程,简单编程

    原文:ASP.NET Core 基础教程-约定 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 基础教程-约定 因为 ASP.NET Core 是可以跨平台的 ...

  4. 【ASP.NET Web API教程】2.3.4 创建Admin视图

    原文:[ASP.NET Web API教程]2.3.4 创建Admin视图 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本博客文章,请先看前面的内容. Part 4: ...

  5. Java - Struts框架教程 Hibernate框架教程 Spring框架入门教程(新版) sping mvc spring boot spring cloud Mybatis

    https://www.zhihu.com/question/21142149 http://how2j.cn/k/hibernate/hibernate-tutorial/31.html?tid=6 ...

  6. ASP.NET WEB应用程序(.network4.5)MVC Razor视图引擎2 动态数据的呈现

    https://www.cnblogs.com/cynchanpin/p/7065098.html 在MVC3開始.视图数据能够通过ViewBag属性訪问.在MVC2中则是使用ViewData.MVC ...

  7. ASP.NET WEB应用程序(.network4.5)MVC Razor视图引擎2 Areas区域说明

    https://www.cnblogs.com/webapi/p/5976642.html Asp.Net MVC Areas区域说明   一般网站分为前台+会员后台+管理员后台,做过webform的 ...

  8. ASP.NET WEB应用程序(.network4.5)MVC Razor视图引擎2 视图引用资源

    https://www.cnblogs.com/Roxlin/p/5615144.html 一.配置BundleConfig.cs文件 1.首先要在App_Start 里面BundleConfig.c ...

  9. ASP.NET MVC 分部视图

    @model PartViewDemo.Models.HomeInfo@using PartViewDemo.Models;@{ ViewBag.Title = "Index";} ...

随机推荐

  1. MyBatis增、删、改、查

    1.config.xml文件的基本配置信息 2.选择数据源 3.mybatis约定 (1)parameterType和resultType 只能传一个参数,但是我们可以传一个数组或者集合,达到传多个参 ...

  2. CentOS6.5中部署java web环境

    原来在linux中部署java web环境,没有做好总结,这次在部署的过程中,将部署的过程做了记录,希望对大家有帮助.主要内容包括CentOS安装以后的网络设置,系统自带jdk的卸载,新版本jdk的安 ...

  3. C# 《编写高质量代码改善建议》整理&笔记 --(一)基本语言篇

     题记:这是自己的观后感,工作两年了,本来打算好好学习设计模式,或者作为客户端深入了解GPU编程的,但是突然发现还有这么一本书. <编写高质量代码改善建议>,感觉这正是自己需要的. 我是做 ...

  4. 前端笔记之JavaScript(十一)event&BOM&鼠标/盒子位置&拖拽/滚轮

    一.事件对象event 1.1 preventdefault()和returnValue阻止默认事件 通知浏览器不要执行与事件关联的默认动作. preventdefault()  支持Chrome等高 ...

  5. 系列文章|OKR与敏捷(一):瀑布式目标与敏捷的冲突

    OKR与敏捷开发的原理有着相似之处,但已经使用敏捷的团队再用OKR感觉会显得多余.这种误解的根源就在于对这两种模式不够了解,运用得当的情况下,OKR和敏捷可以形成强强联合的效果,他们可以创造出以价值为 ...

  6. Struts2【UI标签、数据回显、资源国际化】

    Struts2UI标签 Sturts2为了简化我们的开发,也为我们提供了UI标签...也就是显示页面的标签..... 但是呢,Struts2是服务端的框架,因此使用页面的标签是需要在服务器端解析然后再 ...

  7. docker删除镜像和删除容器

    删除容器:docker rm ID 删除镜像:docker rmi ID

  8. MariaDB主从复制的逻辑与实现

    一.关系型数据库的劣势 “关系型数据库:指采用了关系模型来组织数据的数据库,而关系模型指的就是二维表格模型,而一个关系型数据库就是由二维表及其之间的联系所组成的一个数据组织.”——Wiki 关系型数据 ...

  9. k8s运行容器之deployment(三)--技术流ken

    deployment 我们已经知道k8s是通过各种controller来管理pod的生命周期.为了满足不同业务场景,k8s开发了Deployment.ReplicaSet.DaemonSet.Stat ...

  10. C#工具:Bootstrap WPF Style,Bootstrap风格的WPF样式

    简介 GitHub地址:https://github.com/ptddqr/bootstrap-wpf-style 此样式基于bootstrap-3.3.0,样式文件里的源码行数都是指的这个版本.CS ...