ASP.NET Core MVC 之视图组件（View Component）

1.视图组件介绍

视图组件是 ASP.NET Core MVC 的新特性，类似于局部视图，但它更强大。视图组件不使用模型绑定，并且仅依赖于调用它时所提供的数据。

视图组件特点：

• 呈块状，而不是整个响应
• 包括在控制器和视图之间发现的相同的关注点和可测试性优点
• 可以拥有参数和业务逻辑
• 通常从布局页面调用

视图组件可以用在任何需要重复逻辑且对局部视图来说过于复杂的情况，例如：

• 动态导航菜单
• 标签云（需要查询数据库）
• 登录面板
• 购物车
• 最近发表的文章
• 典型博客上的侧边栏内容
• 将在每个页面上呈现的登录面板，根据用户的登录状态显示注销或者登录的链接

视图组件有两部分组成，类（通常派生自 ViewComponent）和它返回的结果（通常是一个视图）。与控制器一样，视图组件可以是POCO，但大多数是利用 ViewComponent 派生的方法和属性。

2.创建视图组件

(1)视图组件类

一个视图组件类通常可以通过以下任一方式创建：

• 派生自ViewComponent
• 使用 [ViewComponent] 属性装饰类，或从具有 [ViewComponent] 属性的类派生
• 创建一个名称后缀为 ViewComponent 结尾的类

像控制器一样，视图组件必须是 public ，非嵌套和非抽象类。视图组件名称是删除了 ViewComponent 后缀的类名，可以使用 ViewComponentAttribute.Name 属性显示指定。

视图组件类优点：

• 完全支持构造函数依赖注入
• 不参与控制器生命周期，这意味着不能在视图组件中使用过滤器

(2) 视图组件方法

视图组件在 InvokeAsync 方法中定义其逻辑，并返回 IViewComponentResult 。参数直接来自视图组件的调用，而不是来自模型绑定。视图组件从不直接处理请求。通常，视图组件通过调用 View 方法初始化模型并将其传递给视图。总之，视图组件有以下特点：

• 定义一个 InvokeAsync 方法并返回 IViewComponentResult。
• 通常通过调用 ViewComponent View 方法初始化模型并将其传递给视图。
• 参数来自调用方法，而不是 HTTP，没有模型绑定。
• 不能直接作为 HTTP 端点访问，它是从你的代码（通常在视图中）调用的。视图组件不处理请求。
• 在签名上重载，而不是当前 HTTP 请求的任何细节。

(3) 视图搜索路径
运行时在以下路径搜索视图：

• Views//Components//
• Views/Shared/Components//

视图组件的默认视图名称是 Default，这意味着你的视图文件通常名为 Default.cshtml。你可以在创建视图组件结果或调用 View 方法时指定其他的视图名称。

3.调用视图组件

要使用视图组件，请从视图中调用 @Component.InvokeAsync("视图组件名称",<匿名参数>)。参数将传递到 InvokeAsync 方法。如下：

@await Component.InvokeAsync("TopicRankList",new { days=5})

视图组件通常从视图中调用，但也可以从控制器方法中直接调用，虽然视图组件不像控制器那样定义终结点。

public ActionResult Index()
{
    return ViewComponent("TopicRankList", new { days = 5 });
}

4.实战视图组件

添加一个 ViewCompoents 文件夹，然后添加 UserRankList类：

public class UserRankList : ViewComponent
{
    private readonly DataContext _db;
    private IMemoryCache _memoryCache;
    private string cacheKey = "topicrank";

    public UserRankList(DataContext db, IMemoryCache memoryCache)
    {
        _db = db;
        _memoryCache = memoryCache;
    }

    public IViewComponentResult Invoke(int days)
    {
        var items = new List<User>();
        if (!_memoryCache.TryGetValue(cacheKey, out items))
        {
            items = GetRankUsers(10, days);
        }
        _memoryCache.Set(cacheKey,items,TimeSpan.FromMinutes(10));
        return View(items);
    }

    private List<User> GetRankUsers(int top, int days)
    {
        return _db.User.OrderBy(o => o.Id).Take(top).ToList();
    }
}

视图组件类可以在项目的任何文件夹中。 [ViewComponent] 特性可以更改用于引用视图组件的名称，例如，可以命名类为 XYZ，并应用 [ViewComponent] 特性：

[ViewComponent(Name="UserRankTop")]
public calss XYZ:ViewComponent

Invoke 方法返回列表，然后创建视图组件视图。

创建 View/Shared/Components 文件夹。这个文件夹必须名为 Components。然后在里面创建 UserRankList 文件夹，添加 Default.cshtml视图：

@model List<MVCTest.Models.User>

<h2>userh2>
<div class="list-group">
    @foreach (var item in Model)
    {
        <label>@item.Namelabel>
    }
div>

最后在视图中调用：@await Component.InvokeAsync("UserRankList", new { days=5})