在之前的MVC中，我們經(jīng)常需要類似一種小部件的功能，通常我們都是使用Partial View來實現(xiàn)，因為MVC中沒有類似Web Forms中的WebControl的功能。但在MVC6中，這一功能得到了極大的改善。新版MVC6中，提供了一種叫做View Component的功能。

你可以將View Component看做是一個mini的Controller——它只負責(zé)渲染一小部分內(nèi)容，而非全部響應(yīng)，所有Partial View能解決的問題，你都可以使用View Component來解決，比如：動態(tài)導(dǎo)航菜單、Tag標簽、登錄窗口、購物車、最近閱讀文章等等。

View Component包含2個部分，一部分是類(繼承于ViewComponent)，另外一個是Razor視圖(和普通的View視圖一樣)。就像新版MVC中的Controller一樣，ViewComponent也可以使POCO的(即不繼承ViewComponent類，但類名以ViewComponent結(jié)尾)。

View Component的創(chuàng)建

目前，View Component類的創(chuàng)建方式有如下三種：

直接繼承于ViewComponent

給類加上ViewComponent特性，或繼承于帶有ViewComponent特性的類

創(chuàng)建一個類，類名以ViewComponent結(jié)尾

和Controller一樣，View Component必須是public的，不能嵌套，不能是抽象類。舉例來說，我們創(chuàng)建一個View Component，類名為TopListViewComponent，代碼如下：

public class TopListViewComponent : ViewComponent 
{ 
    private readonly ApplicationDbContext db; 
 
    public TopListViewComponent(ApplicationDbContext context) 
    { 
        db = context; 
    } 
 
    public IViewComponentResult Invoke(int categoryId, int topN) 
    { 
        List col = new List();         var items = db.TodoItems.Where(x => x.IsDone == false &&                                             x.categoryId == categoryId).Take(topN);          return View(items);     } } 
 
  

上述類，也可以定義成如下這樣：

[ViewComponent(Name = "TopList")] 
public class TopWidget 
{ 
    // 其它類似 
} 

通過在TopWidget類上定義一個名稱為TopList的ViewComponent特性，其效果和定義TopListViewComponent類一樣，系統(tǒng)在查找的時候，都會認可，并且在其構(gòu)造函數(shù)中通過依賴注入功能提示構(gòu)造函數(shù)中參數(shù)的類型實例。

Invoke方法是一個約定方法，可以傳入任意數(shù)量的參數(shù)，系統(tǒng)也支持InvokeAsync方法實現(xiàn)異步功能。

View Component的視圖文件創(chuàng)建

以在ProductController的視圖里調(diào)用View Component為例，我們需要在Views\Product文件夾下創(chuàng)建一個名稱為Components的文件夾(該文件夾名稱必須為Components)。

然后在Views\Product\Components文件夾下創(chuàng)建一個名稱為TopList 的文件夾(該文件夾名稱必須和View Component名稱一致，即必須是TopList)。

在Views\Product\Components\TopList文件夾下，創(chuàng)建一個Default.cshtml視圖文件，并添加如下標記：

@model IEnumerable<BookStore.Models.ProductItem> 
 
<h3>Top Products</h3> 
<ul> 
    @foreach (var todo in Model) 
    { 
        <li>@todo.Title</li> 
    } 
</ul> 

如果再View Component中，沒有指定視圖的名稱，將默認為Default.cshtml視圖。

至此，該View Component就創(chuàng)建好了，你可以在Views\Product\index.cshtml視圖中的任意位置調(diào)用該View Component，比如：

<div class="col-md-4"> 
  @Component.Invoke("TopList", 1, 10)   
</div> 

如果在上述TopListViewComponent中定義的是異步方法InvokeAsync的話，則可以使用@await Component.InvokeAsync()方法來調(diào)用，這兩個方法的***個參數(shù)都是TopListViewComponent的名稱，剩余的參數(shù)則是在TopListViewComponent類中定義的方法參數(shù)。

注意：一般來說，View Component的視圖文件都是添加在Views\Shared文件夾的，因為一般來說ViewComponent不會特定于某個Controller。

使用自定義視圖文件

一般來說，如果要使用自定義文件，我們需要在Invoke的方法返回返回值的時候來指定視圖的名稱，示例如下：

return View("TopN", items); 

那么，就需要創(chuàng)建一個Views\Product\Components\TopN.cshtml文件，而使用的時候則無需更改，還是指定原來的View Component名稱即可，比如：

@await Component.InvokeAsync("TopList",  1, 10)  //以異步調(diào)用為例 

總結(jié)

一般來說，建議在通用的功能上使用View Component的功能，這樣所有的視圖文件都可以放在Views\Shared文件夾了。