ASP.NET 核心创建自定义输入标签助手

Question

我有一个包含多个字段的表单，每个字段都可以接受多个输入（基于这个问题添加多个标签以在 net core 3.1 mvc 中形成）

目前它看起来像这样

<input type="text" class="multiple-input form-control text-right" id="teams-input" container-name="teams-container">
                <div class="row justify-content-end" input-name="teams-hidden">
                    <div id="teams-container" class="col-md-12 multiple-input-container"></div>
                </div>
                <input asp-for="Teams" type="hidden" id="teams-hidden" />

问题是，我在多个 forms 中多次使用类似的东西，所以我想为它制作自定义标签助手。

目前这个标签助手看起来像这样

[HtmlTargetElement("input", Attributes = "[type = multi-input]")]
public class MultipleInputsTagHelper : TagHelper
{
    public ModelExpression For { get; set; }

    public string Name { get; set; }

    public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {
        output.Content.SetHtmlContent(@$"<input type='text' class='multiple-input form-control text-right' id='teams-input' container-name='{Name}-container'>
            <div class='row justify-content-end' input-name='{Name}-hidden'>
                <div id='{Name}-container' class='col-md-12 multiple-input-container'></div>
            </div>
            <input asp-for='{For}' type='hidden' id='{Name}-hidden' />");
    }
}

并以这样的形式使用

<input multi-input asp-for="Teams" asp-name="teams"/>

但是我的标签助手由于某种原因没有申请。 可能是什么问题，以及如何正确制作自定义输入标签助手？

Answer 1

您没有指定与相应属性映射的属性名称，如下所示：

[HtmlTargetElement("input", Attributes = "multi-input")]
public class MultipleInputsTagHelper : TagHelper
{
  [HtmlAttributeName("asp-for")]
  public ModelExpression For { get; set; }
  [HtmlAttributeName("asp-name")]
  public string Name { get; set; }

  public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
  {
    output.Content.SetHtmlContent(@$"<input type='text' class='multiple-input form-control text-right' id='teams-input' container-name='{Name}-container'>
        <div class='row justify-content-end' input-name='{Name}-hidden'>
            <div id='{Name}-container' class='col-md-12 multiple-input-container'></div>
        </div>
        <input asp-for='{For}' type='hidden' id='{Name}-hidden' />");
  }
}

我们使用HtmlAttributeNameAttribute来指定原始 razor 代码中使用的映射属性。