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

你可以將View Component看做是一個mini的Controller——它只負責渲染一小部分內容，而非全部響應，所有Partial View能解決的問題，你都可以使用View Component來解決，比如：動態導航選單、Tag標籤、登入視窗、購物車、最近閱讀文章等等。

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

View Component的建立

目前，View Component類的建立方式有如下三種：

1. 直接繼承於ViewComponent
2. 給類加上ViewComponent特性，或繼承於帶有ViewComponent特性的類
3. 建立一個類，類名以ViewComponent結尾

和Controller一樣，View Component必須是public的，不能巢狀，不能是抽象類。

舉例來說，我們建立一個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<string> col = new List<string>();
        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類一樣，系統在查詢的時候，都會認可，並且在其建構函式中通過依賴注入功能提示建構函式中引數的型別例項。

Invoke方法是一個約定方法，可以傳入任意數量的引數，系統也支援InvokeAsync方法實現非同步功能。

View Component的檢視檔案建立

以在ProductController

然後在Views\Product\Components資料夾下建立一個名稱為TopList 的資料夾（該資料夾名稱必須和View Component名稱一致，即必須是TopList）。

在Views\Product\Components\TopList資料夾下，建立一個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就建立好了，你可以在Views\Product\index.cshtml檢視中的任意位置呼叫該View Component，比如：

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

如果在上述TopListViewComponent中定義的是非同步方法InvokeAsync的話，則可以使用@await Component.InvokeAsync()方法來呼叫，這兩個方法的第一個引數都是TopListViewComponent的名稱，剩餘的引數則是在TopListViewComponent類中定義的方法引數。

注意：一般來說，View Component的檢視檔案都是新增在Views\Shared資料夾的，因為一般來說ViewComponent不會特定於某個Controller。

使用自定義檢視檔案

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

return View("TopN", items);

那麼，就需要建立一個Views\Product\Components\TopN.cshtml檔案，而使用的時候則無需更改，還是指定原來的View Component名稱即可，比如：

@await Component.InvokeAsync("TopList",  1, 10)  //以非同步呼叫為例

總結

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

同步與推薦