.NET绿叶社区!
返回

.NET Core 视图组件Component用法

2021-06-25 .NET Core 视图组件 Component 265 0

视图组件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" })
点赞 收藏

顶部