ASP.NET MVC中Html.BeginForm与Ajax提交无法同时触发问题

问题原因 #

• 执行时序冲突：type="submit" 按钮的默认表单提交行为、onclick 绑定的异步Ajax请求属于两个独立执行流，浏览器处理时会出现资源抢占：要么Ajax请求被表单提交触发的页面跳转强行中断，要么Ajax回调抢先执行打断提交流程。你当前在Ajax的error回调中直接写了window.location.reload()，只要删图请求出现参数错误、鉴权失败等问题，页面会立刻重载，表单根本没有机会发起Post/Edit请求。
• 逻辑不可控：Ajax默认是异步执行模式，就算偶发表单能正常提交，也无法保证删图请求在表单提交前执行完成，会导致Edit动作读取到未删除的脏数据。

修复步骤 #

1. 调整表单声明，增加唯一标识（推荐） #

给Html.BeginForm增加id属性，方便JS精准定位表单，避免选到页面其他表单元素：

@using (Html.BeginForm("Edit", "Post", FormMethod.Post, new { enctype = "multipart/form-data", id = "postEditForm" }))

2. 修改提交按钮，去掉行内onclick绑定 #

把原来绑定了行内点击事件的提交按钮，改成不带行内事件的普通submit按钮：

<input type="submit" value="Save" class="btn btn-default" />

3. 重写JS逻辑，按顺序执行两个动作 #

核心逻辑是监听表单的submit事件，先阻止默认的立即提交行为，等删图Ajax请求执行完成后，再手动触发表单提交，避免两个动作互相冲突。修改后的脚本如下：

<script>
    let deletedImages = [];
    function Remove(id, e) {
        deletedImages.push(id);
        console.log(deletedImages);
        $(e).fadeOut(1000);
        $(e).next().fadeOut(1000);
    }

    $(function () {
        const $editForm = $("#postEditForm");
        $editForm.on("submit", function (e) {
            // 阻止表单默认立即提交的行为
            e.preventDefault();

            // 没有待删除图片时直接提交表单，无需发Ajax
            if (deletedImages.length === 0) {
                $editForm.off("submit").submit();
                return;
            }

            // 先执行删图请求
            $.ajax({
                type: 'POST',
                url: "@Url.Action("DeleteImages", "Image")",
                data: { "deletedImages": deletedImages },
                success: function (data) {
                    // 删图成功后，解绑submit事件避免循环触发，手动提交表单
                    $editForm.off("submit").submit();
                },
                error: function (xhr) {
                    // 删图失败时给用户选择权限，不要直接重载页面
                    if (confirm("关联图片删除失败，是否继续保存内容？")) {
                        $editForm.off("submit").submit();
                    }
                }
            });
        })
    })
</script>

注意：不要在异步请求的回调中随意写页面跳转、重载逻辑，否则会直接中断所有未完成的请求和页面交互流程。如果需要多个动作按顺序执行，必须等前一个异步动作返回结果后，再触发下一个动作。

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