25-标签助手 Tag Helpers

标签助手使用服务器端代码能够参与到Razor文件中创建和呈现HTML元素。

比如使用ImageTagHelper可以将版本号追加到图片名称中。这样可以保证我们的图片 不管什么时候访问 都是最新的 不会被浏览器缓存。

比如它生成的图片会增加一个后缀地址?t=xxx（类似）

内置的标签助手多用于常用任务。比如创建表单 链接 加载资源等。

标签助手在C#中创建。他们基于元素名称 属性名 或者符标签来定位HTML元素的。

比如Razor标记如下

<label asp-for="Name" class="col-md-2 control-label"></label>Code language: HTML, XML (xml)

最后会生成

<label class="col-md-2 control-label" for="Name"></label>Code language: HTML, XML (xml)

我们可以看到asp-for标签被解析成了for=

asp-for是由LabelTagHelper中的for属性提供的。

指明标签助手

一般在_ViewImports.cshtml中指明。

比如

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpersCode language: CSS (css)

上面的* 表示引入Microsoft.AspNetCore.Mvc.TagHelpers

这个程序集下面所有的标签

比如要引入MyTagHelper程序集的标签助手。可以使用

@using FirstCoreMVC
@using FirstCoreMVC.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, MyTagHelperCode language: CSS (css)

当然 如果我们不适用* 我们需要具体引入某一个命名空间的

@addTagHelper MyTagHelper.TagHelpers.EmailTagHelper, MyTagHelperCode language: CSS (css)

当然我们也可以使用*

@addTagHelper MyTagHelper.TagHelpers.Em*, MyTagHelperCode language: CSS (css)

@removeTagHelper删除标签助手

退出个别元素

可以在标签的开头使用!感叹号来

<!span asp-validation-for="Name" class="text-danger"></!span>Code language: HTML, XML (xml)

这个时候 就会被源码输出了

<span asp-validation-for="Name" class="text-danger"></span>Code language: HTML, XML (xml)

原本是

<span class="text-danger field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>Code language: HTML, XML (xml)