在ASP.NET Core中使用ViewComponent
2021-04-10 11:44
1276 查看
前言
在之前的开发过程中,我们对于应用或者说使用一些小的组件,通常使用分布页(partial view),再往前在Web Form中我们会进行应用
WEB Control,好吧提及一个关键性代码
TagPrefix:TagName,通过这种的标记我们便可以在我们
web form中进行引入我们的组件,当然自从.NET MVC之后呢,就已经没有了
WebControl,而对于.NET Core后,又多了一个特性
ViewComponent。
对于
ViewComponent看起来它类似于小的控制器,而对于我们小的组件或者小部分通用型功能,可通过
ViewComponent进行实现,比如说留言栏、菜单等等。
ViewComponent是由两部分组成,一部分是类(通常该类集成与ViewComponent),而另外一部分是视图(Razor和普通的View一样),当然
ViewComponent同样也支持POCO,不继承
ViewComponent,但类名以
ViewComponent结尾。
自定义一个组件
创建
ViewComponent的方式有三种,如下所示:
- 继承自ViewComponent
- 使用
ViewComponent
特性 - 创建一个类,以
ViewComponent
结尾
需要注意的是
View Component必须是公共的(public),非嵌套,非抽象类。
对于
View Component我们有了一个基本的认识,下面的话创建一个
ButtonViewComponent示例,作为我们的参考:
using System.Threading.Tasks; using Microsoft.AspNetCore.Mvc; namespace ViewComponentDemo.ViewComponents { public class ButtonViewComponent : ViewComponent { public async Task<IViewComponentResult> InvokeAsync() { return View(); } } }
在视图页面中调用该组件:
@await Component.InvokeAsync("Button")
对于
ViewComponent同样也是跟
Controller一样,进行通过我们服务端特性进行视图操作,再或者说渲染,比如下面我们要传递参数,进行修改我们的
Button的样式:
我们修改一下原方法,同时增加一个Enum类型,进行样式的选择
@await Component.InvokeAsync("Button",ButtonType.Success)
public async Task<IViewComponentResult> InvokeAsync(ButtonType type = ButtonType.Success) { ViewBag.Type = type; //return View("name",model);//允许强类型 return View(); } public enum ButtonType { Default, Primary, Success, Info, Warning, Danger, Link }
ViewComponent特性
因为在我们的视图关系绑定中,我们更多的是依赖于命名式绑定,而当我们组件的命名与类命名不一致时,会导致我们搜索不到相关的视图,当然我们可能会在使用过程中对其应用不一样的
Name,而对于这种情况,我们可以使用
ViewCompoentAttribute
进行标记,通过这种方式我们可进行视图的绑定,如下所示:
[ViewComponent(Name ="Button")] public class ButtonTest : ViewComponent { public ad8 async Task<IViewComponentResult> InvokeAsync(ButtonType type = ButtonType.Success) { ViewBag.Type = type; return View(); } }
如上代码虽然
ButtonTest的命名引发了视图绑定失败(不能进行使用Button),而我们将其加入一个标记,将Name命名为
Button这样弥补了我们命名的不一致行为。
Taghelper方式
通过
@addTagHelper指定进行注册包含组件的程序集,组件位于
ViewComponentDemo程序集中
@addTagHelper *, ViewComponentDemo
通过如下内容,我们便可以进行直接引用我们的视图,相对来说这种方式看起来美观一些。
切记这种方式有一个弊端,参数不是可选性参数,也就是你必须把每一个参数都进行显示的调用一下,否则将导致搜索不到.
<vc:button type="@ButtonType.Success"></vc:button>
在如上代码中
type为我们的方法参数。
Reference
Demo:https://github.com/hueifeng/BlogSample/tree/master/src/ViewComponentDemo
https://www.geek-share.com/detail/2643862281.html
https://docs.microsoft.com/zh-cn/aspnet/core/mvc/views/view-components
相关文章推荐
- [转]asp.net core视图组件(ViewComponent)简单使用
- asp.net core视图组件(ViewComponent)简单使用
- ASP.NET MVC Core的ViewComponent
- Asp.net core 学习笔记 ( ViewComponent 组件 )
- asp.net core mvc View Component 应用
- ASP.NET CORE 自定义视图组件(ViewComponent)注意事项
- ASP.NET Core开发-MVC 使用dotnet 命令创建Controller和View
- Asp.Net core 视图组件ViewComponent
- Asp.Net core 视图组件ViewComponent
- Scott Mitchell 的ASP.NET 2.0数据操作教程之十:使用 GridView 和DetailView实现的主/从报
- Scott Mitchell 的ASP.NET 2.0数据操作教程之十:使用 GridView 和DetailView实现的主/从报表
- ASP.NET中 DropDownList+FormView(表单视图)的使用前台绑定
- [翻译]Scott Mitchell 的ASP.NET 2.0数据教程之十四:使用FormView 的模板
- asp.net viewstate视图状态 from 表单Request对象 Response对象 原理跟使用
- asp.net mvc view使用小结(TEXTBOX为例)
- 在asp.net mvc中使用PartialView返回部分HTML段
- ASP.net MVC 同一view或页面使用多个Model或数据集的方法
- ASP.NET MVC 实践之路 之四 使用View来创建页面
- Asp.net中static变量和viewstate的使用方法(谨慎)
- (译)如何在ASP.NET中安全使用ViewState