合肥移动网站建设,济南网站排名优化报价,义乌小程序,句容工程建设招标网站视图组件简介
在新的ASP.NET Core MVC中#xff0c;视图组件类似于局部视图#xff0c;但它们更强大。视图组件不使用模型绑定#xff0c;仅依赖于您在调用时提供的数据。
视图组件特性#xff1a;
呈现页面响应的某一部分而不是整个响应包括在控制器和视图之间发现的关…视图组件简介
在新的ASP.NET Core MVC中视图组件类似于局部视图但它们更强大。视图组件不使用模型绑定仅依赖于您在调用时提供的数据。
视图组件特性
呈现页面响应的某一部分而不是整个响应包括在控制器和视图之间发现的关注分离和可测试性优势可以具有参数和业务逻辑通常在页面布局中调用
视图组件是在任何地方可重用的呈现逻辑对于局部视图来说相对复杂例如
动态导航菜单标签云查询数据库登录面板购物车最近发表的文章典型博客上的侧边栏内容将在每个页面上呈现的登录面板并显示要注销或登录的链接具体取决于用户的登录状态
视图组件由两部分组成类通常继承自ViewComponent和返回的结果通常是视图。像控制器一样视图组件可以是POCO但大多数开发人员都希望利用从ViewComponent继承的方法和属性。
创建视图组件
此部分包含创建视图组件的高级功能。在本文的后面我们将详细介绍每一个步骤并创建一个视图组件。
视图组件类
视图组件类可以通过以下任何方式来创建
继承自 ViewComponent 类使用[ViewComponent]特性来标记一个类或者继承自具有[ViewComponent]特性的类创建类的名称以 ViewComponent 后缀结尾
与控制器一样视图组件必须是公共、非嵌套、非抽象类。视图组件名称是删除“ViewComponent”后缀的类名称也可以使用ViewComponentAttribute.Name属性显式指定名称。
视图组件类特性
完美支持构造函数依赖注入不参与控制器生命周期这意味着您不能在视图组件中使用过滤器
视图组件方法
视图组件在InvokeAsync方法中定义逻辑并返回IViewComponentResult类型。参数直接来自视图组件的调用而不是模型绑定视图组件从不直接处理请求通常视图组件会初始化模型并通过调用View方法将其传递给视图。总而言之视图组件方法特性
定义一个返回IViewComponentResult的InvokeAsync方法通常会初始化一个模型并通过调用ViewComponent类型的View方法将其传递给视图参数来自调用方法而不是HTTP请求没有模型绑定不能直接通过HTTP请求访问它们通常在视图中通过代码调用视图组件永远不会处理请求在方法签名上重载而不是当前HTTP请求的任何详细信息
查找视图路径
运行时在以下路径中搜索视图
Views/controller_name/Components/view_component_name/view_nameViews/Shared/Components/view_component_name/view_name
视图组件的视图名称默认为Default这意味着您的视图文件通常将命名为Default.cshtml。创建视图组件结果或调用View方法时可以指定不同的视图名称。
我们建议您视图文件命名为Default.cshtml并使用Views/Shared/Components/view_component_name/ .cshtml 路径。此示例中使用的PriorityList视图组件视图的路径是Views/Shared/Components/PriorityList/Default.cshtml。
调用视图组件
要使用视图组件请在视图中调用以下代码 Component.InvokeAsync(Name of view component, anonymous type containing parameters)
参数将被传递给InvokeAsync方法在本文中编写的PriorityList视图组件在Views/Todo/Index.cshtml视图文件中调用。在下文中使用两个参数调用InvokeAsync方法 await Component.InvokeAsync(PriorityList, new { maxPriority 4, isDone true })
通过标签帮助器调用视图组件
对于ASP.NET Core 1.1及更高版本您可以将视图组件作为标签帮助器Tag Helper进行调用 vc:priority-list max-priority2 is-donefalse/vc:priority-list
标签帮助器将Pascal命名方式的类型和方法参数被转换成它们的小写短横线命名方式lower kebab case。调用视图组件的标签帮助器使用该 元素视图组件约定如下 vc:[view-component-name] parameter1parameter1 value parameter2parameter2 value/vc:[view-component-name]
注意为了将视图组件作为标签帮助器您必须使用addTagHelper指令注册包含视图组件的程序集。例如如果您的视图组件位于名为“MyWebApp”的程序集中请将以下指令添加到_ViewImports.cshtml文件中
addTagHelper *, MyWebApp
您可以将视图组件作为标签帮助器注册到引用视图组件的任何文件。有关如何注册标签助手的更多信息请参阅Managing Tag Helper Scope。
本示例中使用的InvokeAsync方法 await Component.InvokeAsync(PriorityList, new { maxPriority 4, isDone true })
标签帮助器标记 vc:priority-list max-priority2 is-donefalse/vc:priority-list
在上面的示例中PriorityList视图组件变为priority-list视图组件的参数作为属性按小写短横线命名方式传递。
从控制器直接调用视图组件
视图组件通常在视图调用但您也可以直接在控制器的方法中调用它们。虽然视图组件被定义为不能像控制器一样直接处理请求但您可以轻松在控制器的Action方法中实现返回ViewComponentResult内容。
在下面的示例中在控制器直接调用视图组件 public IActionResult IndexVC() { return ViewComponent(PriorityList, new { maxPriority 3, isDone false });}
演练创建一个简单的视图组件
示例下载构建和测试入门代码。这是一个简单的项目Todo控制器显示 Todo 项目列表。 添加ViewComponent类
创建一个 ViewComponents 文件夹并添加以下PriorityListViewComponent类
using Microsoft.AspNetCore.Mvc;using Microsoft.EntityFrameworkCore;using System.Collections.Generic;using System.Linq;using System.Threading.Tasks;using ViewComponentSample.Models;namespace ViewComponentSample.ViewComponents{ public class PriorityListViewComponent : ViewComponent{ private readonly ToDoContext db; public PriorityListViewComponent(ToDoContext context) { db context;} public async TaskIViewComponentResult InvokeAsync(int maxPriority, bool isDone) { var items await GetItemsAsync(maxPriority, isDone); return View(items);} private TaskListTodoItem GetItemsAsync(int maxPriority, bool isDone){ return db.ToDo.Where(x x.IsDone isDone x.Priority maxPriority).ToListAsync();}}
}
代码注意事项
视图组件类可以包含在项目中的任何文件夹中。因为类名称PriorityListViewComponent以后缀ViewComponent结尾运行时在视图中引用视图组件时使用字符串“PriorityList”。稍后我会详细解释一下。[ViewComponent]特性可以更改用于引用视图组件的名称。例如我们可以该类命名为XYZ并应用该ViewComponent属性 [ViewComponent(Name PriorityList)] public class XYZ : ViewComponent[ViewComponent]特性告诉视图组件选择器在查找与组件关联的视图时使用名称PriorityList并在从视图引用组件类时使用字符串“PriorityList”。稍后我会详细解释一下。组件使用依赖注入来使DbContext可用。InvokeAsync 是一个可以从视图中调用的公开方法它可以使用任意数量的参数。InvokeAsync方法返回满足isDone和maxPriority参数的ToDo集合。
创建视图组件Razor视图
创建Views/Shared/Components文件夹此文件夹必须命名为 Components。创建 Views/Shared/Components/PriorityList 文件夹。此文件夹名称必须与视图组件类的名称一致或者类名称去掉后缀如果遵循约定在类名称中使用ViewComponent后缀。如果您使用该ViewComponent特性则名称需要与特性名称一致。创建一个Views/Shared/Components/PriorityList/Default.cshtml Razor视图model IEnumerableViewComponentSample.Models.TodoItemh3Priority Items/h3ulforeach (var todo in Model){ litodo.Name/li}/ulRazor视图会列出TodoItem并显示它们。如果视图组件InvokeAsync方法未传递视图的名称如我们的示例中则按照约定视图名称为 Default。在本文的后面我将向您展示如何传递视图的名称。如果视图组件只适用于特定控制器则可以将其添加到控制器特定的文件夹Views/Todo/Components/PriorityList/Default.cshtml。在视图 Views/Todo/index.cshtml 文件底部的div元素中包含视图组件的调用 div await Component.InvokeAsync(PriorityList, new { maxPriority 2, isDone false }) /div
await Component.InvokeAsync是调用视图组件的语法。第一个参数是我们要调用组件的名称随后是传递给组件的参数。InvokeAsync可以包含任意数量的参数。
调试应用程序下图显示了ToDo列表和选择项 您也可以直接在控制器中调用视图组件 public IActionResult IndexVC() { return ViewComponent(PriorityList, new { maxPriority 3, isDone false });} 指定视图名称
复杂视图组件可能需要在某些情况下指定非默认视图。以下代码显示了如何从InvokeAsync方法中指定“PVC”视图。修改PriorityListViewComponent类中的InvokeAsync方法。 public async TaskIViewComponentResult 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/Shared/Components/PriorityList/Default.cshtml 文件复制到名为 Views/Shared/Components/PriorityList/PVC.cshtml 视图文件。添加标题以表示正在使用的是PVC视图。
model IEnumerableViewComponentSample.Models.TodoItemh2 PVC Named Priority Component View/h2h4ViewBag.PriorityMessage/h4ulforeach (var todo in Model){ litodo.Name/li}/ul
修改视图 Views/TodoList/Index.cshtml await Component.InvokeAsync(PriorityList, new { maxPriority 4, isDone true })
运行应用程序并验证是PVC视图。 如果显示不是PVC视图请验证您调用视图组件priority参数是否为4或更高的。
检测视图路径
将priority参数更改为三个或更小返回默认视图。临时将 Views/Todo/Components/PriorityList/Default.cshtml 重命名为 1Default.cshtml。调试应用程序您将收到以下错误 An unhandled exception occurred while processing the request.InvalidOperationException: The view Components/PriorityList/Default was not found. The following locations were searched:/Views/ToDo/Components/PriorityList/Default.cshtml/Views/Shared/Components/PriorityList/Default.cshtmlEnsureSuccessful 将视图 Views/Todo/Components/PriorityList/1Default.cshtml 复制到 Views/Shared/Components/PriorityList/Default.cshtml 。在 Shared 的Todo视图组件视图中添加一些标记以表示视图来自 Shared 文件夹。测试 Shared 组件视图。 避免字符串魔法
如果要编译时安全则可以使用类名替换硬编码视图组件名称。创建没有以“ViewComponent”后缀的视图组件
using Microsoft.AspNetCore.Mvc;using Microsoft.EntityFrameworkCore;using System.Collections.Generic;using System.Linq;using System.Threading.Tasks;using ViewComponentSample.Models;namespace ViewComponentSample.ViewComponents{ public class PriorityList : ViewComponent{ private readonly ToDoContext db; public PriorityList(ToDoContext context) {db context;} public async TaskIViewComponentResult InvokeAsync( int maxPriority, bool isDone) { var items await GetItemsAsync(maxPriority, isDone); return View(items);} private TaskListTodoItem GetItemsAsync(int maxPriority, bool isDone){ return db.ToDo.Where(x x.IsDone isDone x.Priority maxPriority).ToListAsync();}}
}
使用using将命名空间添加到您的Razor视图文件并使用nameof运算符
using ViewComponentSample.Models
using ViewComponentSample.ViewComponents
model IEnumerableTodoItemh2ToDo nameof/h2divawait Component.InvokeAsync(nameof(PriorityList), new { maxPriority 4, isDone true })/div
其它资源
依赖注入视图查看或下载示例代码 原文《View components》https://docs.microsoft.com/en-us/aspnet/core/mvc/views/view-components翻译Sweet Tang本文地址http://www.cnblogs.com/tdfblog/p/view-components-in-asp-net-core.html 相关文章
.NET Core 2.0 正式发布信息汇总.NET Standard 2.0 特性介绍和使用指南.NET Core 2.0 的dll实时更新、https、依赖包变更问题及解决.NET Core 2.0 特性介绍和使用指南Entity Framework Core 2.0 新特性体验 PHP under .NET Core.NET Core 2.0使用NLog升级项目到.NET Core 2.0在Linux上安装Docker并成功部署解决Visual Studio For Mac Restore失败的问题ASP.NET Core 2.0 特性介绍和使用指南.Net Core下通过Proxy 模式 使用 WCF.NET Core 2.0 开源Office组件 NPOIASP.NET Core - Razor页面之Handlers处理方法ASP.NET Core Razor页面 vs MVCRazor Page–Asp.Net Core 2.0新功能 Razor Page介绍ASP.Net Core 2.0中的Razor Page不是WebForm
原文地址http://www.cnblogs.com/tdfblog/p/view-components-in-asp-net-core.html .NET社区新闻深度好文微信中搜索dotNET跨平台或扫描二维码关注
