在标签助手中将数据属性附加到子 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")]&nbsp;&nbsp;&nbsp; &nbsp; public class MyCustomTagHelper : TagHelper&nbsp;&nbsp;&nbsp; &nbsp; {&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; public string Name { get; set; }&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; public override void Process(TagHelperContext context, TagHelperOutput output)&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; output.TagName = "span";&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; output.TagMode = TagMode.StartTagAndEndTag;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // collect all attributes of styled-checkbox tag&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var attributes = context.AllAttributes.ToDictionary(a => a.Name, a => a.Value.ToString());&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var writer = new System.IO.StringWriter();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; CreateInputTagBuilder(attributes).WriteTo(writer, HtmlEncoder.Default);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; CreateHiddenInputTagBuilder().WriteTo(writer, HtmlEncoder.Default);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // clear attributes of styled-checkbox&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; output.Attributes.Clear();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; output.Content.SetHtmlContent(writer.ToString());&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; private TagBuilder CreateInputTagBuilder(Dictionary<string,string> attributes)&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var inputBuilder = new TagBuilder("input");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; inputBuilder.MergeAttributes(attributes);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // use MergeAttribute instead of Add, Add method throws exception if an attribute exists&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; inputBuilder.MergeAttribute("type","checkbox");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; inputBuilder.MergeAttribute("name",this.Name);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return inputBuilder;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; private TagBuilder CreateHiddenInputTagBuilder()&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var inputBuilder = new TagBuilder("input");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; inputBuilder.Attributes.Add("type","hidden");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return inputBuilder;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }cshtml:<styled-checkbox data-foo="bar" value="33" name="saeed"></styled-checkbox>输出：<span>&nbsp; &nbsp; <input data-foo="bar" name="saeed" type="checkbox" value="33">&nbsp; &nbsp; <input type="hidden"></span>