31-视图组件

视图组件是.NET CORE MVC的新特性。类是部分视图。

但是它更强大。

视图组件不适用模型绑定。并且仅依赖与调用它时所提供的数据。

它可以执行一些业务逻辑的代码。

可以通过依赖注入的方式 获取数据库上下文，然后通过它 获取数据源。

它其实是一个类来的 这个类会对应一个视图 然后这个视图是一小部分内容。

适合一些循环出现的内容

视图组件有以下特点

呈现快而不是整个响应

包含控制器和视图之间发现的相同关注点和可测试性

拥有参数和业务逻辑

通常从布局页面调用。

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

动态导航菜单

标签云（需要查找数据库）

登陆面板

购物车

最近发表的文章。

博客侧边栏

创建视图组件类

一个视图组建类可以通过下面任何一种方法创建。

1 派生自ViewComponent

2 使用[ViewConponent]属性修饰

3 创建一个后缀ViewComponent结尾的类

和控制器一样，视图组件必须是public 非嵌套 非抽象的。

视图搜索

通常在Views/控制器名/components/视图组件名称/视图名称

或者

Views/Shared/components/视图组件名称/视图名称

调用视图组件

@await Component.InvokeAsync("视图组件名称",new { 参数})Code language: JavaScript (javascript)

我们实现一个获取最新的N个同学。

创建一个视图组件类 用来准备数据源的

namespace FirstCoreMVC.Core
{
    public class NewStudents : ViewComponent
    {

        /// <summary>
        /// 构造函数可以通过依赖注入的方式 获取dbcontext 或者缓冲器
        /// </summary>
        protected NewStudents()
        {

        }

        /// <summary>
        /// 获取数据源
        /// </summary>
        /// <param name="num">学生数量 从视图中传进来</param>
        /// <returns></returns>
        public IViewComponentResult Invoke(int num)
        {
            var users = new List<UserInfo>();
            for(int i=0;i<num;i++)
            {
                users.Add(new UserInfo() { Id = i,Name = num+"学生名字" });
            }
            return View(users);
        }
    }
}Code language: HTML, XML (xml)

然后再shared目录下面创建一个components的文件夹 然后再里面创建一个newstudnet的文件夹

然后创建一个default的视图

视图内容如下

类似强视图

@model List<UserInfo>

<div style="background-color:forestgreen">
    <h2>最新同学</h2>
    <ul>
        @foreach (var item in Model)
        {
            <li>@item.Name</li>
        }
    </ul>
</div>Code language: HTML, XML (xml)

在其他视图中使用

@await Component.InvokeAsync("NewStudents",new { num = 10})Code language: JavaScript (javascript)