ASP.NET Core MVC 之視圖組件（View Component）

1.視圖組件介紹

　　視圖組件是 ASP.NET Core MVC 的新特性，類似於局部視圖，但它更強大。視圖組件不使用模型綁定，並且僅依賴於調用它時所提供的數據。

　　視圖組件特點：

　　　　呈塊狀，而不是整個響應

　　　　包括在控制器和視圖之間發現的相同的關注點和可測試性優點

　　　　可以擁有參數和業務邏輯

　　　　通常從布局頁面調用

 

　　視圖組件可以用在任何需要重復邏輯且對局部視圖來說過於復雜的情況，例如：

　　　　動態導航菜單

　　　　標簽雲（需要查詢數據庫）

　　　　登錄面板

　　　　購物車

　　　　最近發表的文章

　　　　典型博客上的側邊欄內容

　　　　將在每個頁面上呈現的登錄面板，根據用戶的登錄狀態顯示注銷或者登錄的鏈接

 

　　視圖組件有兩部分組成，類（通常派生自 ViewComponent）和它返回的結果（通常是一個視圖）。與控制器一樣，視圖組件可以是POCO，但大多數是利用 ViewComponent 派生的方法和屬性。

 

2.創建視圖組件

　　(1)視圖組件類

　　一個視圖組件類通常可以通過以下任一方式創建：

　　　　派生自ViewComponent

　　　　使用 [ViewComponent] 屬性裝飾類，或從具有 [ViewComponent] 屬性的類派生

　　　　創建一個名稱后綴為 ViewComponent 結尾的類

　　像控制器一樣，視圖組件必須是 public ，非嵌套和非抽象類。視圖組件名稱是刪除了 ViewComponent 后綴的類名，可以使用 ViewComponentAttribute.Name 屬性顯示指定。

　　

　　視圖組件類優點：

　　　　完全支持構造函數依賴注入

　　　　不參與控制器生命周期，這意味着不能在視圖組件中使用過濾器

 

　　(2) 視圖組件方法

　　視圖組件在 InvokeAsync 方法中定義其邏輯，並返回 IViewComponentResult 。參數直接來自視圖組件的調用，而不是來自模型綁定。視圖組件從不直接處理請求。通常，視圖組件通過調用 View 方法初始化模型並將其傳遞給視圖。總之，視圖組件有以下特點：

　　　　定義一個 InvokeAsync 方法並返回 IViewComponentResult。

　　　　通常通過調用  ViewComponent View 方法初始化模型並將其傳遞給視圖。

　　　　參數來自調用方法，而不是 HTTP，沒有模型綁定。

　　　　不能直接作為 HTTP 端點訪問，它是從你的代碼（通常在視圖中）調用的。視圖組件不處理請求。

　　　　在簽名上重載，而不是當前 HTTP 請求的任何細節。

 

　　(3) 視圖搜索路徑

　　運行時在以下路徑搜索視圖：

　　Views/<controller_name>/Components/<view_component_name>/<view_name>

　　Views/Shared/Components/<view_component_name>/<view_name>

　　視圖組件的默認視圖名稱是 Default，這意味着你的視圖文件通常名為 Default.cshtml。你可以在創建視圖組件結果或調用 View 方法時指定其他的視圖名稱。

 

3.調用視圖組件

 　　 要使用視圖組件，請從視圖中調用  @Component.InvokeAsync("視圖組件名稱",<匿名參數>)。參數將傳遞到 InvokeAsync 方法。如下：

@await Component.InvokeAsync("TopicRankList",new { days=5})

　　視圖組件通常從視圖中調用，但也可以從控制器方法中直接調用，雖然視圖組件不像控制器那樣定義終結點。

        public ActionResult Index()
        {
            return ViewComponent("TopicRankList", new { days = 5 });
        }

 

4.實戰視圖組件

　　添加一個 ViewCompoents 文件夾，然后添加 UserRankList類：

    public class UserRankList : ViewComponent
    {
        private readonly DataContext _db;
        private IMemoryCache _memoryCache;
        private string cacheKey = "topicrank";

        public UserRankList(DataContext db, IMemoryCache memoryCache)
        {
            _db = db;
            _memoryCache = memoryCache;
        }

        public IViewComponentResult Invoke(int days)
        {
            var items = new List<User>();
            if (!_memoryCache.TryGetValue(cacheKey, out items))
            {
                items = GetRankUsers(10, days);
            }
            _memoryCache.Set(cacheKey,items,TimeSpan.FromMinutes(10));
            return View(items);
        }

        private List<User> GetRankUsers(int top, int days)
        {
            return _db.User.OrderBy(o => o.Id).Take(top).ToList();
        }
    }

　　視圖組件類可以在項目的任何文件夾中。 [ViewComponent] 特性可以更改用於引用視圖組件的名稱，例如，可以命名類為 XYZ，並應用 [ViewComponent] 特性：

[ViewComponent(Name="UserRankTop")]
public calss XYZ:ViewComponent

　　Invoke 方法返回列表，然后創建視圖組件視圖。

　　創建 View/Shared/Components 文件夾。這個文件夾必須名為 Components。然后在里面創建 UserRankList 文件夾，添加 Default.cshtml 視圖：

@model List<MVCTest.Models.User>

<h2>user</h2>
<div class="list-group">
    @foreach (var item in Model)
    {
        <label>@item.Name</label>
    }
</div>

　　最后在視圖中調用：@await Component.InvokeAsync("UserRankList", new { days=5})