Добавить атрибуты данных в дочерний элемент DOM в помощнике по тегам - PullRequest
Новая
       13

Добавить атрибуты данных в дочерний элемент DOM в помощнике по тегам

0 голосов
/ 25 апреля 2019

У меня есть помощник по тегам, styled-checkbox, который оборачивает <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' был добавлен к входу флажка - но я не вижу способа сделать это, возможно?

1 Ответ

1 голос
/ 25 апреля 2019

Вы можете использовать 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>
...