ASP.NET 5系列教程 (三)：view components介绍

在ASP.NET MVC 6中，view components (VCs) 功能相似于虚拟视图，可是功能更增强大。 VCs兼顾了视图和控制器的优势，你能够把VCs 看做一个Mini 控制器。它负责控制应用中的某一功能模块，例如：

• 动态导航菜单

• 标签云

• 登陆面板

• 购物车

• 最近文章

• 博客侧边栏

假如使用VC 建立了登陆面板，能够在不少场景中调用，例如：

• 用户没有登陆

• 用户已登陆，须要退出使用其余账号登陆或者管理其余账号。

• 若是当前登陆角色为管理员，渲染管理员登陆面板

你能够根据用户的需求获取数据进行渲染。添加VC到须要该视图控件的页面。

VC 包含两部分，类 (通常继承于ViewComponent) 和调用VC类中方法的Razor 视图。相似于ASP.NET 控制器, VC 能够做为POCO使用，可是更多用户倾向于使用从 VewComponent中继承而来的方法和属性。

 

VC的建立方式有:

• 继承ViewComponent.

• 拥有 [ViewComponent] 属性，或者从拥有 [ViewComponent]属性派生的类。

• 建立名称已ViewComponent为后缀的类。

和controllers相同，VCs 必须是公开、非嵌套和非抽象的类。

添加view component 类

1. 建立名为ViewComponents的文件夹，View component 类能够包含在工程中的任何文件夹下。

2. 在ViewComponents 文件夹下建立PriorityListViewComponent.cs 类。.

3. 使用如下代码替代PriorityListViewComponent.cs 文件原有代码:

  = IViewComponentResult Invoke( items = db.TodoItems.Where(x => x.IsDone ==  &&<=

代码注释：

· 由于PriorityListViewComponent 类继承于ViewComponent，运行时将经过字符串"PriorityList" 从View中引用该类。在后续章节将会进行详细阐述。

· [ViewComponent] 属性用于设置引用VC的别名，例如，建立名称为XYZ的类，咱们能够经过如下代码设置其引用别名:

[ViewComponent(Name =   XYZ : ViewComponent

· 组件使用构造注入器使数据内容生效，相似于 Todo 控制器的功能。

· 调用View中的公开方法，能够传递任意数量的参数。在异步版本中， InvokeAsync是可用的。在后续章节中咱们将说起InvokeAsync 和多参数的使用方法。在以前的代码中，公开方法的返回值为代办事项（ToDoItems），优先级不低于maxPriority。

添加视图控件

1. 在Views\Todo 文件夹下建立Components文件夹，注意这个文件夹须要命名为Components。

2. 在Views\Todo\Components 文件夹下建立PriorityList 文件夹。文件夹名称必须和view component 类名称一致。或者类名去除后缀名称(若是在建立类时遵循惯例使用ViewComponent 做为后缀)。若是使用了ViewComponent属性。

3. 在Views\Todo\Components\PriorityList  文件夹下建立Default.cshtml Razor 视图，添加如下标记：

@model IEnumerable<TodoList.Models.TodoItem>

<h3>Priority Items</h3>
<ul> todo <li>@todo.Title</li></ul>

 

Razor 视图包含而且显示了 TodoItems。若是 VC 调用方法没有传递视图的名称 (如例子中所示)，那么默认状况下则调用视图名称对于方法。在后续的文章中，将阐述如何传递视图名称。

在views\todo\index.cshtml 视图底部添加包含有调用PriorityListViewComponent的div：

@model IEnumerable<TodoList.Models.TodoItem>

<h3>Priority Items</h3>
<ul> todo <li>@todo.Title</li></ul>

 

标记 @await Component.InvokeAsync() 表示该语法用于调用VC。第一个参数是咱们要调用的组件名称。其他参数参数传递给该VC。在这个例子中，咱们传递“1”做为过滤的优先级。InvokeAsync 方法能够包含任意数量的参数。

如下图片显示了优先级列表：

= <div =>
  <h1>ASP.NET vNext</h1>
</div>

<div =>
  <div =>== <h4>No Todo Items</h4><table>
        <tr><th>TODO</th><th></th></tr> todo <tr>
            <td>@todo.Title </td>
            <td>, , ,  { id = todo.Id }) |, , ,  { id = todo.Id }) |, , ,  { id =</td>
          </tr></table><div>@Html.ActionLink(, , ) </div>
  </div>

  <div =>, </div>

</div>

注意： VC一般被添加到 Views\Shared 文件夹下，由于它并不单单是controller。

 

添加InvokeAsync 到优先级组件

经过如下代码更新PriorityListViewComponent类：

  =
        
          Task<IViewComponentResult> InvokeAsync( maxPriority,  MyView = 
             (maxPriority >  && isDone == =  items =  Task<IQueryable<TodoItem>> GetItemsAsync( maxPriority,  IQueryable<TodoItem> GetItems( maxPriority,  items = db.TodoItems.Where(x => x.IsDone == isDone &&<= msg =  + maxPriority.ToString() +                          +=

注意: 这里移除了用于同步的Invoke 方法，使用更增强大的asynchronous方法替代。

修改 VC 视图显示优先级信息：

@model IEnumerable<TodoList.Models.TodoItem>

<h4>@ViewBag.PriorityMessage</h4>
<ul> todo <li>@todo.Title</li></ul>

最后，更新 views\todo\index.cshtml 视图文件：

@* Markup removed  brevity. *<div =>, , </div>
</div>

如下图片展现了PriorityListViewComponent类和Index视图的修改效果：

 

指定视图名称

一些复杂的VC在某些状况下也许须要去指定特定的视图，如下代码是经过InvokeAsync 方法指定视图的方法：

  Task<IViewComponentResult> InvokeAsync( maxPriority,  MyView = 
     (maxPriority >  && isDone == =  items =

 

更改 Views\Todo\Components\PriorityList\Default.cshtml 为 Views\Todo\Components\PriorityList\PVC.cshtml 视图。更改PVC视图控件来验证它的使用：

@model IEnumerable<TodoList.Models.TodoItem>

<h2> PVC Named Priority Component View</h2>
<h4>@ViewBag.PriorityMessage</h4>
<ul> todo <li>@todo.Title</li></ul>

最后，须要更新 Views\Todo\Index.cshtml 文件：

刷新页面查看更改效果。

在进行开发时，使用 view components 能够更好的查看页面效果。若是再借助一些开发工具，还能够大大提升开发效率。ComponentOne Studio for ASP.NET 是ASP.NET平台上的一整套完备的开发工具包，包含的Web窗体控件、MVC scaffolding模板以及HTML5/JavaScript页面组件，仅经过几行代码就能够在系统中实现丰富的功能。

在MVC6中，更改controller（或其余任何代码）时，不须要从新编译或从新运行应用，仅须要保存代码而且刷新页面便可。

以上即为今天但愿和你们分享的view components知识，下一篇文章咱们将介绍如下两部份内容：

• 向视图中添加服务方法。

• 发布应用到公有云方法。

敬请期待。

 

原文连接：http://www.asp.net/vnext/overview/aspnet-vnext/vc