asp.net core razor自定义taghelper的方法
又一个新的名词(taghelper),通过taghelper是可以操作html标签、条件输出、更是自由添加内外元素。当然也内置了挺多的asp-开头的taghelper。
下面文章中也简单的带大家实现一个taghelper;
创建自定义html元素
创建一个类ButtonTagHelper
tagName为标签名称,下面创建一个button标签
usingMicrosoft.AspNetCore.Razor.TagHelpers;
namespaceCtrl.Core.Tag.Controls.Button
{
[HtmlTargetElement("test-button")]
publicclassButtonTagHelper:TagHelper
{
publicoverridevoidProcess(TagHelperContextcontext,TagHelperOutputoutput)
{
output.TagName="button";
base.Process(context,output);
}
}
}
注册taghelper
创建完后可没法执行使用哦,在.cshtml通过某个标签比如form标签输入asp-,下面立刻就出现了一个列表asp-....,这些是怎么做到的呢？因为在_ViewImports在我们创建项目工程时,已经提前引入了taghelper默认引入的是微软已经为我们写好的taghelper类库Microsoft.AspNetCore.Mvc.TagHelpers;
我们自定义的话也需要按照这个方式引入自定义的taghelper,下面我自己创建了一个类库名字为"Ctrl.Core.Tag",我这个类库下面要存放所有的taghelper我直接引入命名空间
@addTagHelper*,Ctrl.Core.Tag
如果想引入特定的taghelper如下
@addTagHelper你的TagHelper,命名空间
然后我们测试一下是否可用了,先生成一下项目,然后找个cshtml视图,输入刚才的前缀test会出来刚才定义的标签
添加上并运行项目查看刚才创建的button标签是否存在
添加自定义属性
上面需求是满足不了我们日常需求的,下面我们再定义一个元素属性
output.Attributes.SetAttribute("class","btnbtn-primary");
然后再打开页面看效果就会看到class元素已经给加上了.
usingMicrosoft.AspNetCore.Razor.TagHelpers;
namespaceCtrl.Core.Tag.Controls.Button
{
[HtmlTargetElement("test-button")]
publicclassButtonTagHelper:TagHelper
{
publicoverridevoidProcess(TagHelperContextcontext,TagHelperOutputoutput)
{
output.TagName="button";
output.Attributes.SetAttribute("class","btnbtn-primary");
base.Process(context,output);
}
}
}
通过vs感知匹配按钮类型
上面能满足我们自定义标签了,但是可能使用起来有局限性,下面我给大家提供一个场景思路,后面大家可以自己进行扩展.
我创建一个枚举类为CtrlButtonType
namespaceCtrl.Core.Tag.Controls.Button
{
///
///按钮类型
///
publicenumCtrlButtonType
{
///
///默认样式
///
Default,
///
///首选项
///
Primary,
///
///成功
///
Success,
///
///一般信息
///
Info,
///
///警告
///
Warning,
///
///危险
///
Danger
}
}
在buttonTagHelper类中增加一个属性
publicCtrlButtonTypeButtonType{get;set;}
到cshtml中添加刚才那个页面的属性,会发现有提示,以及可以看到刚才枚举中定义的.这样通过vs感知以及通过类型指定我们刚才按钮的类型是不是很方面了.
namespaceCtrl.Core.Tag.Controls.Button
{
[HtmlTargetElement("test-button")]
publicclassButtonTagHelper:TagHelper
{
publicCtrlButtonTypeButtonType{get;set;}
publicoverridevoidProcess(TagHelperContextcontext,TagHelperOutputoutput)
{
output.TagName="button";
output.Attributes.SetAttribute("class","btnbtn-"+ButtonType.ToString().ToLower());
base.Process(context,output);
}
}
}
总结
以上所述是小编给大家介绍的asp.netcorerazor自定义taghelper,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！