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