View Component

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