在标签助手中将数据属性附加到子 DOM 元素上

Question

我有一个标签助手 ，styled-checkbox它包装了 a<input type="checkbox">并添加了其他元素，这样我就得到了一个自定义样式的复选框。最终呈现的复选框具有以下 DOM 结构：<span>  <input type="checkbox"...>  <label..>  <input type="hidden"..></span>为此，我的 TagHelper 更改了 TagName，然后附加了 HTML：public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output){    output.TagName = "span";    StringBuilder content = new StringBuilder("");    content.Append($@"<input type=""checkbox"" value=""true"" name=""{Name}"" ... />");    ... more content Appending here ...    output.Content.SetHtmlContent(content.ToString());}但是，我在使用标签时添加到标签中的任何数据属性都会附加到span. 我希望将它们附加到input元素上——这可能吗？例如：<styled-checkbox data-foo="bar"></styled-checkbox>在那个例子中，我希望将“data-foo”属性附加到复选框输入中——但我看不到这样做的方法，有可能吗？

Answer 1

您可以使用TagBuilder并处理元素的属性。

[HtmlTargetElement("styled-checkbox")]  

    public class MyCustomTagHelper : TagHelper  

    {  

        public string Name { get; set; }  

        public override void Process(TagHelperContext context, TagHelperOutput output)  

        {  

            output.TagName = "span";  

            output.TagMode = TagMode.StartTagAndEndTag;  

            // collect all attributes of styled-checkbox tag

            var attributes = context.AllAttributes.ToDictionary(a => a.Name, a => a.Value.ToString()); 

            var writer = new System.IO.StringWriter();

            CreateInputTagBuilder(attributes).WriteTo(writer, HtmlEncoder.Default);

            CreateHiddenInputTagBuilder().WriteTo(writer, HtmlEncoder.Default);

            // clear attributes of styled-checkbox

            output.Attributes.Clear();

            output.Content.SetHtmlContent(writer.ToString());

        }  

        private TagBuilder CreateInputTagBuilder(Dictionary<string,string> attributes)

        {

            var inputBuilder = new TagBuilder("input");

            inputBuilder.MergeAttributes(attributes);

            // use MergeAttribute instead of Add, Add method throws exception if an attribute exists

            inputBuilder.MergeAttribute("type","checkbox");

            inputBuilder.MergeAttribute("name",this.Name);

            return inputBuilder;

        }

        private TagBuilder CreateHiddenInputTagBuilder()

        {

            var inputBuilder = new TagBuilder("input");

            inputBuilder.Attributes.Add("type","hidden");

            return inputBuilder;

        }

    }

cshtml:

<styled-checkbox data-foo="bar" value="33" name="saeed"></styled-checkbox>

输出：

<span>

    <input data-foo="bar" name="saeed" type="checkbox" value="33">

    <input type="hidden">

</span>