ASP.NET Core 中文文档 第四章 MVC(3.9)视图组件
作者: Rick Anderson
翻译: 娄宇(Lyrics)
校对: 高嵩
章节:
- 介绍视图组件
- 创建视图组件
- 调用视图组件
- 演练:创建一个简单的视图组件
- 附加的资源
查看或下载示例代码
介绍视图组件
视图组件是 ASP.NET Core MVC 中的新特性,与局部视图相似,但是它们更加的强大。视图组件不使用模型绑定,只取决于调用它时所提供的数据。视图组件有以下特点:
- 渲染一个块,而不是整个响应
- 在控制器和视图之间同样包含了关注点分离和可测试性带来的好处
- 可以拥有参数和业务逻辑
- 通常从布局页调用
视图组件可以用在任何需要重复逻辑且对局部视图来说过于复杂的情况,比如:
- 动态导航菜单
- 标签云 (需要从数据库查询时)
- 登录面板
- 购物车
- 最近发表的文章
- 一个典型博客的侧边栏内容
- 会在所有页面渲染的登录面板,根据用户登录状态显示登录或者注销
一个 视图组件 包含两个部分,类(通常派生自 ViewComponent
)和它返回的结果(通常是一个视图)。类似控制器,视图组件可以是 POCO 类型,但是大部分开发者想要使用派生自 ViewComponent
的方法和属性。
创建视图组件
这个章节包含创建视图组件的高级需求。在稍后的文章中,我们将详细地检查每一个步骤,并创建一个视图组件。
视图组件类
一个视图组件类可以由以下任何一个方式创建:
- 派生自
ViewComponent
- 使用
[ViewComponent]
特性装饰一个类,或者这个类的派生类。 - 创建一个类,并以 ViewComponent 作为后缀。
如同控制器一样,视图组件必须是公开的,非嵌套的,以及非抽象的类。视图组件名称是类名并去掉“ViewComponent”后缀。也可以通过 ViewComponentAttribute.Name 属性进行明确的指定。
一个视图组件类:
- 完全支持构造函数依赖注入
- 不参与控制器生命周期,意味着你不能在视图组件中使用过滤器
视图组件方法
视图组件在 InvokeAsync
方法中中定义逻辑,并返回 [IViewComponentResultIViewComponentResult。参数直接来自视图组件的调用,而不是来自模型绑定。视图组件从来不直接处理请求。通常视图组件初始化模型并通过调用 View方法传递它到视图。总之,视图组件方法有以下特点:
- 定义一个
InvokeAsync
方法并返回IViewComponentResult
- 通常初始化模型并通过调用ViewComponent View方法传递它到视图
- 参数来自调用方法,而不是 HTTP,没有模型绑定
- 不可直接作为 HTTP 终结点,它们从你的代码中调用(通常在视图中)。视图组件从不处理请求
- 重载的签名,而不是当前 HTTP 请求中的任何细节
视图搜索路径
运行时对视图的搜索路径如下:
- Views//Components//
- Views/Shared/Components//
视图组件默认的视图名是 Default,意味着通常你的视图文件会命名为 Default.cshtml。当你创建视图组件结果或者调用 View
方法的时候,你可以指定不同的视图名。
我们建议你命名视图文件为 Default.cshtml 并且使用 Views/Shared/Components// 路径。在这个例子中使用的 PriorityList
视图组件使用了 Views/Shared/Components/PriorityList/Default.cshtml 这个路径。
调用视图组件
要使用视图组件,从视图中调用 @Component.InvokeAsync("视图组件名", <匿名类型参数>)
。参数将传递给 InvokeAsync
方法。在文章中开发的 PriorityList
视图组件被 Views/Todo/Index.cshtml 视图文件调用。在下面,使用了两个参数调用 InvokeAsync
方法:
@await Component.InvokeAsync("PriorityList", new { maxPriority = 2, isDone = false })
从控制器直接调用视图组件
视图组件通常从视图中调用,但是你也可以从控制器方法中直接调用。当视图组件没有像控制器一样定义终结点时,你可以简单实现一个控制器的 Action ,并使用一个 ViewComponentResult作为返回内容。
在这例子中,视图组件通过控制器直接调用:
public IActionResult IndexVC(){return ViewComponent("PriorityList", new { maxPriority = 3, isDone = false });}
演练:创建一个简单的视图组件
下载,生成并测试启动代码。这是一个简单的项目,使用一个 Todo
控制器来显示 Todo 项列表。
添加一个视图组件类
创建一个 ViewComponents 文件夹并添加下面的 PriorityListViewComponent
类。
using Microsoft.AspNet.Mvc;
using Microsoft.Data.Entity;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using ViewComponentSample.Models;namespace ViewComponentSample.ViewComponents
{public class PriorityListViewComponent : ViewComponent{private readonly ToDoContext db;public PriorityListViewComponent(ToDoContext context){db = context;}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();} }
}
代码注释:
- 视图组件类可以被放在项目中 任何 文件夹内。
- 因为类命名为
PriorityListViewComponent
,以 ViewComponent 作为后缀结束,在运行时会从视图中使用 "PriorityList" 字符串来引用组件类。我会在后面详细解释。 [ViewComponent]
特性可以改变被用来引用视图组件的名字。比如,我们可以命名类为XYZ
,然后应用ViewComponent
特性:
[ViewComponent(Name = "PriorityList")]
public class XYZ : ViewComponent
- 上面的
[ViewComponent]
特性告知视图组件选择器在寻找与组件相关的视图时使用名字PriorityList
,并且在从视图中引用组件类时使用 "PriorityList" 字符串。我会在后面详细解释。 - 组件使用依赖注入使得数据上下文可用。
InvokeAsync
暴露一个可以在视图中调用的方法,并且它可以接受任意数量的参数。InvokeAsync
方法返回没有完成并优先级小于等于maxPriority
的ToDo
项的集合。
创建视图组件 Razor 视图
- 创建 Views/Shared/Components 文件夹。这个文件夹 必须 命名为 Components。
- 创建 Views/Shared/Components/PriorityList 文件夹。这个文件夹必须和视图组件类名字匹配,或者是类名去掉后缀(如果我们遵循了约定并且使用 ViewComponent 作为类名后缀)。如果你使用
ViewComponent
特性,类名需要匹配特性中指定的名字。 - 创建一个 Views/Shared/Components/PriorityList/Default.cshtml Razor 视图。
@model IEnumerable<ViewComponentSample.Models.TodoItem><h3>Priority Items</h3>
<ul>@foreach (var todo in Model){<li>@todo.Name</li>}
</ul>
Razor 视图取一组 TodoItem
并显示它们。如果视图组件的 InvokeAsync
方法没有传递视图名(就像我们例子中),按照约定会使用 Default 作为视图名。在教程的后面部分,我会告诉你如何传递视图的名称。为特定控制器重写默认的样式,添加一个视图到特定控制器的视图文件夹(比如 Views/Todo/Components/PriorityList/Default.cshtml)。
如果视图组件是特定控制器的,你可以添加到特定控制器文件夹(Views/Todo/Components/PriorityList/Default.cshtml)。
- 在 Views/Todo/index.cshtml 文件底部添加一个
div
包含调用 PriorityList 组件:
}
</table>
<div >@await Component.InvokeAsync("PriorityList", new { maxPriority = 2, isDone = false })
</div>
标记 @Component.InvokeAsync
展示了调用视图组件的语法。第一个参数是我们想要调用的组件名。随后的参数传递给组件。InvokeAsync
可以接受任意数量的参数。
下面的图片显示了 Priority 项:
你也可以从控制器直接调用视图组件:
public IActionResult IndexVC()
{return ViewComponent("PriorityList", new { maxPriority = 3, isDone = false });
}
指定视图名
一个复杂的视图组件在某些条件下可能需要指定非默认的视图。下面的代码展示如何从 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
</table><div>@await Component.InvokeAsync("PriorityList", new { maxPriority = 4, isDone = true })
</div>
运行应用程序并验证 PVC 视图。
如果 PVC 视图没有渲染,请验证你是否使用 4 或者更高 priority 参数来调用视图组件。
检查视图路径
- 改变 priority 参数到 3 或者更低,使得不返回优先级视图。
- 暂时重命名 Views/Todo/Components/PriorityList/Default.cshtml 为 Temp.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.
Microsoft.AspNetCore.Mvc.ViewEngines.ViewEngineResult.EnsureSuccessful()- 复制 Views/Shared/Components/PriorityList/Default.cshtml 到 Views/Todo/Components/PriorityList/Default.cshtml。
- 添加一些标记到 Todo 视图组件视图来表明视图是来自 Todo 文件夹。
测试 非共享 组件视图。
避免魔法字符串
如果你想编译时安全你可以用类名替换硬编码视图组件名。创建视图组件不以 "ViewComponent" 作为后缀:
using Microsoft.AspNet.Mvc;
using Microsoft.Data.Entity;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using ViewComponentSample.Models;namespace ViewComponentSample.ViewComponents
{public class PriorityList : ViewComponent // 手动高亮{private readonly ToDoContext db;public PriorityList(ToDoContext context) // 手动高亮{db = context;}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();}}
}
添加一个 using
语句到你的 Razor 视图文件并使用 nameof
操作符:
@using ViewComponentSample.Models
@using ViewComponentSample.ViewComponents
@model IEnumerable<TodoItem><h2>ToDo nameof</h2>
<!-- Markup removed for brevity. -->}
</table><div>@await Component.InvokeAsync(nameof(PriorityList), new { maxPriority = 4, isDone = true })
</div>
附加的资源
- 依赖注入
- ViewComponent
返回目录
转载于:https://www.cnblogs.com/dotNETCoreSG/p/aspnetcore-4_3_9-view-component.html
ASP.NET Core 中文文档 第四章 MVC(3.9)视图组件相关推荐
- ASP.NET Core 中文文档 第四章 MVC(4.2)控制器操作的路由
原文:Routing to Controller Actions 作者:Ryan Nowak.Rick Anderson 翻译:娄宇(Lyrics) 校对:何镇汐.姚阿勇(Dr.Yao) ASP.NE ...
- ASP.NET Core 中文文档 第四章 MVC(4.3)过滤器
原文:Filters 作者:Steve Smith 翻译:刘怡(AlexLEWIS) 校对:何镇汐 ASP.NET MVC 过滤器 可在执行管道的前后特定阶段执行代码.过滤器可以配置为全局有效.仅对控 ...
- ASP.NET Core 中文文档 第四章 MVC(2.2)模型验证
原文:Model Validation 作者:Rachel Appel 翻译:娄宇(Lyrics) 校对:孟帅洋(书缘) 在这篇文章中: 章节: 介绍模型验证 验证 Attribute 模型状态 处理 ...
- ASP.NET Core 中文文档 第三章 原理(5)错误处理
原文:Error Handling 作者:Steve Smith 翻译:谢炀(Kiler) 校对:高嵩(jack2gs).何镇汐 当你的ASP.NET应用发生错误的时候, 你可以采用本文所述的各种方法 ...
- ASP.NET Core 中文文档 第三章 原理(3)静态文件处理
原文:Working with Static Files 作者:Rick Anderson 翻译:刘怡(AlexLEWIS) 校对:谢炀(kiler398).许登洋(Seay).孟帅洋(书缘) 静态文 ...
- ASP.NET Core 中文文档 第三章 原理(13)管理应用程序状态
原文:Managing Application State 作者:Steve Smith 翻译:姚阿勇(Dr.Yao) 校对:高嵩 在 ASP.NET Core 中,有多种途径可以对应用程序的状态进行 ...
- ASP.NET Core 中文文档 第三章 原理(1)应用程序启动
原文:Application Startup 作者:Steve Smith 翻译:刘怡(AlexLEWIS) 校对:谢炀(kiler398).许登洋(Seay) ASP.NET Core 为你的应用程 ...
- ASP.NET Core 中文文档 第三章 原理(12)托管
原文:Hosting 作者:Steve Smith 翻译:娄宇(Lyrics) 校对:何镇汐.许登洋(Seay) 为了运行 ASP.NET Core 应用程序,你需要使用 WebHostBuilder ...
- ASP.NET Core 中文文档 第三章 原理(2)中间件
原文:Middleware 作者:Steve Smith and Rick Anderson 翻译:刘怡(AlexLEWIS) 校对:许登洋(Seay) 章节: 什么是中间件 用 IApplicati ...
最新文章
- 生产管理要点:快执行、高品质、看板追踪!
- WPF学习总结1:INotifyPropertyChanged接口的作用
- 用python中函数输出杨辉三角_用Python输出一个杨辉三角的例子
- Linux之Qt利用Sqlite静态编译库(转)
- 什么是H标签?H1,H2,H3标签?以及和strong标签使用的方法及重要性
- matlab求微分数值,用MATLAB语言求微积分方程的数值解.(xd^2y)/dx^2-5dy/dx+y=0y(0)=0y'(0)=0...
- c语言10-100000取整数,100个C语言地编程题.docx
- SQL 使用总结五(杂记)
- .net开发中常用的第三方组件
- UGUI 与 Spine 的完美结合
- 【软件测试从入门到放弃】熟悉阶段:软件测试流程
- 由一道题目引发的为稳定与不稳定的排序思路
- QWidget QMainWindow QDialog 三者区别
- 如何做好离职交接工作?
- p6spy 简单使用
- 我的Unity工具类---对象池
- MA均线指标详解、价托、量托
- 测试开发工作者日记:(楚汉传奇-it职场)2020.6.24-6.27
- Robotstudio基础教程之系统创建
- python 小学生教材全解_小学六年级教材全解