[toc] # 前言 視圖組件與分部視圖類似,但它們的功能更加強大。 視圖組件不使用模型綁定,它們依賴於調用視圖組件時傳遞的數據。 本文是使用控制器和視圖編寫的,但視圖組件適用於 Razor Pages。 視圖組件: - 呈現一個區塊而不是整個響應。 - 包括控制器和視圖間發現的相同關註點分離和可測 ...
目錄
前言
視圖組件與分部視圖類似,但它們的功能更加強大。 視圖組件不使用模型綁定,它們依賴於調用視圖組件時傳遞的數據。 本文是使用控制器和視圖編寫的,但視圖組件適用於 Razor Pages。
視圖組件:
- 呈現一個區塊而不是整個響應。
- 包括控制器和視圖間發現的相同關註點分離和可測試性優勢。
- 可以有參數和業務邏輯。
- 通常從佈局頁調用。
視圖組件適用於對於分部視圖而言過於複雜的可重用呈現邏輯的任何位置,例如:
- 動態導航菜單
- 標記雲,用於查詢資料庫
- 登錄面板
- 購物車
- 最近發佈的文章
- 博客上的邊欄內容
- 將在每個頁面上呈現的登錄面板,並顯示註銷或登錄的鏈接,具體取決於用戶的登錄狀態
視圖組件由兩個部分組成:
- 類,通常派生自 ViewComponent
- 它返回的結果,通常是視圖。
與控制器一樣,視圖組件可以是 POCO,但大多數開發人員利用派生自 ViewComponent的方法和屬性。
在考慮視圖組件是否符合應用的規範時,請考慮改用 Razor 組件。 Razor 組件還將標記與 C# 代碼組合來生成可重用的 UI 單元。 Razor 組件專用於讓開發人員在提供客戶端 UI 邏輯和組合時保持高效。 有關詳細信息,請參閱 ASP.NET Core 組件。 有關如何將組件合併Razor到 MVC 或 Razor Pages 應用中的信息,請參閱預呈現和集成 ASP.NET CoreRazor組件。
參考鏈接。
調用頁面
index.cshtml
<div class="container">
@await Component.InvokeAsync("PartialView",new{a = 1, b = true})
</div>
PartialUserViewComponent.cs
using Cnpc.Com.Ioc.IBll;
using Microsoft.AspNetCore.Mvc;
namespace DotNetCore.Mvc.Demo.Compoents
{
[ViewComponent(Name = "PartialView")]
public class PartialUserViewComponent : ViewComponent
{
IUserServices _user;
public PartialUserViewComponent(IUserServices user)
{
_user = user;
}
public async Task<IViewComponentResult> InvokeAsync(int a, bool b)
{
return await Task.FromResult(View("PartialUserView", _user.GetUsers()));
}
}
}
IUserServices.cs
- 簡單的返回一個集合用作測試
PartialUserView.cshtml
註意
- 文件創建
- Views -> Shared -> Components(必須這個名字) -> PartialView(與ViewComponent特性標註的名字一致) -> PartialUserView
@using Cnpc.Com.Ioc.Bean;
@model List<User>
@{
foreach (var item in Model)
{
<h1>@item.ToString()</h1>
}
}