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})