在ASP.NET Core中使用TagHelpers

TagHelpers使用

_ViewImports.cshtml文件下添加

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

使用表单

<form asp-controller="Home" asp-action="Privacy" method="post">跳转到Home控制器下的Privacy</form>

浏览器显示

内置的TagHelpers

https://docs.microsoft.com/zh-cn/aspnet/core/mvc/views/tag-helpers/built-in/anchor-tag-helper?view=aspnetcore-5.0 

当然了你还可以结合Html标记语言使用

添加类

public class User
{
       [Display(Name = "性别")]
       public Gender gender { get; set; }
}

public enum Gender
{
    男 = 0,
    女 = 1
 }

视图

@model AspNetCoreTesting.Models.User

<label asp-for="gender" class="col-sm-1"></label>
 <div class="col-lg-10">
   <select class="form-control" asp-for="gender" asp-items="Html.GetEnumSelectList<Gender>()">
   </select>
 </div>

TagHelpers可能控件相对于HtmlHelpers有些不足,结合使用才是王道

不知道HtmlHelpers方法怎么办？那就在视图中点出来呗！

 自定义TagHelpers

    [HtmlTargetElement("email")]//Email标签
    public class EmailTagHelper: TagHelper
    {
        [HtmlAttributeName("color")]
        public string myColor { get; set; }
        public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = "a";
            var content = await output.GetChildContentAsync();
            var target = content.GetContent();
            output.Attributes.SetAttribute("href", $"Mailto:{target}");
            output.Attributes.SetAttribute("style", $"color:{myColor}");
            output.Content.SetContent(target);
        }
    }

 在_ViewImports.cshtml引用项目名称

@*自定义TagHelper,引用项目名称*@
@addTagHelper *,AspNetCoreTesting

使用

<email>123456@qq.com</email>

产生的html

 创建一个既可以当html元素又可以当属性标签的Bold

    [HtmlTargetElement(Attributes = "bold")]//Bold元素
    [HtmlTargetElement("bold")]//Bold标签(两者满足其一即可)
    public class BoldTagHelper: TagHelper
    {
        [HtmlAttributeName("my-style")]
        public MyStyle MyStyle { get; set; }
        public override void  Process(TagHelperContext context, TagHelperOutput output)
        {
            output.Attributes.RemoveAll("bold");
            output.PreContent.SetHtmlContent("<strong>");
            output.PostContent.SetHtmlContent("</strong>");
            
            output.Attributes.SetAttribute("style", $"color:{MyStyle.Color};font-size:{MyStyle.FontSize}px; font-family:{MyStyle.FontFamily}");
        }
    }

     public class MyStyle 
     {
        public string Color { get; set; }
        public int FontSize { get; set; }
        public string FontFamily { get; set; }
     }

视图

<bold my-style="@(new AspNetCoreTesting.Models.TagHelpersModels.MyStyle{  Color = "red", FontSize=36,  FontFamily="宋体"  })">红色字体</bold>

<p bold my-style="@(new AspNetCoreTesting.Models.TagHelpersModels.MyStyle{  Color = "green", FontSize=25,  FontFamily="微软雅黑"  })">绿色字体</p>

效果

 TagHelpers的前缀

视图中使用

@tagHelperPrefix "my:"

必须在TagHelpers前面添加my:前缀,否则使其失效；添加my:前缀，有字体有加粗的效果。