如何在ASP.NET Core中使用ViewComponent
前言
在之前的开发过程中,我们对于应用或者说使用一些小的组件,通常使用分布页(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 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
以上就是如何在ASP.NET Core中使用ViewComponent的详细内容,更多关于ASP.NET Core中使用ViewComponent的资料请关注猪先飞其它相关文章!
相关文章
- 这篇文章主要为大家详细介绍了ASP.NET购物车的实现过程,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-22
- 这篇文章主要介绍了.NET Core下使用Kafka的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-09-22
- 在开发过程中,使用Visual Studio的断点调试功能可以很方便帮我们调试发现程序存在的错误,同样Visual Studio也支持对SQL Server里面的存储过程进行调试,下面就让我们看看具体的调试方法。...2021-09-22
- 这篇文章主要介绍了详解.NET Core 3.0 里新的JSON API,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-09-22
ASP.NET Core根据环境变量支持多个 appsettings.json配置文件
这篇文章主要介绍了ASP.NET Core根据环境变量支持多个 appsettings.json配置文件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-09-22- 这篇文章主要介绍了记一次EFCore类型转换错误及解决方案,帮助大家更好的理解和学习使用asp.net core,感兴趣的朋友可以了解下...2021-09-22
详解ASP.NET Core 中基于工厂的中间件激活的实现方法
这篇文章主要介绍了ASP.NET Core 中基于工厂的中间件激活的实现方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-09-22asp.net通过消息队列处理高并发请求(以抢小米手机为例)
这篇文章主要介绍了asp.net通过消息队列处理高并发请求(以抢小米手机为例),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-09-22- Underscore 是一个 JavaScript 工具库,它提供了一整套函数式编程的实用功能,但是没有扩展任何 JavaScript 内置对象。这篇文章主要介绍了underscore源码分析相关知识,感兴趣的朋友一起学习吧...2016-01-02
ASP.NET单选按钮控件RadioButton常用属性和方法介绍
RadioButton又称单选按钮,其在工具箱中的图标为 ,单选按钮通常成组出现,用于提供两个或多个互斥选项,即在一组单选钮中只能选择一个...2021-09-22ASP.NET 2.0中的数据操作:使用两个DropDownList过滤的主/从报表
在前面的指南中我们研究了如何显示一个简单的主/从报表, 该报表使用DropDownList和GridView控件, DropDownList填充类别,GridView显示选定类别的产品. 这类报表用于显示具有...2016-05-19详解.NET Core 使用HttpClient SSL请求出错的解决办法
这篇文章主要介绍了.NET Core 使用HttpClient SSL请求出错的解决办法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2021-09-22ASP.NET中iframe框架点击左边页面链接 右边显示链接页面内容
这篇文章主要介绍了ASP.NET中iframe框架点击左边页面链接,右边显示链接页面内容的实现代码,感兴趣的小伙伴们可以参考一下...2021-09-22- ASP.NET Web API具有与ASP.NET MVC类似的编程方式,ASP.NET Web API不仅仅具有一个完全独立的消息处理管道,而且这个管道比为ASP.NET MVC设计的管道更为复杂,功能也更为强大。下面创建一个简单的Web API项目,需要的朋友可以参考下...2021-09-22
- 这篇文章主要介绍了ASP.NET连接MySql数据库的2个方法及示例,使用的是MySQL官方组件和ODBC.NET,需要的朋友可以参考下...2021-09-22
- 这篇文章主要介绍了Asp.Net使用Bulk实现批量插入数据的方法,对于进行asp.net数据库程序设计非常有借鉴价值,需要的朋友可以参考下...2021-09-22
在ASP.NET 2.0中操作数据之二十九:用DataList和Repeater来显示数据
本文主要讲解ASP.NET 2.0中如何使用DataList 和 Repeater 来呈现数据,DataList包含一个table标记,而Repeater不会添加任何额外的代码,个人在实际开发中更推荐使用Repeater。...2021-09-22- 这篇文章主要介绍了获取DataTable选择第一行某一列值,需要的朋友可以参考下...2021-09-22
- 这篇文章主要介绍了ASP.Net中的async+await异步编程的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-09-22
- 这篇文章介绍了Asp.net动态生成html页面的方法,有需要的朋友可以参考一下...2021-09-22