ASP.NET Core Razor Pages View Components
2024-07-26
筆記 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 進行結合使用。