ASP.NET Core 创建自定义输入标签助手答案

【问题标题】：ASP.NET Core creating custom input tag helperASP.NET Core 创建自定义输入标签助手
【发布时间】：2021-04-15 15:25:33
【问题描述】：

我有一个包含多个字段的表单，每个字段都可以接受多个输入（基于这个问题add multiple tags to form in 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" />

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

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

[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"/>

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

【问题讨论】：

你注册了你的 taghelper 吗？
@DanielA.White 是的

标签： c# asp.net-core

【解决方案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 来指定原始剃须刀代码中使用的映射属性。

【讨论】：