筆記 ASP.NET Core 開發 Razor Pages 使用 View Components 的方法以及與 Partial Views 的差異。
說明
Microsoft 提到適合使用 View Components 的情境:
Dynamic navigation menus
Tag cloud, where it queries the database
Sign in panel
Shopping cart
Recently published articles
Sidebar content on a blog
View Components 相較於 Partial Views 的優勢在於可以提供更多的邏輯處理,使用 Dependency Injection 搭配服務以及 Model Binding 來接收參數。
Usage
要使用 View Components 需要建立 ViewComponents
資料夾,並在裡面建立 View Components 的類別,並繼承 ViewComponent
類別。
另外 View 要放置在 Views/Shared/Components/{ViewComponentName}/Default.cshtml
當中。
View Components 類別中的 InvokeAsync
或 Invoke
方法會回傳 IViewComponentResult
類別,可以使用 View
方法回傳 View。
/ViewComponents/CourseNotes.cs
namespace CourseHelper.ViewComponents;
public class CourseNotesViewComponent : ViewComponent
{
public IViewComponentResult Invoke(int Count = 2)
{
var news = new List<string>
{
"News 1: Top story of the day!",
"News 2: Major event happening now!",
"News 3: Important update for everyone!"
};
return View(news.Take(Count));
}
}
/Pages/Shared/Components/CourseNote.cshtml
@model IEnumerable<string>
<div>
<h2>Latest News</h2>
<ul>
@foreach (var item in Model)
{
<li>@item</li>
}
</ul>
</div>
要在 Razor Pages 中使用 View Components 可以使用 Component.InvokeAsync
或 Component.Invoke
方法。
@(await Component.InvokeAsync("CourseNotes", new { Count = 1}))
或可以使用 Tag Helper 的方式,必須先在 _ViewImports.cshtml
中加入 View Components 的命名空間。
例如 namespace CourseHelper.ViewComponents
,可以在 _ViewImports.cshtml
中加入:
@addTagHelper *, CourseHelper
⭐ 在使用上要注意 Tag Helper 必須使用 kebab-case 的元件名稱 (例如 CourseNotes
要轉換為 course-notes
) 以及 lower-case 的參數名稱。
<vc:course-notes count="1" />
Ajax Usage
ViewComponents 扮演能夠重複使用的元件,可以在多個 Razor Pages 中使用。但如果要將資料 Submit 必須搭配 Page 的 OnPost
來達成,沒辦法單純透過 ViewComponent。
例如想要一個 Panel 來讓使用者輸入資料,並且在使用者完成輸入後要自動更新 Panel 的內容,這個時候就必須將 View Component 與 Page Handler 進行結合使用。