解读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系列