TagHelper(标签助手),它替代了自之前MVC版本的HtmlHelper,大多数HtmlHelper方法都有对应的taghelper,专注于在cshmlt中辅助生成html标记,使得razor页面看上去不会像原先到处混着后端代码,他提内置了很多预定义的标签和属性,同时也支持自定义,让我们像写html标签一样,代码更和谐了,而且它还支持智能提示。下面我们来了解一些:
Js Tag helper
- asp-src-include 加载某一个文件夹及其子文件夹中的js
- asp_src-exclide 排除某一个js
- asp-fallback-src 回落 引用失效时用这个
- asp-fallback-test 用于判断cdn脚本能不能起作用,和上面的配合
Css Tag helper
- 有类似js的加载和排除
- 有类似js的回落机制
- 有三个测试:asp-fallback-class/asp-fallback-property/asp-fallback-value
其他 tag helper
- asp-append-version 一般同有src属性的标签配合使用,如img标签,加上这个标签后会在连接后面带上文件的hash值,当我们更改了图片的时候就能自动显示成最新的图片(因为有时候图片会缓存在本地,我们修改了图片很可能不能立即生效)
- 环境变量相关的tag helper
<enviroment names = "production,staging">
<div>在环境变量是production或staging时渲染我</div>
</enviroment>
同样的names位置可以替换成include(同names没啥区别)和exclude
自定义taghelper
- 继承TagHepler地址
- 重写Process方法(或者对应的异步方法ProcessAsync)
- 介绍两个ttribute
[HtmlTargetElement("1231")]:标注对应起作用的标签名,只能标注在类上
[HtmlAttributeName("1231")]:标注对应起作用的属性名,可以在类上也可以在属性上
TagHelper在使用前需要先进行引用,只需要添加到程序集所在的位置即可,不要到类的命名空间下,否则不能引用到
自定义一个Taghepler,如:<文本 颜色="某强绿" 字体大小="蛮大">我是一个不存在的标签,并且有不存在属性</文本>
//可以用类名MaaiciTagHelper(后面去掉成“maaici”,直接做标签名)
[HtmlTargetElement("文本")]//这个特性标签表示指定起作用的标签名,会覆盖类的名称标签<maaici></maaici>
public class MaaiciTagHelper : TagHelper
{
public string 颜色 { get; set; }
public string 字体大小 { get; set; }
public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
{
output.TagName = "p";
output.Attributes.SetAttribute("style",
$@"color : {(颜色 == "某强绿" ? "green" : "")};font-size : {(字体大小 == "蛮大" ? "50px" : "")}");
}
//或下面的同步版本
//public override void Process(TagHelperContext context, TagHelperOutput output)
//{
// output.TagName = "p";
// output.Attributes.SetAttribute("style",
// $@"color : {(颜色 == "某强绿" ? "green" : "")};font-size : {(字体大小 == "蛮大" ? "50px" : "")}");
//}
}
在_ViewImports.cshtml,添加引用,第一个时加载内置的,后面是自定义的
看有智能提示:
效果:
生成的html代码:
条件TagHelper
可以编写自定义的tagHelper来实现让某些html代码选择性的渲染,而不用插入类似下面这样的后端代码
Tag helper 前缀
我们在_ViewImports.cshtml中添加对TagHelper的引用是全局有效的,我们会有时候希望在某些页面中的某些TagHelper不生效,这种情况我们用TagHelper来实现:
- 加上前缀:@tagHelperPrefix "maaici:" 这样一来本页的TagHelper就都失效了,后面的名字自定义的,加上冒号是为了更好的和TagHelper分隔开
- 如果想让某一个taghepler起作用只要加上之前设定的自定义的前缀即可
例如:
加上这个前缀后,这个自定义的TagHelper就失效了,他被当作文本来渲染:
想要他恢复起作用,只要在标签前面加上这个前缀就行了,我这边只有一个,如果有多个只要在自己想要启用的TagHelper前加上前缀即可,搭配条件TagHelper一起使用,可以将不起作用的不渲染。
加上前最后,代码颜色变了,说明taghelper起作用了,前台也能正常显示我们想要的效果了。