1.視圖組件介紹

　　視圖組件是 ASP.NET Core MVC 的新特性，類似于局部視圖，但它更強大。視圖組件不使用模型綁定，并且僅依賴于調(diào)用它時所提供的數(shù)據(jù)。

　　視圖組件特點：

　　　　呈塊狀，而不是整個響應

　　　　包括在控制器和視圖之間發(fā)現(xiàn)的相同的關注點和可測試性優(yōu)點

　　　　可以擁有參數(shù)和業(yè)務邏輯

　　　　通常從布局頁面調(diào)用

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

　　　　動態(tài)導航菜單

　　　　標簽云（需要查詢數(shù)據(jù)庫）

　　　　登錄面板

　　　　購物車

　　　　最近發(fā)表的文章

　　　　典型博客上的側(cè)邊欄內(nèi)容

　　　　將在每個頁面上呈現(xiàn)的登錄面板，根據(jù)用戶的登錄狀態(tài)顯示注銷或者登錄的鏈接

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

2.創(chuàng)建視圖組件

　　(1)視圖組件類

　　一個視圖組件類通常可以通過以下任一方式創(chuàng)建：

　　　　派生自ViewComponent

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

　　　　創(chuàng)建一個名稱后綴為 ViewComponent 結(jié)尾的類

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

　　視圖組件類優(yōu)點：

　　　　完全支持構(gòu)造函數(shù)依賴注入

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

　　(2) 視圖組件方法

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

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

　　　　通常通過調(diào)用  ViewComponent View 方法初始化模型并將其傳遞給視圖。

　　　　參數(shù)來自調(diào)用方法，而不是 HTTP，沒有模型綁定。

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

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

　　(3) 視圖搜索路徑

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

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

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

　　視圖組件的默認視圖名稱是 Default，這意味著你的視圖文件通常名為 Default.cshtml。你可以在創(chuàng)建視圖組件結(jié)果或調(diào)用 View 方法時指定其他的視圖名稱。

3.調(diào)用視圖組件

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

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

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

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

4.實戰(zhàn)視圖組件

　　添加一個 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 方法返回列表，然后創(chuàng)建視圖組件視圖。

　　創(chuàng)建 View/Shared/Components 文件夾。這個文件夾必須名為 Components。然后在里面創(chuàng)建 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>

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

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對腳本之家的支持。

最新評論