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

 在之前的MVC中，我们经常需要类似一种小部件的功能，通常我们都是使用Partial View来实现，因为MVC中没有类似Web Forms中的WebControl的功能。但在MVC6中，这一功能得到了极大的改善。新版MVC6中，提供了一种叫做View Component的功能。

创新互联公司是一家专业提供安定企业网站建设,专注与成都做网站、网站设计、H5页面制作、小程序制作等业务。10年已为安定众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。

你可以将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类的创建方式有如下三种：

直接继承于ViewComponent

给类加上ViewComponent特性，或继承于带有ViewComponent特性的类

创建一个类，类名以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 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类一样，系统在查找的时候，都会认可，并且在其构造函数中通过依赖注入功能提示构造函数中参数的类型实例。

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 
  
  
 
  
  
Top Products
 
  
  
   
  
    @foreach (var todo in Model) 
  
  
    { 
  
  
        
@todo.Title
   
  
    } 
  
  
 
 

如果再View Component中，没有指定视图的名称，将默认为Default.cshtml视图。

至此，该View Component就创建好了，你可以在Views\Product\index.cshtml视图中的任意位置调用该View Component，比如：

 
 
  
  
 
  
  
  @Component.Invoke("TopList", 1, 10)