解讀ASP.NET 5 & MVC6系列（14）：View Component

在以前的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的視圖裏調用View Component爲例，咱們須要在Views\Product文件夾下建立一個名稱爲Components的文件夾（該文件夾名稱必須爲Components）。

而後在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文件夾了。

同步與推薦

本文已同步至目錄索引：解讀ASP.NET 5 & MVC6系列