我有一個(gè)標(biāo)簽助手 ，styled-checkbox它包裝了 a<input type="checkbox">并添加了其他元素，這樣我就得到了一個(gè)自定義樣式的復(fù)選框。最終呈現(xiàn)的復(fù)選框具有以下 DOM 結(jié)構(gòu)：<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());}但是，我在使用標(biāo)簽時(shí)添加到標(biāo)簽中的任何數(shù)據(jù)屬性都會(huì)附加到span. 我希望將它們附加到input元素上——這可能嗎？例如：<styled-checkbox data-foo="bar"></styled-checkbox>在那個(gè)例子中，我希望將“data-foo”屬性附加到復(fù)選框輸入中——但我看不到這樣做的方法，有可能嗎？
1 回答
SMILET
TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超4個(gè)贊
您可以使用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>
- 1 回答
- 0 關(guān)注
- 75 瀏覽
添加回答
舉報(bào)
0/150
提交
取消