ASP.NET动态Input标签的Model绑定及asp-for属性配置问题

嘿，这个问题我太熟了！动态表单绑定到ASP.NET模型确实是个常见需求，用Dictionary或者List都能搞定，咱们一步步来拆解：

既然你倾向用Dictionary，那可以这样设计模型——把每一组Foo和Bar封装成一个实体类，再用Dictionary来承载这些动态条目：

// 承载单组Foo/Bar的实体
public class DetailEntry
{
    public string Foo { get; set; }
    public string Bar { get; set; }
}

// 你的ViewModel
public class YourFormViewModel
{
    // 用字符串作为键（比如索引编号），值是DetailEntry实例
    public Dictionary<string, DetailEntry> Details { get; set; } = new Dictionary<string, DetailEntry>();
}

如果你觉得管理Dictionary的键太麻烦，其实用List<DetailEntry>会更直观，模型绑定同样稳定，这个后面也会提到。

ASP.NET MVC的模型绑定依赖表单字段的name属性，而asp-for会帮你自动生成符合绑定规则的name值。

初始HTML的写法 #

给第一组input指定正确的asp-for路径：

<form asp-action="YourSubmitAction" method="post">
    <div id="details">
        <label>More details</label>
        <!-- 第一组用索引"0"作为Dictionary的键 -->
        <input placeholder="Foo" asp-for="Details['0'].Foo" />
        <input placeholder="Bar" asp-for="Details['0'].Bar" />
    </div>
    <button id="add-details" type="button">Add more</button>
    <button type="submit">Submit</button>
</form>

动态添加的JS逻辑 #

你需要维护一个递增的索引，确保每一组新的input都有唯一的键，这样模型绑定才能正确识别：

// 初始索引从1开始，因为第一组已经用了0
let currentDetailIndex = 1;

$("#add-details").click(function(){
    // 生成带唯一索引的asp-for属性
    const fooInput = `<input placeholder="Foo" asp-for="Details['${currentDetailIndex}'].Foo" />`;
    const barInput = `<input placeholder="Bar" asp-for="Details['${currentDetailIndex}'].Bar" />`;
    
    $("#details").append(fooInput + barInput);
    
    currentDetailIndex++;
});

备选：用List的更简单写法 #

如果换成List，模型只需要把Dictionary改成List：

public class YourFormViewModel
{
    public List<DetailEntry> Details { get; set; } = new List<DetailEntry>();
}

对应的asp-for格式改成索引数组的形式：

<!-- 初始组 -->
<input placeholder="Foo" asp-for="Details[0].Foo" />
<input placeholder="Bar" asp-for="Details[0].Bar" />

JS里的逻辑几乎一样，只是asp-for的写法调整：

let currentDetailIndex = 1;

$("#add-details").click(function(){
    const fooInput = `<input placeholder="Foo" asp-for="Details[${currentDetailIndex}].Foo" />`;
    const barInput = `<input placeholder="Bar" asp-for="Details[${currentDetailIndex}].Bar" />`;
    
    $("#details").append(fooInput + barInput);
    
    currentDetailIndex++;
});

这种方式不需要管理字符串键，用数字索引更省心，模型绑定的效果和Dictionary完全一致。

不管用Dictionary还是List，Controller的接收逻辑都很简单，直接把ViewModel作为参数传入即可：

[HttpPost]
public IActionResult YourSubmitAction(YourFormViewModel model)
{
    // 遍历所有动态添加的条目
    foreach(var detailEntry in model.Details)
    {
        // 如果是Dictionary，detailEntry是键值对；如果是List，直接是DetailEntry实例
        string fooValue = detailEntry.Value.Foo; // Dictionary的写法
        // string fooValue = detailEntry.Foo; // List的写法
        string barValue = detailEntry.Value.Bar; // Dictionary的写法
        // string barValue = detailEntry.Bar; // List的写法
        
        // 这里写你的业务逻辑
    }
    
    return RedirectToAction("Success");
}

如果你的表单用到了ASP.NET的客户端验证，动态添加input后需要重新初始化验证规则，否则新添加的字段不会触发验证，只需要在JS的append之后加一句：

$.validator.unobtrusive.parse($("form"));

内容的提问来源于stack exchange，提问作者Antoine C.