标签助手内的 ASP.NET Core 输入标签答案

【问题标题】：ASP.NET Core input tag inside tag helper标签助手内的 ASP.NET Core 输入标签
【发布时间】：2023-04-03 10:10:02
【问题描述】：

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

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

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

并且不映射到模型的属性

如何解决这个问题？

【问题讨论】：

标签： c# asp.net-core

【解决方案1】：

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

您的代码只是生成了asp-for 元素，asp-for 标签助手不再起作用，您需要参考tag helper source code here 了解如何自定义标签助手。

如下更改您的代码：

[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());
        }
    }
}

【讨论】：