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

浏览数：47 / 时间：2015年06月09日

在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 文件原有代码:

using System.Linq;
using Microsoft.AspNet.Mvc;
using TodoList.Models;

namespace TodoList.ViewComponents
{
  public class PriorityListViewComponent : ViewComponent
  {
    private readonly ApplicationDbContext db;

    public PriorityListViewComponent(ApplicationDbContext context)
    {
      db = context;
    }

    public IViewComponentResult Invoke(int maxPriority)
    {
      var items = db.TodoItems.Where(x => x.IsDone == false &&
                                        x.Priority <= maxPriority);

      return View(items);
    }
  }
}

代码注释：

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

· [ViewComponent] 属性用于设置引用VC的别名，例如，创建名称为XYZ的类，我们可以通过以下代码设置其引用别名:

[ViewComponent(Name = "PriorityList")]
public class 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>
    @foreach (var todo in Model)
    {
        <li>@todo.Title</li>
    }
</ul>

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

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

@model IEnumerable<TodoList.Models.TodoItem>

<h3>Priority Items</h3>
<ul>
    @foreach (var todo in Model)
    {
        <li>@todo.Title</li>
    }
</ul>

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

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

@{
  ViewBag.Title = "ToDo Page";
}

<div class="jumbotron">
  <h1>ASP.NET vNext</h1>
</div>

<div class="row">
  <div class="col-md-4">
    @if (Model.Count == 0)
    {
      <h4>No Todo Items</h4>
    }
    else
    {
      <table>
        <tr><th>TODO</th><th></th></tr>
        @foreach (var todo in Model)
        {
          <tr>
            <td>@todo.Title </td>
            <td>
              @Html.ActionLink("Details", "Details", "Todo", new { id = todo.Id }) |
              @Html.ActionLink("Edit", "Edit", "Todo", new { id = todo.Id }) |
              @Html.ActionLink("Delete", "Delete", "Todo", new { id = todo.Id })
            </td>
          </tr>
        }
      </table>
              }
    <div>@Html.ActionLink("Create New Todo", "Create", "Todo") </div>
  </div>

  <div class="col-md-4">
    @Component.Invoke("PriorityList", 1)   
  </div>

</div>

注意： VC通常被添加到 Views\Shared 文件夹下，因为它并不仅仅是controller。

添加InvokeAsync 到优先级组件

通过以下代码更新PriorityListViewComponent类：

using System.Linq;
using Microsoft.AspNet.Mvc;
using TodoList.Models;
using System.Threading.Tasks;

namespace TodoList.ViewComponents
{
    public class PriorityListViewComponent : ViewComponent
    {
        private readonly ApplicationDbContext db;

        public PriorityListViewComponent(ApplicationDbContext context)
        {
            db = context;
        }

        // Synchronous Invoke removed.
        
        public async Task<IViewComponentResult> InvokeAsync(int maxPriority, bool isDone)
        {
            string MyView = "Default";

            // If asking for all completed tasks, render with the "PVC" view.
            if (maxPriority > 3 && isDone == true)
            {
                MyView = "PVC";
            }

            var items = await GetItemsAsync(maxPriority, isDone);

            return View(MyView, items);
        }

        private Task<IQueryable<TodoItem>> GetItemsAsync(int maxPriority, bool isDone)
        {
            return Task.FromResult(GetItems(maxPriority, isDone));

        }
        private IQueryable<TodoItem> GetItems(int maxPriority, bool isDone)
        {
            var items = db.TodoItems.Where(x => x.IsDone == isDone &&
                                                x.Priority <= maxPriority);

            string msg = "Priority <= " + maxPriority.ToString() +
                         " && isDone == " + isDone.ToString();
            ViewBag.PriorityMessage = msg;

            return items;
        }

    }
}

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

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

@model IEnumerable<TodoList.Models.TodoItem>

<h4>@ViewBag.PriorityMessage</h4>
<ul>
    @foreach (var todo in Model)
    {
        <li>@todo.Title</li>
    }
</ul>

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

@* Markup removed for brevity. *@
    
    <div class="col-md-4">
        @await Component.InvokeAsync("PriorityList", 2, true)
    </div>
</div>

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

指定视图名称

一些复杂的VC在某些情况下也许需要去指定特定的视图，以下代码是通过InvokeAsync 方法指定视图的方法：

public async Task<IViewComponentResult> InvokeAsync(int maxPriority, bool isDone)
{
    string MyView = "Default";

    // If asking for all completed tasks, render with the "PVC" view.
    if (maxPriority > 3 && isDone == true)
    {
        MyView = "PVC";
    }

    var items = await GetItemsAsync(maxPriority, isDone);

    return View(MyView, 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>
    @foreach (var todo in Model)
    {
        <li>@todo.Title</li>
    }
</ul>

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

刷新页面查看更改效果。

在MVC6中，更改controller（或其他任何代码）时，不需要重新编译或重新运行应用，仅需要保存代码并且刷新页面即可。

以上即为今天希望和大家分享的view components知识，下一篇文章我们将介绍以下两部分内容：