ASP.NET Core 5.0 MVC 页面标记帮助程序的使用

什么是标记帮助程序

标记帮助程序使服务器端代码可以在 Razor 文件中参与创建和呈现 HTML 元素。标记帮助程序使用 C# 创建，基于元素名称、属性名称或父标记以 HTML 元素为目标。

创建标记帮助程序

创建一个名为“TagHelpers”的文件夹来保存标记帮助程序 。

将以下 EmailTagHelper 类添加到“TagHelpers”文件夹 。

    public class EmailTagHelper : TagHelper
    {
    
        private const string EmailDomain = "contoso.com";

        public string MailTo {
     get;
     set;
 }

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
    
            output.TagName = "a";
        // Replaces email>
     with a>
     tag
​
            var address = MailTo + "@" + EmailDomain;
    
            output.Attributes.SetAttribute("href", "mailto:" + address);
    
            output.Content.SetContent(address);

        }

      
    }
    

使用标记帮助程序

在Privacy.cshtml页面添加

address>
    
    strong>
    Support:/strong>
    email mail-to="Support">
    /email>
    br />
    
    strong>
    Marketing:/strong>
    email mail-to="Marketing">
    /email>
    
/address>
    

运行后的生成的html代码

address>
    
    strong>
    Support:/strong>
    a href="mailto:Support@contoso.com">
    Support@contoso.com/a>
    br>
    
    strong>
    Marketing:/strong>
    a href="mailto:Marketing@contoso.com">
    Marketing@contoso.com/a>
    
/address>
    

运行后的效果

管理标记帮助程序作用域

标记帮助程序作用域由 @addTagHelper、@removeTagHelper 和“!”选择退出字符联合控制。

使用 @addTagHelper 添加标记帮助程序

如果创建名为 net5MVC 的新 ASP.NET Core Web 应用，将向项目添加以下 Views/_ViewImports.cshtml 文件 ：

@using net5MVC
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, net5MVC

@addTagHelper 后第一个参数指定要加载的标记帮助程序，这里“*”指定加载所有标记帮助程序，第二个参数“Microsoft.AspNetCore.Mvc.TagHelpers”指定包含标记帮助程序的程序集。

 如果想选择仅对特定视图公开标记帮助程序，可在这些视图文件中使用 @addTagHelper 指令。

使用 @removeTagHelper 删除标记帮助程序

@removeTagHelper 与 @addTagHelper 具有相同的两个参数，它会删除之前添加的标记帮助程序。 例如，应用于特定视图的 @removeTagHelper 会删除该视图中的指定标记帮助程序。 在 Views/Folder/_ViewImports.cshtml 文件中使用 @removeTagHelper，将从 Folder 中的所有视图删除指定的标记帮助程序。

使用 _ViewImports.cshtml 文件控制标记帮助程序作用域

可将 ViewImports.cshtml 添加到任何视图文件夹，视图引擎将同时应用该文件和 Views/ViewImports.cshtml 文件中的指令。 如果为 Home 视图添加空的 Views/Home/ViewImports.cshtml 文件，则不会发生任何更改，因为 ViewImports.cshtml 文件是附加的。 添加到 Views/Home/ViewImports.cshtml 文件（不在默认 Views/ViewImports.cshtml 文件中）的任何 @addTagHelper 指令，都只会将这些标记帮助程序公开给 Home 文件夹中的视图。

使用退出字符（“!”）禁用标记帮助程序

使用标记帮助程序选择退出字符（“!”），可在元素级别禁用标记帮助程序。 例如，使用标记帮助程序选择退出字符在 span> 中禁用 Email 验证：

!span asp-validation-for="Email" class="text-danger">
    /!span>
    

须将标记帮助程序选择退出字符应用于开始和结束标记。 （将选择退出字符添加到开始标记时，Visual Studio 编辑器会自动为结束标记添加相应字符）。 添加选择退出字符后，元素和标记帮助程序属性不再以独特字体显示。

使用 @tagHelperPrefix 阐明标记帮助程序用途

@tagHelperPrefix 指令可指定一个标记前缀字符串，以启用标记帮助程序支持并阐明标记帮助程序用途。 例如，可以将以下标记添加到 Views/_ViewImports.cshtml 文件：

@tagHelperPrefix th:

在以下代码图像中，标记帮助程序前缀设置为 th:，所以只有使用前缀 th: 的元素才支持标记帮助程序（可使用标记帮助程序的元素以独特字体显示）。 label> 和 input> 元素具有标记帮助程序前缀，可使用标记帮助程序，而 span> 元素则相反。

适用于 @addTagHelper 的层次结构规则也适用于 @tagHelperPrefix。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！