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" >
                    <div id="teams-container" class="col-md-12 multiple-input-container" input-name="teams-hidden"></div>
                </div>
                <input asp-for="Teams" type="hidden" id="teams-hidden"/>

我使用标签助手来重用这段代码

[HtmlTargetElement("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='{Name}-input' container-name='{Name}-container'>
            <div class='row justify-content-end' >
                <div id='{Name}-container' class='col-md-12 multiple-input-container' input-name='{Name}-hidden'></div>
            </div>
            <input asp-for='{For.Name}' type='hidden' id='teams-hidden' />");
    }
}

标签助手以这样的形式使用

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

我需要在 map 到模型的 Teams 属性的多输入标签内隐藏输入，但是在标签处理后隐藏输入在浏览器中看起来像这样

<input asp-for="Teams" type="hidden" id="teams-hidden">

而且 map 不是模型的属性

如何解决这个问题？

Answer 1

首先需要知道asp-for标签助手会在前端生成id和name元素（参考这里），默认绑定属性值。

您的代码只是生成了asp-for元素， asp-for标签助手不再起作用，您需要参考此处的标签助手源代码来了解如何自定义标签助手。

更改您的代码，如下所示：

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

    private readonly IHtmlGenerator _generator;
    [ViewContext]
    public ViewContext ViewContext { get; set; }

    public MultipleInputsTagHelper(IHtmlGenerator generator)
    {
        _generator = generator;
    }
    public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {
        using (var writer = new StringWriter())
        {
            writer.Write(@$"<input type='text' class='multiple-input form-control text-right' id='{Name}-input' container-name='{Name}-container'>
        <div class='row justify-content-end' ><div id='{Name}-container' class='col-md-12 multiple-input-container' input-name='{Name}-hidden'></div>
        </div>");               
            
            //here is the importance.....
            //for how to generate and bind the property data 
            var textArea = _generator.GenerateTextBox(ViewContext,
                                For.ModelExplorer,
                                For.Name,
                                For.Model,
                                null,
                                new { @type = "hidden",@id= "teams-hidden" });

            textArea.WriteTo(writer, NullHtmlEncoder.Default);               
            output.Content.SetHtmlContent(writer.ToString());
        }
    }
}