解读ASP.NET 5 MVC6系列(14):View Component

原文:解读ASP.NET 5 & MVC6系列(14):View Component

在之前的MVC中,我们经常需要类似一种小部件的功能,通常我们都是使用Partial View来实现,因为MVC中没有类似Web Forms中的WebControl的功能。但在MVC6中,这一功能得到了极大的改善。新版MVC6中,提供了一种叫做View Component的功能。

你可以将View Component看做是一个mini的Controller——它只负责渲染一小部分内容,而非全部响应,所有Partial View能解决的问题,你都可以使用View Component来解决,比如:动态导航菜单、Tag标签、登录窗口、购物车、最近阅读文章等等。

View Component包含2个部分,一部分是类(继承于ViewComponent),另外一个是Razor视图(和普通的View视图一样)。就像新版MVC中的Controller一样,ViewComponent也可以使POCO的(即不继承ViewComponent类,但类名以ViewComponent结尾)。

View Component的创建

目前,View Component类的创建方式有如下三种:

  1. 直接继承于ViewComponent
  2. 给类加上ViewComponent特性,或继承于带有ViewComponent特性的类
  3. 创建一个类,类名以ViewComponent结尾

和Controller一样,View Component必须是public的,不能嵌套,不能是抽象类。

举例来说,我们创建一个View Component,类名为TopListViewComponent,代码如下:

public class TopListViewComponent : ViewComponent
{private readonly ApplicationDbContext db;public TopListViewComponent(ApplicationDbContext context){db = context;}public IViewComponentResult Invoke(int categoryId, int topN){List<string> col = new List<string>();var items = db.TodoItems.Where(x => x.IsDone == false &&x.categoryId == categoryId).Take(topN);return View(items);}
}

上述类,也可以定义成如下这样:

[ViewComponent(Name = "TopList")]
public class TopWidget
{// 其它类似
}

通过在TopWidget类上定义一个名称为TopList的ViewComponent特性,其效果和定义TopListViewComponent类一样,系统在查找的时候,都会认可,并且在其构造函数中通过依赖注入功能提示构造函数中参数的类型实例。

Invoke方法是一个约定方法,可以传入任意数量的参数,系统也支持InvokeAsync方法实现异步功能。

View Component的视图文件创建

以在ProductController的视图里调用View Component为例,我们需要在Views\Product文件夹下创建一个名称为Components的文件夹(该文件夹名称必须为Components)。

然后在Views\Product\Components文件夹下创建一个名称为TopList 的文件夹(该文件夹名称必须和View Component名称一致,即必须是TopList)。

Views\Product\Components\TopList文件夹下,创建一个Default.cshtml视图文件,并添加如下标记:

@model IEnumerable<BookStore.Models.ProductItem><h3>Top Products</h3>
<ul>@foreach (var todo in Model){<li>@todo.Title</li>}
</ul>

如果再View Component中,没有指定视图的名称,将默认为Default.cshtml视图。

至此,该View Component就创建好了,你可以在Views\Product\index.cshtml视图中的任意位置调用该View Component,比如:

  <div class="col-md-4">@Component.Invoke("TopList", 1, 10)  </div>

如果在上述TopListViewComponent中定义的是异步方法InvokeAsync的话,则可以使用@await Component.InvokeAsync()方法来调用,这两个方法的第一个参数都是TopListViewComponent的名称,剩余的参数则是在TopListViewComponent类中定义的方法参数。

注意:一般来说,View Component的视图文件都是添加在Views\Shared文件夹的,因为一般来说ViewComponent不会特定于某个Controller。

使用自定义视图文件

一般来说,如果要使用自定义文件,我们需要在Invoke的方法返回返回值的时候来指定视图的名称,示例如下:

return View("TopN", items);

那么,就需要创建一个Views\Product\Components\TopN.cshtml文件,而使用的时候则无需更改,还是指定原来的View Component名称即可,比如:

@await Component.InvokeAsync("TopList",  1, 10)  //以异步调用为例

总结

一般来说,建议在通用的功能上使用View Component的功能,这样所有的视图文件都可以放在Views\Shared文件夹了。

同步与推荐

本文已同步至目录索引:解读ASP.NET 5 & MVC6系列

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/460138.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql+根密码是什么意思,重设MySQL根密码

我已经继承了安装了mysql的服务器。我没有任何用户的mysql密码&#xff0c;甚至不是root(虽然我有linux root密码)。另外&#xff0c;我只知道另外一个用户帐号包含root&#xff0c;而且没有权限执行任何动作&#xff0c;甚至没有SELECT。我尝试停止mysql servicw&#xff0c;重…

Android深入浅出之Binder机制(转)

Android深入浅出之Binder机制 一 说明 Android系统最常见也是初学者最难搞明白的就是Binder了&#xff0c;很多很多的Service就是通过Binder机制来和客户端通讯交互的。所以搞明白Binder的话&#xff0c;在很大程度上就能理解程序运行的流程。 我们这里将以MediaService的例子来…

Java 8新特性(二)

2019独角兽企业重金招聘Python工程师标准>>> 集合类的批处理&#xff1a; Java8除了Lambda表达式外还提供了另一个重要的特性&#xff0c;即集合的批处理操作&#xff0c;集合类的批处理操作API的目的是实现集合类的“内部迭代”&#xff0c;并期望充分利用现代多核…

matlab功能块,Matlab GUI重用功能块

我在GUIDE中创建了一个带有两个可编辑文本框和四个静态文本框的Matlab GUI用户在两个可编辑的文本框(e1和e2)中输入值,并根据这些值计算应在静态文本框(s1,s2,s3和s4)中显示的值.它在e1和e2的每个值变化上执行此操作e1更改值时计算值的代码如下所示.% --- Executes on key pres…

Android--pendingIntent Intent

PendingIntent pendingIntent字面意义&#xff1a;等待的&#xff0c;未决定的Intent。要得到一个pendingIntent对象&#xff0c;使用方法类的静态方法 getActivity(Context, int, Intent, int),getBroadcast(Context, int, Intent, int), getService(Context, int, Intent, in…

Python 支付宝支付代码

2019独角兽企业重金招聘Python工程师标准>>> #!/usr/bin/env python # encoding: utf-8Created on 2011-1-5 author: codebackgmail.comimport hashlib import urllib2verfyURL{"https":"https://www.alipay.com/cooperate/gateway.do?servicenotif…

php基本函数对象,PHP常用函数对象_PHP教程

字符处理函数SQL语句保留字符转义long get_magic_quotes_gpc(void)string addslashes ( string str )string stripslashes(string str)字符的ASCII码int ord(string string) 十进制string chr(ascii) 十进制 八进制(0) 十六进制(0x)string base_convert(string $number,int $fr…

Linux驱动开发必看详解神秘内核(完全转载)

Linux驱动开发必看详解神秘内核完全转载-链接&#xff1a;http://blog.chinaunix.net/uid-21356596-id-1827434.htmlIT168 技术文档】在开始步入Linux设备驱动程序的神秘世界之前&#xff0c;让我们从驱动程序开发人员的角度看几个内核构成要素&#xff0c;熟悉一些基本的内核概…

map用法

转自&#xff1a;http://blog.163.com/xx_jun_/blog/static/208275209201262693422730/ ———————————————————————————————————————————————————————— Map简介 将键映射到值的对象。一个映射不能包含重复的键&#xff…

matlab计算位温,大气物理学复习资料

大气物理学复习资料第一部分名词解释第一章大气概述1、干洁大气&#xff1a;通常把除水汽以外的纯净大气称为干结大气&#xff0c;也称干空气。2、气溶胶&#xff1a;大气中悬浮着的各种固体和液体粒子。3、气团&#xff1a;水平方向上物理属性比较均匀的巨大空气块。4、气团变…

2015第23周五

如何提升你的能力&#xff1f;给年轻程序员的几条建议文中提到的几个建议不错&#xff1a; 1、打造你的工具箱 工欲善其事&#xff0c;必先利其器。每个开发者都应该有一把自己的瑞士军刀&#xff0c;在将来漫长的职业生涯中&#xff0c;这些工具可以为你省下宝贵的时间&#x…

Docker搭建便捷的开发者环境

你可能遇到这样的场景&#xff1a;开发软件时&#xff0c;需要像数据库(mysql,mongodb)、消息系统(rabbitmq)、缓存服务&#xff08;redis&#xff09;等其它依赖服务。当然我们可以找台机器&#xff0c;一步步安装依赖&#xff0c;然后把所有依赖的服务都安装好&#xff0c;这…

php环境编译成品,PHPweb成品网站安装环境要求和安装方法

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼[安装环境要求]虚拟主机或在自备服务器中开设好的主机空间&#xff0c;主机环境要求&#xff1a;PHP4.3.x-5.2.x/非安全模式/允许WEB文件上传MYSQL4.2-5.xzend optimizer 3.2以上(备注:PHP5.3 需要Zend Guard Loader,一般虚拟主机都…

第二个Spring冲刺周期团队进展报告

5.26 之前完成&#xff1a;手电筒基本功能实现&#xff1b; 今日任务&#xff1a;主界面的设计&#xff1b; 遇到的问题&#xff1a;在一个activity中实现界面的跳转&#xff1b; 5.27 昨天完成&#xff1a;主界面的设计&#xff1b; 今日任务&#xff1a;警示灯…

BZOJ-1034 泡泡堂

田忌赛马问题。。。 先弱打弱&#xff0c;不行的话强打强&#xff0c;都不行的话弱打强。。。 就这样。。。 【Code】 转载于:https://www.cnblogs.com/NanoApe/p/4396738.html

php 接口怎么响应,Stripe PHP API方法响应的结构是什么?

我正在进行Stripe集成,我对从PHP API获得的实际响应感到困惑.我开始相信API参考是准确的,并且响应将是每个方法所示的JSON字符串.我很快发现了显着的差异.大多数情况下,JSON响应中缺少id字段.此外,响应似乎是一个字符串,一个对象,也许还有其他一些结构,所有这些都在同一时间.这…

unix-ln 命令

指令名称 : ln 使用权限 :所有使用者 使用方式 : ln [options] source dist&#xff0c; 其中 option 的格式为 : [-bdfinsvF] [-S backup-suffix] [-V {numbered,existing,simple}] [--help] [--version] [--] 说明 : Linux/Unix 档案系统中&#xff0c;有所谓的链接(link)&am…

jQuery 1

<!DOCTYPE html> <html lang"zh-cn"> <head><meta charset"utf-8"><meta name"viewport" content"widthdevice-width, initial-scale1"><title>jQuery鼠标事件</title><script src"…

javascript php 性能,浅谈页面装载js及性能分析方法_javascript技巧

一、装载先装载静态页面的引用js文件&#xff0c;然后查找引用文件中是否包含onload函数&#xff0c;比如main.js中包含onload函数&#xff0c;在main.js中查找是否有对其他js文件的引用&#xff0c;优先装载引用js文件&#xff0c;被引用中文件的装载顺序和main.js的顺序一致。…

python计算机视觉2:图像边缘检测

我是一名初学者&#xff0c;如果你发现文中有错误&#xff0c;请留言告诉我&#xff0c;谢谢 如果需要检测到图像里面的边缘&#xff0c;首先我们需要知道边缘处具有什么特征。 对于一幅灰度图像来说&#xff0c;边缘两边的灰度值肯定不相同&#xff0c;这样我们才能分辨出哪里…