一抹凳、前言
1鸯匹、本教程主要內(nèi)容
- ASP.NET Core MVC (Razor)分部視圖簡介
- ASP.NET Core MVC (Razor)分部視圖基礎(chǔ)教程
- ASP.NET Core MVC (Razor)強類型分部視圖教程
2、本教程環(huán)境信息
| 軟件/環(huán)境 | 說明 |
|---|---|
| 操作系統(tǒng) | Windows 10 |
| SDK | 2.1.401 |
| ASP.NET Core | 2.1.3 |
| IDE | Visual Studio Code 1.30 |
| 瀏覽器 | Chrome 70 |
本篇代碼以下代碼進行調(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）的智能感知挫望。
幸運的是，VS Code C#擴展 從 1.17.0 版本開始支持Razor視圖引擎的智能感知狂窑。
所以媳板，我們要將VS Code C#擴展升級到最新版本。
另外泉哈，要特意說明的是蛉幸，在VS Code 1.30版本，解決方案（Solution）視圖的視圖入口改到了側(cè)邊工具欄
二丛晦、ASP.NET Core MVC (Razor)分部視圖簡介
1奕纫、Razor分部視圖概述
在Razor視圖引擎中，我們可以定義.cshtml文件作為“視圖”來渲染需要呈現(xiàn)給用戶的內(nèi)容烫沙。對于所有頁面共用的部分匹层，我們可以定義母版頁（Layout）讓視圖繼承共用的部分。當(dāng)有些公共的部分我們只在某些頁面用到锌蓄，不需要每個頁面都用到升筏〕湃幔或者這個公共的內(nèi)容需要作為模板使用多次，母版頁就不適合承擔(dān)這樣的作用您访。這時候我們可以使用分部視圖來實現(xiàn)铅忿。
2、Razor分部視圖定義與引用
Razor分部視圖定義
視圖與分部視圖在定義上并沒有本質(zhì)的不同洋只，均是創(chuàng)建.cshtml文件作為視圖使用，只是在渲染的時候作為分部視圖來渲染/加載昼捍。
在之前提到過识虚，通常公共的Razor視圖文件名都以_開頭并放在/Views/Shared文件夾中，分部視圖也不例外妒茬。
例如:/Views/Shared/_PartialViewTest.cshtml
如果分部視圖只在某個控制器返回的視圖中引用担锤，也可以創(chuàng)建在該控制器對應(yīng)的視圖目錄。
例如：/Views/Home/_PartialViewTest.cshtml
Razor分部視圖引用
//同步引用
@Html.Partial("_PartialViewTest")
//異步引用(官方推薦)
@await Html.PartialAsync("_PartialViewTest")
微軟官方更推薦使用異步加載的方式乍钻，因為同步加載可能會出現(xiàn)程序死鎖的情況
如果沒有使用異步方式肛循，會收到編譯器警告：warning MVC1000: Use of IHtmlHelper.Partial may result in application deadlocks. Consider using <partial> Tag Helper or IHtmlHelper.PartialAsync.
如果你非常在意性能，也可以使用 Html.RenderPartialAsync 呈現(xiàn)分部視圖银择。 這種方式會直接呈現(xiàn)分部視圖的內(nèi)容多糠，而不會組裝成 IHtmlContent 對象放回。
@{
await Html.RenderPartialAsync("_PartialViewTest");
}
由于 Html.RenderPartialAsync并不會返回任何內(nèi)容浩考，所以需要在Razor語句塊中調(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)前時間：@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)建對應(yīng)Action
using System;
using Microsoft.AspNetCore.Mvc;
namespace Ken.Tutorial.Web.Controllers
{
public class PartialController : Controller
{
public IActionResult Demo()
{
return View();
}
}
}
4、訪問測試
啟動項目邓尤，訪問 /partial/demo 拍鲤，將會看到
四、帶參數(shù)的Razor分部視圖
1汞扎、視圖對象準(zhǔn)備
在項目根目錄中創(chuàng)建模型目錄Models殿漠，并在下面創(chuàng)建對象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>
實際上就是創(chuà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 = "這是一個分部視圖測試筆記", PublishTime = DateTime.Now, Body = "這是筆記的內(nèi)容" })
4绞幌、在控制器中編寫對應(yīng)Action
在控制器 PartialController.cs 中增加以下 Action：
public IActionResult DemoWithParams()
{
return View();
}
5、訪問測試
啟動項目一忱，訪問 /partial/demowithparams 莲蜘，將會看到
如果是文章列表頁谭确，用起來會顯得更方便。
五票渠、備注
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ā)于我的獨立博客：https://ken.io/note/asp.net-core-tutorial-mvc-view-partial
