在.NET 5 MVC中如何实现每行带输入框可单独更新数据的表格

问题原因 #

你遇到的问题确实是所有行的desc输入框name、id属性重复导致的：浏览器提交全局表单时，只会识别第一个匹配name属性的输入框值，所以只有第一行的更新能正常传参。

可行方案（优先推荐）：每行使用独立Form表单 #

该方案不需要修改后端接收逻辑，完全避免参数名冲突问题，是单行提交表格场景的通用实现：

<!-- 去掉外层的全局form，将form放在每行内部 -->
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<table class="table table-hover table-responsive-sm display">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Descripcion)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Activa)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <!-- 每行对应一个独立表单，提交时只会传当前行内的输入值 -->
                <form asp-action="Index" method="post">
                    <td>
                        <!-- 主键可以设为只读，也可以改成隐藏域 -->
                        <input name="AreaClave" value="@item.AreaClave" readonly />
                    </td>
                    <td>
                        <!-- 不需要固定id，如有需要可以加唯一后缀：id="desc_@item.AreaClave" -->
                        <input name="desc" value="@item.Descripcion" />
                    </td>
                    <td>
                        <input name="activa" value="@item.Activa" />
                    </td>
                    <td>
                        <div class="form-group">
                            <button type="submit" name="action">Update</button>
                        </div>
                    </td>
                </form>
            </tr>
        }
    </tbody>
</table>

可选方案：单Form+索引绑定 #

如果你的场景需要支持批量提交同时支持单行更新，可以为输入框添加索引后缀，配合JS提交当前行参数：

• 输入框name改为name="[ @index ].desc"格式，index为循环的序号
• 点击更新按钮时用JS截取当前行的所有输入值，异步提交到后端

注意事项 #

如果需要用ID选择元素操作输入框，不要用固定的id="desc"，改为id="desc_@item.AreaClave"这种带行唯一标识的格式，避免ID重复导致的JS操作异常。

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