ASP.NET CRUD主从表仅保存单条明细记录问题求助

核心问题定位 #

前端动态生成的输入控件name属性不符合ASP.NET模型绑定的索引格式，导致DefaultModelBinder无法识别多条明细数据，仅能解析第一条。正确的name格式必须遵循[连续索引].属性名规则，比如Details[0].ProductName、Details[1].ProductName，索引需从0开始连续递增。

前端JS修复要点 #

动态添加明细控件时，必须按当前明细项数量生成带连续索引的name属性，示例代码如下：

// 获取当前已有的明细项数量
let detailCount = document.querySelectorAll('.detail-item').length;
// 生成新的明细项HTML，确保name属性带正确索引
let newDetailHtml = `
  <div class="detail-item">
    <input type="text" name="Details[${detailCount}].ProductName" placeholder="产品名称" />
    <input type="number" name="Details[${detailCount}].Quantity" placeholder="数量" />
    <button onclick="removeDetail(this)">删除</button>
  </div>
`;
// 将新项插入到明细容器中
document.getElementById('details-container').insertAdjacentHTML('beforeend', newDetailHtml);

删除明细项后，需重新整理剩余控件的索引，避免索引断裂导致绑定失败，示例删除逻辑：

function removeDetail(btn) {
  btn.parentElement.remove();
  // 重新遍历剩余明细项，更新name属性的索引
  document.querySelectorAll('.detail-item').forEach((item, index) => {
    // 更新每个输入框的name属性
    item.querySelector('input[name^="Details["]').name = `Details[${index}].ProductName`;
    item.querySelector('input[name*=".Quantity"]').name = `Details[${index}].Quantity`;
  });
}

后端模型与Action检查 #

1. 主模型必须包含可写的List类型明细集合：

public class Order
{
    public int Id { get; set; }
    public string OrderNumber { get; set; }
    // 必须用List而非IEnumerable，IEnumerable不支持模型绑定
    public List<OrderDetail> Details { get; set; } = new List<OrderDetail>();
}

public class OrderDetail
{
    public int Id { get; set; }
    public string ProductName { get; set; }
    public int Quantity { get; set; }
}

2. Action直接接收主模型参数：

[HttpPost]
public IActionResult Create(Order model)
{
    if (ModelState.IsValid)
    {
        // 此时model.Details会包含所有前端提交的明细记录
        _dbContext.Orders.Add(model);
        _dbContext.SaveChanges();
        return RedirectToAction(nameof(Index));
    }
    return View(model);
}

CSHTML初始明细渲染注意事项 #

如果页面需要渲染初始明细数据，必须用for循环而非foreach，因为foreach无法生成带索引的name属性：

@model Order

<div id="details-container">
    @for (int i = 0; i < Model.Details.Count; i++)
    {
        <div class="detail-item">
            @Html.TextBoxFor(m => m.Details[i].ProductName, new { @class = "form-control" })
            @Html.TextBoxFor(m => m.Details[i].Quantity, new { @class = "form-control" })
            <button onclick="removeDetail(this)">删除</button>
        </div>
    }
</div>
<button onclick="addDetail()">添加明细</button>

验证方法 #

打开浏览器开发者工具（F12），切换到「Elements」标签，检查动态生成的输入框name属性是否符合Details[索引].属性名格式；提交表单时，查看「Network」标签中Form Data的参数，确认所有明细项都已提交。

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