一、前言 1、本教程主要內容 ASP.NET Core MVC (Razor)分部視圖簡介 ASP.NET Core MVC (Razor)分部視圖基礎教程 ASP.NET Core MVC (Razor)強類型分部視圖教程 2、本教程環境信息 本篇代碼以下代碼進行調整:https://github ...
一、前言
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
,將會看到
四、帶參數的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
,將會看到
如果是文章列表頁,用起來會顯得更方便。
五、備註
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