Ajax动态添加的List<T>无法绑定到ASP.NET Core模型求助

ASP.NET Core的集合类型模型绑定依赖严格的表单元素name属性格式，必须遵循集合属性名[索引].子属性名的规则（例如NewReportDetails[0].ShiftId、NewReportDetails[1].Content）。动态添加子项时，若生成的name格式不符合该规则，即便Request.Form能捕获到数据，模型绑定器也无法将数据映射到List<ShiftReportDetail>属性中。

1. 修正动态元素的name属性格式 #

修改JavaScript代码，确保新增子项的name属性按递增索引生成，完全匹配模型绑定要求：

示例模板与JS代码

先准备隐藏的子项模板：

<!-- 隐藏的子项模板，用__index__作为索引占位符 -->
<div id="detail-template" style="display:none;">
    <div class="detail-item">
        <input type="text" name="NewReportDetails[__index__].ShiftId" placeholder="班次ID" />
        <textarea name="NewReportDetails[__index__].Content" placeholder="详情内容"></textarea>
        <button type="button" class="remove-btn">删除</button>
    </div>
</div>

<!-- 存放动态子项的容器 -->
<div id="details-container"></div>
<button type="button" id="add-detail-btn">添加明细</button>

对应的JavaScript逻辑：

let currentIndex = 0;

// 添加明细按钮事件
document.getElementById('add-detail-btn').addEventListener('click', function() {
    // 克隆模板并替换索引占位符
    const templateHtml = document.getElementById('detail-template').innerHTML;
    const newItemHtml = templateHtml.replace(/__index__/g, currentIndex);
    
    // 将新项插入容器
    document.getElementById('details-container').insertAdjacentHTML('beforeend', newItemHtml);
    
    // 绑定删除按钮事件
    bindRemoveEvent();
    
    currentIndex++;
});

// 绑定删除事件
function bindRemoveEvent() {
    document.querySelectorAll('.remove-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            // 删除当前子项
            this.parentElement.remove();
            // 重新整理所有子项的索引（避免索引断层，可选但推荐）
            reindexDetailItems();
        });
    });
}

// 重新整理子项索引
function reindexDetailItems() {
    const items = document.querySelectorAll('.detail-item');
    items.forEach((item, newIndex) => {
        // 更新当前项所有表单元素的name属性索引
        item.querySelectorAll('input, textarea').forEach(input => {
            input.name = input.name.replace(/\[(\d+)\]/, `[${newIndex}]`);
        });
    });
    currentIndex = items.length;
}

2. 检查后端模型绑定配置 #

确保你的ViewModel没有通过[Bind]特性遗漏NewReportDetails属性：

// 错误示例：遗漏了NewReportDetails，导致绑定失败
[Bind("Id, Title")]
public class ShiftReportViewModel
{
    public int Id { get; set; }
    public string Title { get; set; }
    public List<ShiftReportDetail> NewReportDetails { get; set; }
}

// 正确示例：要么包含NewReportDetails，要么直接移除[Bind]让自动绑定生效
public class ShiftReportViewModel
{
    public int Id { get; set; }
    public string Title { get; set; }
    public List<ShiftReportDetail> NewReportDetails { get; set; } = new List<ShiftReportDetail>();
}

3. 确认表单提交方式 #

如果是Ajax提交，需使用表单序列化方法（而非直接传JSON）来保留正确的name格式：

// 示例：jQuery Ajax提交
$('#submit-form').click(function() {
    $.ajax({
        url: '/ShiftReport/Submit',
        type: 'POST',
        data: $('#report-form').serialize(), // 自动保留正确的name格式
        success: function(res) {
            // 处理返回结果
        }
    });
});

在Controller的Action中打印Request.Form的所有键，确认格式是否正确：

[HttpPost]
public IActionResult Submit(ShiftReportViewModel model)
{
    // 打印所有表单键，验证是否符合NewReportDetails[0].XXX格式
    foreach (var key in Request.Form.Keys)
    {
        Console.WriteLine(key);
    }
    // 后续逻辑...
    return View(model);
}

若键名格式正确，模型绑定会自动将数据填充到NewReportDetails列表中。

内容的提问来源于stack exchange，提问作者tachidow