时间戳

首页 > 解决方案 > ASP.NET Core 创建自定义输入标签助手

c# - ASP.NET Core 创建自定义输入标签助手

问题描述

我有一个包含多个字段的表单，每个字段都可以接受多个输入（基于这个问题添加多个标签以在 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"/>

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

标签： c#asp.net-core

解决方案

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

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

推荐阅读