1.視圖組件介紹

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

　　視圖組件特點(diǎn)：

　　　　呈塊狀，而不是整個(gè)響應(yīng)

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

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

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

　　視圖組件可以用在任何需要重復(fù)邏輯且對(duì)局部視圖來(lái)說(shuō)過(guò)于復(fù)雜的情況，例如：

　　　　動(dòng)態(tài)導(dǎo)航菜單

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

　　　　登錄面板

　　　　購(gòu)物車

　　　　最近發(fā)表的文章

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

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

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

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

　　(1)視圖組件類

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

　　　　派生自ViewComponent

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

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

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

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

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

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

　　(2) 視圖組件方法

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

　　　　定義一個(gè) InvokeAsync 方法并返回 IViewComponentResult。

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

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

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

　　　　在簽名上重載，而不是當(dāng)前 HTTP 請(qǐng)求的任何細(xì)節(jié)。

　　(3) 視圖搜索路徑

　　運(yùn)行時(shí)在以下路徑搜索視圖：

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

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

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

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

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

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

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

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

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

　　添加一個(gè) 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();
  }
 }

　　視圖組件類可以在項(xiàng)目的任何文件夾中。 [ViewComponent] 特性可以更改用于引用視圖組件的名稱，例如，可以命名類為 XYZ，并應(yīng)用 [ViewComponent] 特性：

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

　　Invoke 方法返回列表，然后創(chuàng)建視圖組件視圖。

　　創(chuàng)建 View/Shared/Components 文件夾。這個(gè)文件夾必須名為 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é)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)我們的支持。