ASP.NET Core MVC 之视图组件(View Component)
1.视图组件介绍
视图组件是 ASP.NET Core MVC 的新特性,类似于局部视图,但它更强大。视图组件不使用模型绑定,并且仅依赖于调用它时所提供的数据。
视图组件特点:
- 呈块状,而不是整个响应
- 包括在控制器和视图之间发现的相同的关注点和可测试性优点
- 可以拥有参数和业务逻辑
- 通常从布局页面调用
视图组件可以用在任何需要重复逻辑且对局部视图来说过于复杂的情况,例如:
- 动态导航菜单
- 标签云(需要查询数据库)
- 登录面板
- 购物车
- 最近发表的文章
- 典型博客上的侧边栏内容
- 将在每个页面上呈现的登录面板,根据用户的登录状态显示注销或者登录的链接
视图组件有两部分组成,类(通常派生自 ViewComponent
)和它返回的结果(通常是一个视图)。与控制器一样,视图组件可以是POCO
,但大多数是利用 ViewComponent
派生的方法和属性。
2.创建视图组件
(1)视图组件类
一个视图组件类通常可以通过以下任一方式创建:
- 派生自
ViewComponent
- 使用
[ViewComponent]
属性装饰类,或从具有[ViewComponent]
属性的类派生 - 创建一个名称后缀为
ViewComponent
结尾的类
像控制器一样,视图组件必须是 public
,非嵌套和非抽象类。视图组件名称是删除了 ViewComponent
后缀的类名,可以使用 ViewComponentAttribute.Name
属性显示指定。
视图组件类优点:
- 完全支持构造函数依赖注入
- 不参与控制器生命周期,这意味着不能在视图组件中使用过滤器
(2) 视图组件方法
视图组件在 InvokeAsync
方法中定义其逻辑,并返回 IViewComponentResult
。参数直接来自视图组件的调用,而不是来自模型绑定。视图组件从不直接处理请求。通常,视图组件通过调用 View
方法初始化模型并将其传递给视图。总之,视图组件有以下特点:
- 定义一个
InvokeAsync
方法并返回IViewComponentResult
。 - 通常通过调用
ViewComponent
View 方法初始化模型并将其传递给视图。 - 参数来自调用方法,而不是 HTTP,没有模型绑定。
- 不能直接作为 HTTP 端点访问,它是从你的代码(通常在视图中)调用的。视图组件不处理请求。
- 在签名上重载,而不是当前 HTTP 请求的任何细节。
(3) 视图搜索路径
运行时在以下路径搜索视图:
Views/<controller_name>/Components/<view_component_name>/<view_name>
Views/Shared/Components/<view_component_name>/<view_name>
视图组件的默认视图名称是 Default
,这意味着你的视图文件通常名为 Default.cshtml
。你可以在创建视图组件结果或调用 View
方法时指定其他的视图名称。
3.调用视图组件
要使用视图组件,请从视图中调用 @Component.InvokeAsync("视图组件名称",<匿名参数>)
。参数将传递到 InvokeAsync
方法。如下:
@await Component.InvokeAsync("TopicRankList",new { days=5})
视图组件通常从视图中调用,但也可以从控制器方法中直接调用,虽然视图组件不像控制器那样定义终结点。
public ActionResult Index()
{return ViewComponent("TopicRankList", new { days = 5 });
}
4.实战视图组件
添加一个 ViewCompoents
文件夹,然后添加 UserRankList
类:
public class UserRankList : ViewComponent
{private readonly DataContext _db;private IMemoryCache _memoryCache;private string cacheKey = "topicrank";public UserRankList(DataContext db, IMemoryCache memoryCache){_db = db;_memoryCache = memoryCache;}public IViewComponentResult Invoke(int days){var items = new List<User>();if (!_memoryCache.TryGetValue(cacheKey, out items)){items = GetRankUsers(10, days);}_memoryCache.Set(cacheKey,items,TimeSpan.FromMinutes(10));return View(items);}private List<User> GetRankUsers(int top, int days){return _db.User.OrderBy(o => o.Id).Take(top).ToList();}
}
视图组件类可以在项目的任何文件夹中。 [ViewComponent]
特性可以更改用于引用视图组件的名称,例如,可以命名类为 XYZ,并应用 [ViewComponent]
特性:
[ViewComponent(Name="UserRankTop")]
public calss XYZ:ViewComponent
Invoke
方法返回列表,然后创建视图组件视图。
创建 View/Shared/Components
文件夹。这个文件夹必须名为 Components
。然后在里面创建 UserRankList
文件夹,添加 Default.cshtml
视图:
@model List<MVCTest.Models.User><h2>user</h2>
<div class="list-group">@foreach (var item in Model){<label>@item.Name</label>}
</div>
最后在视图中调用:@await Component.InvokeAsync("UserRankList", new { days=5})
ASP.NET Core MVC 之视图组件(View Component)相关推荐
- ASP.NET Core MVC – Tag Helper 组件
ASP.NET Core Tag Helpers系列目录,这是第五篇,共五篇: ASP.NET Core MVC – Tag Helpers 介绍 ASP.NET Core MVC – Caching ...
- core 读取视图html,ASP.NET Core MVC 之视图(Views)
摘要: ewData之间可以混合使用. 2.动态视图 不声明类型,但具有传递给它们的模型实例的视图可以动态引用此实例.但不提供任何编译保护或IntelliSense.如果属性不存在,则页面将在运行 ...
- ASP.NET Core MVC 之依赖注入 View
ASP.NET Core 支持在试图中使用依赖注入.这将有助于提供视图专用的服务,比如本地化或者仅用于填充视图元素的数据.应尽量保持控制器和视图之间的关注点分离.视图所显示的大部分数据应该从控制器传入 ...
- ASP.NET Core MVC 视图
ASP.NET Core MVC中视图的知识和ASP.NET MVC有很多相似之处,学习难度较低.以下内容主要体现了编程中模块化的思想,模块化才应是我们关注的重点. 布局用于提供各个页面所需的公共部分 ...
- ASP.NET Core 入门教程 6、ASP.NET Core MVC 视图布局入门
一.前言 1.本教程主要内容 ASP.NET Core MVC (Razor)视图母版页教程 ASP.NET Core MVC (Razor)带有Section的视图母版页教程 ASP.NET Cor ...
- ASP.NET Core 入门教程 6、ASP.NET Core MVC 视图布局入门 1
ASP.NET Core 入门教程 6.ASP.NET Core MVC 视图布局入门 原文:ASP.NET Core 入门教程 6.ASP.NET Core MVC 视图布局入门 一.前言 1.本教 ...
- 这本694页的程序员砖头书让你精通ASP.NET Core MVC
ASP.NET Core MVC是一个来自微软的Web应用程序开发框架,它结合了模型-视图-控制器(MVC)体系结构的有效性和整洁性.敏捷开发的想法和技术,以及.NET平台的最佳部分. 1.1 ASP ...
- ASP.NET Core MVC – Caching Tag Helpers
ASP.NET Core Tag Helpers系列目录,这是第二篇,共五篇: ASP.NET Core MVC – Tag Helpers 介绍 ASP.NET Core MVC – Caching ...
- ASP.NET Core MVC I\/O编程模型
1.1. I/O编程模型浅析 服务器端编程经常需要构造高性能的IO模型,常见的IO模型有四种: (1)同步阻塞IO(Blocking IO):即传统的IO模型. (2)同步非阻塞IO(Non-bloc ...
最新文章
- PHP替换字符串函数strtr()和str_replace()
- appium1.6在mac上环境搭建启动ios模拟器上Safari浏览器 转自:上海-悠悠
- 解决vue中对象属性改变视图不更新的问题
- string包含某个字符串_Tcl字符串操作基础2
- 1082 射击比赛 (20 分)
- logstash-input-redis源码解析
- Shell学习之结合正则表达式与通配符的使用(五)
- 《Ruby程序员修炼之道》(第2版)—第1章1.1节进入Ruby的世界
- SSMS 18.0运行时闪退
- 软考:软件设计师(历年真题汇总)|希赛网
- cad转shp 奥维_CAD转化为Shp
- 教育培训行业的SOP
- A+B Problem——经典中的经典
- 常见的计算机专业相关词汇汇总
- 三分钟带你了解,什么是地理信息系统(GIS)
- 小强升职记梗概_《小强升职记》读书笔记一
- A系列RPG地图编辑器发布,终于可以编辑地图了
- 选择控制结构if连用时的易错点
- python实现通讯录管理系统_python练习(通讯管理程序)
- bluez协议栈图解
热门文章
- 解决UnknownError: Failed to get convolution algorithm. This is probably because cuDNN failed to initia
- [BZOJ4180] 字符串计数
- 杜教筛时间复杂度证明
- 杜伽键盘k320w断流、固件升级问题与修复
- 学编程很枯燥_技术文档不必很枯燥
- 论文阅读【6】Autoaugment: Learning augmentation strategies from data
- [ FI基本业务流程 ] - Accounts Payable基础知识
- unity3D 移动平台性能优化
- ad 卡尔曼_理解卡尔曼五个方程
- 中国大陆收货地址智能解析