ASP.NET Core MVC表格首行无法编辑的原因及解决方案咨询

使用@foreach (var item in Model)渲染表格行，每行包含编辑按钮触发对应模态框，但仅首行的编辑表单无法提交：

• 首行点击保存按钮后无POST请求，URL栏出现超长的__RequestVerificationToken参数
• 非首行均正常提交；若删除首行，原第二行成为新首行后也无法提交，说明问题与行的位置而非数据有关

相关代码如下：

Index.cshtml 触发模态框代码 #

<td style="text-align: center">
    <a asp-action="Edit" data-bs-toggle="modal" data-bs-target=" @("#editNode-" + item.Id)">
        <i class="fas fa-edit" ></i>
    </a>
    @await Html.PartialAsync("_EditNodePartialView", item)
</td>

_EditNodePartialView 模态框代码 #

@model UnidAdmin.Models.BundleNodeViewModel

<div class="modal fade" id="editNode-@Model.Id">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" style="color:darkorange">Edit Node @Model.Id Bundle @Model.BundleId</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close" style="background-color:transparent; color:aquamarine; border-style:none">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form asp-controller="Nodes" asp-action="Edit" asp-route-id="@Model.Id" asp-route-src="bndlnd" method="post">
                    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                     <div class="row pb-3">
                        <div class="col form-group text-start">
                            <label asp-for="Name" class="control-label text-start" style="color:darkorange">Node Name</label>
                            <input asp-for="Name" class="form-control" />
                            <span asp-validation-for="Name" class="text-danger"></span>
                        </div>
                        <div class="col form-group text-start">
                            <label asp-for="Comment" class="control-label text-start" style="color:darkorange"></label>
                            <input asp-for="Comment" class="form-control" />
                            <span asp-validation-for="Comment" class="text-danger"></span>
                        </div>
                    </div>
                    <div class="row pb-3">
                        <div class="col form-group form-check text-center">
                            <label class="form-check-label text-start" style="color:darkorange">
                                <input class="form-check-input" asp-for="IsTest" /> @Html.DisplayNameFor(model => model.IsTest)
                            </label>
                        </div>
                        <div class="col form-group form-check text-center">
                            <label class="form-check-label text-start" style="color:darkorange">
                                <input class="form-check-input" asp-for="IsLocked" /> @Html.DisplayNameFor(model => model.IsLocked)
                            </label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary" onclick="displayBusyIndicator()" data-bs-dismiss="modal">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

控制器Edit方法 #

public async Task<IActionResult> Edit(int id, [FromForm]Node editnode, string src)
{
    // 业务代码
    return RedirectToAction(nameof(Index));
}

针对这个问题，按以下步骤修复：

• 移除模态框目标ID前的空格
  原代码中data-bs-target=" @("#editNode-" + item.Id)"的引号内开头有多余空格，导致目标ID匹配异常。修改为：

  <a asp-action="Edit" data-bs-toggle="modal" data-bs-target="@("#editNode-" + item.Id)">
  

• 移除提交按钮的data-bs-dismiss="modal"属性
  提交按钮同时设置type="submit"和data-bs-dismiss="modal"会导致模态框在表单提交前就关闭，中断POST请求。首行因DOM加载顺序问题，这个中断表现得更明显。修改保存按钮：

  <button type="submit" class="btn btn-primary" onclick="displayBusyIndicator()">Save</button>
  

  由于当前控制器返回后会重定向到Index页面，页面刷新后模态框会自然关闭，无需额外处理。

• 可选：确保验证令牌唯一
  多表单场景下，手动为每个表单指定asp-antiforgery="true"，避免首行令牌生成异常：

  <form asp-controller="Nodes" asp-action="Edit" asp-route-id="@Model.Id" asp-route-src="bndlnd" method="post" asp-antiforgery="true">
  

完成以上修改后，首行的编辑表单即可正常提交。

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