.NET Core 视图组件Component用法

视图组件Component

视图组件与分部视图类似，但它们的功能更加强大。 视图组件不使用模型绑定，并且仅依赖调用时提供的数据。 本文是使用控制器和视图编写的，但视图组件也与 Razor Pages 一起编写。

什么是视图组件？

呈现一个区块而不是整个响应。

包括控制器和视图间发现的相同关注点分离和可测试性优势。

可以有参数和业务逻辑。

通常从布局页调用。

什么时候用视图组件？

视图组件可用于具有可重用呈现逻辑（对分部视图来说过于复杂）的任何位置，例如：

动态导航菜单

标记云（查询数据库的位置）

登录面板

购物车

最近发布的文章

典型博客上的边栏内容

一个登录面板，呈现在每页上并显示注销或登录链接，具体取决于用户的登录状态

使用Component示例：

在Pages/Components目录下添加视图组件类

ContentViewComponent.cs

namespace MyMvc.Pages.Components
{
    public class ContentViewComponent : ViewComponent
    {
        private Database database;
        public ContentViewComponent(Database database) {
            this.database = database;
        }
        public async Task<IViewComponentResult> InvokeAsync()
        {
            var list = await database.GetListAsync();
            return View(string.Empty, string.Join(",", list));
        }
    }
}

在Pages/Shared/Components/Content目录下添加视图文件

Default.cshtml

@model string
@{
}
<h2>
    Content component.
</h2>
<h3>
    @Model
</h3>

运行时在以下路径中搜索视图：

/Views/{Controller Name}/Components/{View Component Name}/{View Name}

/Views/Shared/Components/{View Component Name}/{View Name}

/Pages/Shared/Components/{View Component Name}/{View Name}

搜索路径适用于使用控制器 + 视图和 Pages Razor 的项目。

调用Component

@await Component.InvokeAsync("Content")
//带参数调用
@await Component.InvokeAsync("Content", new { name="content" })