ASP.NET Core中的Razor页面使用视图组件

2022-04-17 03:49:56

视图组件简介

在新的ASP.NET Core MVC中,视图组件类似于局部视图,但它们更强大。视图组件不使用模型绑定,仅依赖于您在调用时提供的数据。

视图组件特性:

呈现页面响应的某一部分而不是整个响应包括在控制器和视图之间发现的关注分离和可测试性优势可以具有参数和业务逻辑通常在页面布局中调用

视图组件是在任何地方可重用的呈现逻辑,对于局部视图来说相对复杂,例如:

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

视图组件由两部分组成:类(通常继承自ViewComponent)和返回的结果(通常是视图)。像控制器一样,视图组件可以是POCO,但大多数开发人员都希望利用从ViewComponent继承的方法和属性。

创建视图组件

此部分包含创建视图组件的高级功能。在本文的后面,我们将详细介绍每一个步骤,并创建一个视图组件。

视图组件类

视图组件类可以通过以下任何方式来创建:

继承自 ViewComponent 类使用[ViewComponent]特性来标记一个类,或者继承自具有[ViewComponent]特性的类创建类的名称以 ViewComponent 后缀结尾

与控制器一样,视图组件必须是公共、非嵌套、非抽象类。视图组件名称是删除“ViewComponent”后缀的类名称,也可以使用ViewComponentAttribute.Name属性显式指定名称。

视图组件类特性:

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

视图组件方法

视图组件在InvokeAsync方法中定义逻辑,并返回IViewComponentResult类型。参数直接来自视图组件的调用,而不是模型绑定;视图组件从不直接处理请求;通常视图组件会初始化模型,并通过调用View方法将其传递给视图。总而言之,视图组件方法特性:text; } public async Task<IViewComponentResult> InvokeAsync(int maxPriority, bool isDone) { var items = await GetItemsAsync(maxPriority, isDone); return View(items); } private Task<List<TodoItem>> GetItemsAsync(int maxPriority, bool isDone) { return db.ToDo.Where(x => x.IsDone == isDone && x.Priority <= maxPriority).ToListAsync(); } }}

代码注意事项:

视图组件类可以包含在项目中的语法。第一个参数是我们要调用组件的名称,随后是传递给组件的参数。InvokeAsync可以包含任意数量的参数。

调试应用程序,下图显示了ToDo列表和选择项:

ASP.NET Core中的Razor页面使用视图组件

您也可以直接在控制器中调用视图组件:

  cXRSG  public IActionResult IndexVC()    {        return ViewComponent("PriorityList", new { maxPriority = 3, isDone = false });    }

ASP.NET Core中的Razor页面使用视图组件

指定视图名称

复杂视图组件可能需要在某些情况下指定非默认视图。以下代码显示了如何从InvokeAsync方法中指定“PVC”视图。修改PriorityListViewComponent类中的InvokeAsync方法。

    public async Task<IViewComponentResult> InvokeAsync(int maxPriority, bool isDone)    {        string MyView = "Default";        // If asking for all completed tasks, render with the "PVC" view.        if (maxPriority > 3 && isDone == true)        {            MyView = "PVC";        }        var items = await GetItemsAsync(maxPriority, isDone);        return View(MyView, items);    }

将 Views/Shared/Components/PriorityList/Default.cshtml 文件复制到名为 Views/Shared/Components/PriorityList/PVC.cshtml 视图文件。添加标题以表示正在使用的是PVC视图。

@model IEnumerable<ViewComponentSample.Models.TodoItem><h2> PVC Named Priority Component View</h2><h4>@ViewBag.PriorityMessage</h4><ul>    @foreach (var todo in Model)    {        <li>@todo.Name</li>    }</ul>

修改视图 Views/TodoList/Index.cshtml:

    @await Component.InvokeAsync("PriorityList", new { maxPriority = 4, isDone = true })

运行应用程序并验证是PVC视图。

ASP.NET Core中的Razor页面使用视图组件

如果显示不是PVC视图,请验证您调用视图组件priority参数是否为4或更高的。

检测视图路径

priority参数更改为三个或更小,返回默认视图。临时将 Views/Todo/Components/PriorityList/Default.cshtml 重命名为 1Default.cshtml。调试应用程序,您将收到以下错误:

An unhandled exception occurred while processing the request.
InvalidOperationException: The view 'Components/PriorityList/Default' was not found. The following locations were searched:
/Views/ToDo/Components/PriorityList/Default.cshtml
/Views/Shared/Components/PriorityList/Default.cshtml
EnsureSuccessful

将视图 Views/Todo/Components/PriorityList/1Default.cshtml 复制到 Views/Shared/Components/PriorityList/Default.cshtml 。在 Shared 的Todo视图组件视图中添加一些标记,以表示视图来自 Shared 文件夹。测试 ty, bool isDone) { var items = await GetItemsAsync(maxPriority, isDone); return View(items); } private Task<List<TodoItem>> GetItemsAsync(int maxPriority, bool isDone) { return db.ToDo.Where(x => x.IsDone == isDone && x.Priority <= maxPriority).ToListAsync(); } }}

使用using将命名空间添加到您的Razor视图文件,并使用nameof运算符:

@using ViewComponentSample.Models@using ViewComponentSample.ViewComponents@model IEnumerable<TodoItem><h2>ToDo nameof</h2><div>    @await Component.InvokeAsync(nameof(PriorityList), new { maxPriority = 4, isDone = true })</div>

其它资源

依赖注入视图查看或下载示例代码

到此这篇关于ASP.NET Core中的Razor页面使用视图组件的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持我们。