.Net Core Mvc Razor 组件

目录

• 前言
• 调用页面
  • index.cshtml
  • PartialUserViewComponent.cs
  • IUserServices.cs
  • PartialUserView.cshtml
    • 注意

前言

视图组件与分部视图类似，但它们的功能更加强大。 视图组件不使用模型绑定，它们依赖于调用视图组件时传递的数据。 本文是使用控制器和视图编写的，但视图组件适用于 Razor Pages。

视图组件：

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

视图组件适用于对于分部视图而言过于复杂的可重用呈现逻辑的任何位置，例如：

• 动态导航菜单
• 标记云，用于查询数据库
• 登录面板
• 购物车
• 最近发布的文章
• 博客上的边栏内容
• 将在每个页面上呈现的登录面板，并显示注销或登录的链接，具体取决于用户的登录状态

视图组件由两个部分组成：

• 类，通常派生自 ViewComponent
• 它返回的结果，通常是视图。

与控制器一样，视图组件可以是 POCO，但大多数开发人员利用派生自 ViewComponent的方法和属性。
在考虑视图组件是否符合应用的规范时，请考虑改用 Razor 组件。 Razor 组件还将标记与 C# 代码组合来生成可重用的 UI 单元。 Razor 组件专用于让开发人员在提供客户端 UI 逻辑和组合时保持高效。 有关详细信息，请参阅 ASP.NET Core 组件。 有关如何将组件合并Razor到 MVC 或 Razor Pages 应用中的信息，请参阅预呈现和集成 ASP.NET CoreRazor组件。

参考链接。

调用页面

index.cshtml

<div class="container">
   @await Component.InvokeAsync("PartialView",new{a = 1, b = true})
</div>

PartialUserViewComponent.cs

using Cnpc.Com.Ioc.IBll;
using Microsoft.AspNetCore.Mvc;

namespace DotNetCore.Mvc.Demo.Compoents
{
    [ViewComponent(Name = "PartialView")]
    public class PartialUserViewComponent : ViewComponent
    {
        IUserServices _user;
        public PartialUserViewComponent(IUserServices user)
        {
            _user = user;
        }

        public async Task<IViewComponentResult> InvokeAsync(int a, bool b)
        {
            return await Task.FromResult(View("PartialUserView", _user.GetUsers()));
        }
    }
}

IUserServices.cs

• 简单的返回一个集合用作测试

PartialUserView.cshtml

注意

• 文件创建
  • Views -> Shared -> Components(必须这个名字) -> PartialView(与ViewComponent特性标注的名字一致) -> PartialUserView

@using Cnpc.Com.Ioc.Bean;
@model List<User>

@{
    foreach (var item in Model)
    {
        <h1>@item.ToString()</h1>
    }
}