• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >ASP.NET > 解读ASP.NET 5 & MVC6系列教程(14):View Component

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

作者:汤姆大叔 字体:[增加 减小] 来源:互联网 时间:2017-05-11

汤姆大叔通过本文主要向大家介绍了精通asp.net mvc 5,html5 asp.net,pro asp.net mvc 5,asp net mvc 5,asp net培训等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

在之前的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类的创建方式有如下三种:

直接继承于ViewComponent给类加上ViewComponent特性,或继承于带有ViewComponent特性的类创建一个类,类名以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);
 }
}
</div>

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

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

通过在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>
</div>

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

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

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

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

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

使用自定义视图文件

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

return View("TopN", items);
</div>

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

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

总结

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

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 详解ASP.NET MVC 常用扩展点:过滤器、模型绑定
  • ASP.NET MVC从视图传参到控制器的几种形式
  • ASP.NET MVC 4 中的JSON数据交互的方法
  • ASP.NET MVC制作404跳转实例(非302和200)
  • 详解ASP.NET MVC 利用Razor引擎生成静态页
  • 详解ASP.NET MVC 解析模板生成静态页(RazorEngine)
  • Asp.net MVC下使用Bundle合并、压缩js与css文件详解
  • 详解Asp.Net MVC——控制器与动作(Controller And Action)
  • ASP.NET MVC生成静态页面的方法
  • ASP.NET MVC 导出Word报表

相关文章

  • 2017-05-11win2003服务器asp.net权限设置问题及解决方法
  • 2017-05-11asp.net url分页类代码
  • 2017-05-11asp.net在后端动态添加样式表调用的方法
  • 2017-05-11.NET微信公众号开发之公众号消息处理
  • 2017-05-11C# 生成高质量缩略图程序—终极算法
  • 2017-05-11discuz nt的退出实现代码
  • 2017-05-11Asp.Net用OWC操作Excel的实例代码
  • 2017-05-11asp.net下加密Config的方法
  • 2017-05-11Community Server专题二:体系结构
  • 2017-05-11.NET笔记之:Delegate内部原理的分析

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 深入解析.NET 许可证编译器 (Lc.exe) 的原理与源代码剖析
    • ASP.NET Session的七点认识小结
    • 推荐8项提高 ASP.NET Web API 性能的技术
    • ASP.NET Core优雅的在开发环境保存机密(User Secrets)
    • js插件类库组织与管理(基于asp.net管理)
    • c# table 控件用法
    • 正则一则 将金额转换成人民币大写的代码
    • System.Web中不存在类型或命名空间名称script 找不到System.Web.Extensions.dll引用
    • ASP.NET Core+Docker+Jenkins实现持续集成的完整实例
    • asp.net Linq To Xml上手Descendants、Elements遍历节点

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有