view components介绍
view components介绍
在ASP.NET MVC 6中,view components (VCs) 功能类似于虚拟视图,但是功能更加强大。 VCs兼顾了视图和控制器的优点,你可以把VCs 看作一个Mini 控制器。它负责控制应用中的某一功能模块,例如:
- 动态导航菜单
- 标签云
- 登录面板
- 购物车
- 最近文章
- 博客侧边栏
假如使用VC 创建了登录面板,可以在很多场景中调用,例如:
- 用户没有登录
- 用户已登录,需要退出使用其他帐号登录或者管理其他帐号。
- 如果当前登录角色为管理员,渲染管理员登录面板
你可以根据用户的需求获取数据进行渲染。添加VC到需要该视图控件的页面。
VC 包含两部分,类 (一般继承于ViewComponent) 和调用VC类中方法的Razor 视图。类似于ASP.NET 控制器, VC 可以作为POCO使用,但是更多用户倾向于使用从 VewComponent中继承而来的方法和属性。
VC的创建方式有:
- 继承ViewComponent.
- 拥有 [ViewComponent] 属性,或者从拥有 [ViewComponent]属性派生的类。
- 创建名称已ViewComponent为后缀的类。
和controllers相同,VCs 必须是公开、非嵌套和非抽象的类。
添加view component 类
1. 创建名为ViewComponents的文件夹,View component 类可以包含在工程中的任何文件夹下。
2. 在ViewComponents 文件夹下创建PriorityListViewComponent.cs 类。.
3. 使用以下代码替代PriorityListViewComponent.cs 文件原有代码:
using System.Linq;
using Microsoft.AspNet.Mvc;
using TodoList.Models; namespace TodoList.ViewComponents
{
public class PriorityListViewComponent : ViewComponent
{
private readonly ApplicationDbContext db; public PriorityListViewComponent(ApplicationDbContext context)
{
db = context;
} public IViewComponentResult Invoke(int maxPriority)
{
var items = db.TodoItems.Where(x => x.IsDone == false &&
x.Priority <= maxPriority); return View(items);
}
}
}
代码注释:
· 因为PriorityListViewComponent 类继承于ViewComponent,运行时将通过字符串"PriorityList" 从View中引用该类。在后续章节将会进行详细阐述。
· [ViewComponent] 属性用于设置引用VC的别名,例如,创建名称为XYZ的类,我们可以通过以下代码设置其引用别名:
[ViewComponent(Name = "PriorityList")]
public class XYZ : ViewComponent
· 组件使用构造注入器使数据内容生效,类似于 Todo 控制器的功能。
· 调用View中的公开方法,可以传递任意数量的参数。在异步版本中, InvokeAsync是可用的。在后续章节中我们将提及InvokeAsync 和多参数的使用方法。在之前的代码中,公开方法的返回值为代办事项(ToDoItems),优先级不低于maxPriority。
添加视图控件
1. 在Views\Todo 文件夹下创建Components文件夹,注意这个文件夹需要命名为Components。
2. 在Views\Todo\Components 文件夹下创建PriorityList 文件夹。文件夹名称必须和view component 类名称一致。或者类名去除后缀名称(如果在创建类时遵循惯例使用ViewComponent 作为后缀)。如果使用了ViewComponent属性。
3. 在Views\Todo\Components\PriorityList 文件夹下创建Default.cshtml Razor 视图,添加以下标记:
@model IEnumerable<TodoList.Models.TodoItem> <h3>Priority Items</h3>
<ul>
@foreach (var todo in Model)
{
<li>@todo.Title</li>
}
</ul>
Razor 视图包含并且显示了 TodoItems。如果 VC 调用方法没有传递视图的名称 (如例子中所示),那么默认情况下则调用视图名称对于方法。在后续的文章中,将阐述如何传递视图名称。
在views\todo\index.cshtml 视图底部添加包含有调用PriorityListViewComponent的div:
@model IEnumerable<TodoList.Models.TodoItem> <h3>Priority Items</h3>
<ul>
@foreach (var todo in Model)
{
<li>@todo.Title</li>
}
</ul>
标记 @await Component.InvokeAsync() 表示该语法用于调用VC。第一个参数是我们要调用的组件名称。其余参数参数传递给该VC。在这个例子中,我们传递“1”作为过滤的优先级。InvokeAsync 方法可以包含任意数量的参数。
以下图片显示了优先级列表:
@{
ViewBag.Title = "ToDo Page";
} <div class="jumbotron">
<h1>ASP.NET vNext</h1>
</div> <div class="row">
<div class="col-md-4">
@if (Model.Count == 0)
{
<h4>No Todo Items</h4>
}
else
{
<table>
<tr><th>TODO</th><th></th></tr>
@foreach (var todo in Model)
{
<tr>
<td>@todo.Title </td>
<td>
@Html.ActionLink("Details", "Details", "Todo", new { id = todo.Id }) |
@Html.ActionLink("Edit", "Edit", "Todo", new { id = todo.Id }) |
@Html.ActionLink("Delete", "Delete", "Todo", new { id = todo.Id })
</td>
</tr>
}
</table>
}
<div>@Html.ActionLink("Create New Todo", "Create", "Todo") </div>
</div> <div class="col-md-4">
@Component.Invoke("PriorityList", 1)
</div> </div>
注意: VC通常被添加到 Views\Shared 文件夹下,因为它并不仅仅是controller。
添加InvokeAsync 到优先级组件
通过以下代码更新PriorityListViewComponent类:
using System.Linq;
using Microsoft.AspNet.Mvc;
using TodoList.Models;
using System.Threading.Tasks; namespace TodoList.ViewComponents
{
public class PriorityListViewComponent : ViewComponent
{
private readonly ApplicationDbContext db; public PriorityListViewComponent(ApplicationDbContext context)
{
db = context;
} // Synchronous Invoke removed. 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);
} private Task<IQueryable<TodoItem>> GetItemsAsync(int maxPriority, bool isDone)
{
return Task.FromResult(GetItems(maxPriority, isDone)); }
private IQueryable<TodoItem> GetItems(int maxPriority, bool isDone)
{
var items = db.TodoItems.Where(x => x.IsDone == isDone &&
x.Priority <= maxPriority); string msg = "Priority <= " + maxPriority.ToString() +
" && isDone == " + isDone.ToString();
ViewBag.PriorityMessage = msg; return items;
} }
}
注意: 这里移除了用于同步的Invoke 方法,使用更加强大的asynchronous方法替代。
修改 VC 视图显示优先级信息:
@model IEnumerable<TodoList.Models.TodoItem> <h4>@ViewBag.PriorityMessage</h4>
<ul>
@foreach (var todo in Model)
{
<li>@todo.Title</li>
}
</ul>
最后,更新 views\todo\index.cshtml 视图文件:
@* Markup removed for brevity. *@ <div class="col-md-4">
@await Component.InvokeAsync("PriorityList", 2, true)
</div>
</div>
以下图片展示了PriorityListViewComponent类和Index视图的修改效果:
指定视图名称
一些复杂的VC在某些情况下也许需要去指定特定的视图,以下代码是通过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\Todo\Components\PriorityList\Default.cshtml 为 Views\Todo\Components\PriorityList\PVC.cshtml 视图。更改PVC视图控件来验证它的使用:
@model IEnumerable<TodoList.Models.TodoItem> <h2> PVC Named Priority Component View</h2>
<h4>@ViewBag.PriorityMessage</h4>
<ul>
@foreach (var todo in Model)
{
<li>@todo.Title</li>
}
</ul>
最后,需要更新 Views\Todo\Index.cshtml 文件:
刷新页面查看更改效果。
在MVC6中,更改controller(或其他任何代码)时,不需要重新编译或重新运行应用,仅需要保存代码并且刷新页面即可。
以上即为今天希望和大家分享的view components知识,下一篇文章我们将介绍以下两部分内容:
- 向视图中添加服务方法。
- 发布应用到公有云方法。
敬请期待。
原文链接:http://www.asp.net/vnext/overview/aspnet-vnext/vc
view components介绍的更多相关文章
- ASP.NET 5系列教程 (三):view components介绍
在ASP.NET MVC 6中,view components (VCs) 功能类似于虚拟视图,但是功能更加强大. VCs兼顾了视图和控制器的优点,你可以把VCs 看作一个Mini 控制器.它负责控制 ...
- [译]View components and Inject in ASP.NET MVC 6
原文:http://www.asp.net/vnext/overview/aspnet-vnext/vc 介绍view components view components (VCs) 类似于part ...
- Android Animation学习(六) View Animation介绍
Android Animation学习(六) View Animation介绍 View Animation View animation系统可以用来执行View上的Tween animation和F ...
- View Components as Tag Helpers,离在线模板编辑又进一步
在asp.net core mvc中增加了ViewComponent(视图组件)的概念,视图组件有点类似部分视图,但是比部分视图功能更加强大,它更有点像一个控制器. 使用方法 1,定义类派生自View ...
- [转] asp.net core Introducing View Components
本文转自:http://www.c-sharpcorner.com/uploadfile/8c19e8/asp-net-5-getting-started-with-asp-net-mvc-6/ In ...
- View的介绍和运用 && FlexBox布局
开始我们今天的项目学习啦~~~~~~ 1> 第一步当然是创建项目啦: 进入终端: 创建ViewDemo项目 命令如下啦,你看懂了对吧...嘻嘻!!! 2>View的介绍和运用 项目安装创建 ...
- Android的View类介绍-android的学习之旅(十三)
view概述 android绝大部分UI组件都放在android.view和android.widght包中,android的虽有UI组件都继承了View类. View类还有一个非常重要的子类:Vie ...
- mvc VIEW部分介绍
因为如果在view页面中的路径直接写死为<from action="/Home/Save" method="post">那么当Global.asax ...
- DAO层,Service层,Controller层、View层介绍
来自:http://jonsion.javaeye.com/blog/592335 DAO层 DAO 层主要是做数据持久层的工作,负责与数据库进行联络的一些任务都封装在此,DAO层的设计首先是设计DA ...
随机推荐
- Effective Java (7) - 避免终止方法
一. 基本概念 1. 所谓的终结方法事实上是指finalize(). 2. Java的垃圾回收机制仅仅负责内存相关清理.其它资源的清理(释放文件.释放DB连接)须要程序猿手动完毕. 3. 调用Syst ...
- Cloudera impala简单介绍及安装具体解释
一.Impala简单介绍 Cloudera Impala对你存储在Apache Hadoop在HDFS,HBase的数据提供直接查询互动的SQL.除了像Hive使用同样的统一存储平台,Impala也使 ...
- Android中集成第三方库的方法和问题
Android中集成第三方库的方法和问题 声明: 1. 本文參考了网上同学们的现有成果,在此表示感谢,參考资料在文后有链接. 2. 本文的重点在第三部分,是在开发中遇到的问题及解决的方法.第一,第二部 ...
- cocos2d-x3.0 解释具体的新的物理引擎setCategoryBitmask()、setContactTestBitmask()、setCollisionBitmask()
转载请注明出处:游戏开发实验室http://blog.csdn.net/u010019717/article/details/32942641 我在编写游戏的时候遇到了这个问题. 物理引擎其它的内容 ...
- NSIS:IfFileExists+Goto实现简单跳转
原文 NSIS:IfFileExists+Goto实现简单跳转 在用户手册中有相关示例,但也许有的同学没有发现,那么我再发一个,仅供入门学习参考. IfFileExists 要检测的文件 文件存在时跳 ...
- Duanxx的C++学习 : 数字转换String
下面是这两个数字转换String道路.件:sstream string num2str1(unsigned int num) { stringstream ss; ss<<num; ret ...
- android 有效载荷大图,避OOM
我们的项目往往会载入图片.有时,承担太多,再装图片,它导致了非常小的程序卡,而在铅oom从而导致异常app再见,今天翻译google官方网站,它已经做了很好的图像处理汇总,由于Google我们已经给解 ...
- JavaScript中五种常见运算符
一. in运算符 in运算符希望它的左操作数是一个字符串或可以转换为字符串,希望它的右操作数是一个对象.如果右侧的对象拥有一个名为左操作数值的属性名,那么表达式返回true.例如: var point ...
- JavaEE(6) - JMS消息选择和查看
1. JMS消息的类型.消息头和消息属性 消息类型: StreamMessage MapMessage TextMessage ObjectMessage BytesMessage JMS消息中的消息 ...
- Java依据Url下载图片
package com.ronniewang.downloadpicture; import java.io.DataInputStream; import java.io.File; import ...