一、前言

1、本教程主要內(nèi)容

• ASP.NET Core MVC (Razor)分部視圖簡(jiǎn)介
• ASP.NET Core MVC (Razor)分部視圖基礎(chǔ)教程
• ASP.NET Core MVC (Razor)強(qiáng)類型分部視圖教程

2、本教程環(huán)境信息

本篇代碼以下代碼進(jìn)行調(diào)整：https://github.com/ken-io/asp.net-core-tutorial/tree/master/chapter-06

3、準(zhǔn)備工作

VS Code 本身不提供 ASP.NET Core MVC 視圖引擎（Razor）的智能感知。
幸運(yùn)的是，VS Code C#擴(kuò)展 從 1.17.0 版本開(kāi)始支持Razor視圖引擎的智能感知。

所以，我們要將VS Code C#擴(kuò)展升級(jí)到最新版本。

另外，要特意說(shuō)明的是，在VS Code 1.30版本，解決方案（Solution）視圖的視圖入口改到了側(cè)邊工具欄

image

二、ASP.NET Core MVC (Razor)分部視圖簡(jiǎn)介

1、Razor分部視圖概述

在Razor視圖引擎中，我們可以定義.cshtml文件作為“視圖”來(lái)渲染需要呈現(xiàn)給用戶的內(nèi)容。對(duì)于所有頁(yè)面共用的部分，我們可以定義母版頁(yè)（Layout）讓視圖繼承共用的部分。當(dāng)有些公共的部分我們只在某些頁(yè)面用到，不需要每個(gè)頁(yè)面都用到。或者這個(gè)公共的內(nèi)容需要作為模板使用多次，母版頁(yè)就不適合承擔(dān)這樣的作用。這時(shí)候我們可以使用分部視圖來(lái)實(shí)現(xiàn)。

2、Razor分部視圖定義與引用

Razor分部視圖定義

視圖與分部視圖在定義上并沒(méi)有本質(zhì)的不同，均是創(chuàng)建.cshtml文件作為視圖使用，只是在渲染的時(shí)候作為分部視圖來(lái)渲染/加載。

在之前提到過(guò)，通常公共的Razor視圖文件名都以_開(kāi)頭并放在/Views/Shared文件夾中，分部視圖也不例外。

例如:/Views/Shared/_PartialViewTest.cshtml

如果分部視圖只在某個(gè)控制器返回的視圖中引用，也可以創(chuàng)建在該控制器對(duì)應(yīng)的視圖目錄。

例如：/Views/Home/_PartialViewTest.cshtml

Razor分部視圖引用

//同步引用

@Html.Partial("_PartialViewTest")


//異步引用(官方推薦)

@await Html.PartialAsync("_PartialViewTest")

微軟官方更推薦使用異步加載的方式，因?yàn)橥郊虞d可能會(huì)出現(xiàn)程序死鎖的情況

如果沒(méi)有使用異步方式，會(huì)收到編譯器警告：warning MVC1000: Use of IHtmlHelper.Partial may result in application deadlocks. Consider using <partial> Tag Helper or IHtmlHelper.PartialAsync.

如果你非常在意性能，也可以使用 Html.RenderPartialAsync 呈現(xiàn)分部視圖。 這種方式會(huì)直接呈現(xiàn)分部視圖的內(nèi)容，而不會(huì)組裝成 IHtmlContent 對(duì)象放回。

@{
    await Html.RenderPartialAsync("_PartialViewTest");
}

由于 Html.RenderPartialAsync并不會(huì)返回任何內(nèi)容，所以需要在Razor語(yǔ)句塊中調(diào)用

Razor分部視圖查找順序同視圖相同：

• Views/[ControllerName]/[PartialViewName].cshtml
• Views/Shared/[PartialViewName].cshtml

當(dāng)然，你也可以直接指定完整路徑，例如：

@await Html.PartialAsync("/Views/Home/_PartialViewTest.cshtml")

三、 Razor分部視圖基礎(chǔ)使用

1、定義分部視圖

在/Views/Shared目錄下創(chuàng)建視圖 '_DateTimeInfo.cshtml'

當(dāng)前時(shí)間：@DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss:fff") 
當(dāng)前星期：@DateTime.Now.DayOfWeek

2、創(chuàng)建視圖并引用分部視圖

在/Views目錄下創(chuàng)建目錄Partial，并在/Views/Partial 目錄下創(chuàng)建文件 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、創(chuàng)建控制器

在 /Controllers 目錄下創(chuàng)建PartialController.cs并創(chuàng)建對(duì)應(yīng)Action

using System;
using Microsoft.AspNetCore.Mvc;

namespace Ken.Tutorial.Web.Controllers
{
    public class PartialController : Controller
    {
        public IActionResult Demo()
        {
            return View();
        }
    }
}

4、訪問(wèn)測(cè)試

啟動(dòng)項(xiàng)目，訪問(wèn) /partial/demo ，將會(huì)看到

image

四、帶參數(shù)的Razor分部視圖

1、視圖對(duì)象準(zhǔn)備

在項(xiàng)目根目錄中創(chuàng)建模型目錄Models，并在下面創(chuàng)建對(duì)象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目錄下創(chuàng)建視圖 '_NoteInfo.cshtml'

@model Ken.Tutorial.Web.Models.NoteViewModel;

<h3>@Model.Title</h3>
<span>@Model.PublishTime.ToString("yyyy-MM-dd")</span>
<p>@Model.Body</p>

實(shí)際上就是創(chuàng)建強(qiáng)類型分部視圖:-D

3、創(chuàng)建視圖并引用分部視圖

在/Views/Partial 目錄下創(chuàng)建文件 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 = "這是一個(gè)分部視圖測(cè)試筆記", PublishTime = DateTime.Now, Body = "這是筆記的內(nèi)容"  })

4、在控制器中編寫對(duì)應(yīng)Action

在控制器 PartialController.cs 中增加以下 Action：

public IActionResult DemoWithParams()
{
    return View();
}

5、訪問(wèn)測(cè)試

啟動(dòng)項(xiàng)目，訪問(wèn) /partial/demowithparams ，將會(huì)看到

image

如果是文章列表頁(yè)，用起來(lái)會(huì)顯得更方便。

五、備注

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

本文首發(fā)于我的獨(dú)立博客：https://ken.io/note/asp.net-core-tutorial-mvc-view-partial