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 = });
}
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(, days);
}
_memoryCache.Set(cacheKey,items,TimeSpan.FromMinutes());
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 ...
- ASP.NET Core MVC 之视图(Views)
ASP.NET Core MVC 控制器可以使用视图返回格式化的结果. 1.什么是视图 在 MVC 中,视图封装了用户与应用交互呈现细节.视图是具有生成要发送到客户端内容的,包含嵌入代码的HTML模板 ...
- ASP.NET Core 入门教程 7、ASP.NET Core MVC 分部视图入门
一.前言 1.本教程主要内容 ASP.NET Core MVC (Razor)分部视图简介 ASP.NET Core MVC (Razor)分部视图基础教程 ASP.NET Core MVC (Raz ...
- ASP.NET Core 入门笔记8,ASP.NET Core MVC 分部视图入门
一.前言 1.本教程主要内容 ASP.NET Core MVC (Razor)分部视图简介 ASP.NET Core MVC (Razor)分部视图基础教程 ASP.NET Core MVC (Raz ...
- [译]ASP.NET Core 2.0 视图组件
问题 如何在ASP.NET Core 2.0中使用视图组件? 答案 新建一个空项目,修改Startup类并添加MVC服务和中间件: public void ConfigureServices(ISer ...
- ASP.NET Core MVC 之依赖注入 View
ASP.NET Core 支持在试图中使用依赖注入.这将有助于提供视图专用的服务,比如本地化或者仅用于填充视图元素的数据.应尽量保持控制器和视图之间的关注点分离.视图所显示的大部分数据应该从控制器传入 ...
- #asp.net core mvc 的视图注入
View injection is the most useful feature introduced in ASP.NET Core. 1.添加一个FruitsService public cla ...
- ASP.NET Core MVC 视图
ASP.NET Core MVC中视图的知识和ASP.NET MVC有很多相似之处,学习难度较低.以下内容主要体现了编程中模块化的思想,模块化才应是我们关注的重点. Layout 布局用于提供各个页面 ...
- ASP.NET Core 入门教程 6、ASP.NET Core MVC 视图布局入门
一.前言 1.本教程主要内容 ASP.NET Core MVC (Razor)视图母版页教程 ASP.NET Core MVC (Razor)带有Section的视图母版页教程 ASP.NET Cor ...
随机推荐
- 什么是JS跨域请求
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- 一套简单的web即时通讯——第三版
前言 接上版,本次版本做了如下优化: 1.新增同意.拒绝添加好友后做线上提示: 2.新增好友分组,使用工具生成后台API,新增好友分组功能,主要功能有:添加分组.重命名分组名称.删除分组 3.新增好友 ...
- CSU 1320:Scoop water(卡特兰数)
http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1320 题意:……是舀的时候里面必须要有1L,而不是舀完必须要有1L. 思路:才知道是卡特兰数. 这 ...
- InnoDB存储引擎--学习笔记-redo log
目录 1. 引言 2. 重做日志文件和相关概念介绍 + 2.1. 重做日志文件和bin log + 2.2. LSN(log squence number) 3. 重做日志文件基本工作原理 4. 重做 ...
- 【深入浅出-JVM】(5):Java 虚拟机结构
Java 虚拟机基本结构 Java 堆 新生代.老年代划分 栈帧 感谢您的耐心阅读,如果您发现文章中有一些没表述清楚的,或者是不对的地方,请给我留言,您的鼓励是作者写作最大的动力. 作 者 : @mo ...
- 『开发技术』Docker开发教程(一)安装与测试(Windows 家庭版)
0.前言 针对其他系统和版本,Docker都很容易安装,可以参考官方教程:https://docs.docker.com/docker-hub/ 由于Windows10家庭版无法安装docker,因此 ...
- Java NIO学习系列四:NIO和IO对比
前面的一些文章中我总结了一些Java IO和NIO相关的主要知识点,也是管中窥豹,IO类库已经功能很强大了,但是Java 为什么又要引入NIO,这是我一直不是很清楚的?前面也只是简单提及了一下:因为性 ...
- MMM 状压dp学习记
状压dp学习记 by scmmm 开始日期 2019/7/17 前言 状压dp感觉很好理解(本质接近于爆搜但是又有广搜的感觉),综合了dp的高效性(至少比dfs,bfs优),又能解决普通dp难搞定的问 ...
- 【最小生成树之Kruskal算法】
看完之后推荐再看一看[最小生成树之Prim算法]-C++ 定义:一个有 n 个结点的连通图的生成树是原图的极小连通子图,且包含原图中的所有 n 个结点,并且有保持图连通的最少的边.最小生成树可以用kr ...
- 【模拟】(正解树状数组)-校长的问题-C++-计蒜客
描述 学校中有 n 名学生,学号分别为 1 - n.再一次考试过后,学校按照学生的分数排了一个名次(分数一样,按照名字的字典序排序).你是一名老师,你明天要和校长汇报这次考试的考试情况,校长询问的方式 ...