ASP.NET MVC动态列表格新增行仅插入第一列问题咨询

1. 核心结构破坏问题：Html.BeginCollectionItem 辅助方法默认会在包裹内容外层生成一个 <div> 标签，你将表格行 <tr> 写在了这个using块内部，导致最终返回的新增行模板结构为 <div><tr>...</tr></div>。浏览器解析表格时不允许 <tbody> 下直接出现 <div> 元素，会自动将非法的div移动到第一列内部，其余单元格就会整体向右错位。
2. 局部视图不一致问题：主视图初始渲染现有行用的是 _PurchaseEmployees 局部视图，而新增行接口返回的是 _PurchaseDetails 局部视图，如果两个视图的列结构、列数不一致也会触发错位。
3. 删除逻辑错误：原有删除按钮的点击事件仅会删除按钮所在的 <td> 单元格，无法删除整行，也可能后续引发行列不匹配问题。
4. 列数匹配问题：如果后端接口返回的 Model.PurchasingDetailsSup 数量和主视图表头的 Model.SuppList 数量不一致，会导致行列数不匹配，也会出现错位。

1. 修正局部视图结构 #

调整代码把BeginCollectionItem的输出内容放到单元格内，避免破坏表格结构，同时修正删除逻辑：

@model Asp_PASMVC.Models.PurchasingDetails
@using Asp_PASMVC.Infrastructure

@{ 
    List<SelectListItem> Suppliers = Session["SupplierList"] as List<SelectListItem>;
    List<SelectListItem> ItmDescription = Session["Itm_DesList"] as List<SelectListItem>;
}

<tr>
    <td>
        @* 将BeginCollectionItem移入第一个td内，避免外层生成div破坏表格结构 *@
        @using (Html.BeginCollectionItem("PurchasingItemList"))
        {
            @Html.HiddenFor(model => model.TempID)
            @Html.EditorFor(model => model.Item_Description, new { htmlAttributes = new { @class = "" } })
        }
    </td>
    <td>@Html.EditorFor(model => model.Qty, new { htmlAttributes = new { @class = "" } })</td>
    @for (int i = 0; i < Model.PurchasingDetailsSup.Count; i++)
    {
        <td>@Html.EditorFor(model => model.PurchasingDetailsSup[i].Unit_Amount, new { htmlAttributes = new { @class = "" } })</td>
    }
    @* 修正删除逻辑，找到父级tr再删除 *@
    <td><a href="#" onclick="$(this).closest('tr').remove();">Delete</a></td>
</tr>

2. 统一局部视图 #

主视图初始渲染行也改为使用 _PurchaseDetails 局部视图，保证新增行和已有行结构完全一致，修改主视图的渲染逻辑：

<tbody id="IteMLi">
    @if (Model != null && Model.PurchasingItemList != null)
    {
        foreach (Asp_PASMVC.Models.PurchasingDetails Emp in Model.PurchasingItemList)
        {
            Html.RenderPartial("_PurchaseDetails", Emp);
        }
    }
</tbody>

3. 校验列数一致性 #

在后端接口中添加校验，保证返回的PurchasingDetailsSup集合数量和主视图表头的SuppList数量一致，避免列数不匹配引发的错位。

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