1. 程式人生 > >ASP.NET Core MVC 之檢視元件(View Component)

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

&n