ASP.NET MVC5中点击后禁用提交按钮并确保表单提交的实现

你遇到的问题我太熟悉了——直接在onclick里禁用按钮会导致浏览器不把这个提交按钮的参数传到服务器，而ASP.NET MVC的Action往往依赖提交按钮的存在来触发（尤其是多个提交按钮的场景），所以表单就提交失败了。下面给你几个靠谱的解决方案：

方法一：简单延迟禁用（快速上手） #

给按钮的禁用操作加个极短的延迟，让浏览器先完成表单提交的请求发送，再禁用按钮：

<input type="submit" value="Create" onclick="setTimeout(() => this.disabled = true, 100);" />

这个方法优点是代码少，不用改太多，但要注意如果你的表单有客户端验证，可能会出现验证不通过但按钮还是被禁用的情况，所以更推荐下面的方法。

方法二：结合jQuery验证的优雅处理（推荐） #

既然你已经引用了jqueryval，可以利用它的表单验证机制，确保验证通过后再禁用按钮，同时还能给用户加个加载提示：

@section scripts {
    @Scripts.Render("~/bundles/jqueryajaxval")
    @Scripts.Render("~/bundles/jqueryval")
    <script>
        $(document).ready(function() {
            // 监听表单提交事件
            $('form').submit(function() {
                // 先检查客户端验证是否通过
                if ($(this).valid()) {
                    // 找到当前表单的提交按钮，禁用并修改文本提示
                    const submitBtn = $('input[type="submit"]', this);
                    submitBtn.prop('disabled', true);
                    submitBtn.val('Creating...');
                }
            });
        });
    </script>
}

如果你的表单有多个提交按钮，建议给Create按钮加个ID，精准选择：

<input type="submit" id="createBtn" value="Create" />

然后修改脚本：

$('#createBtn').click(function(e) {
    const form = $(this).closest('form');
    // 验证不通过就阻止提交，避免按钮被禁用
    if (!form.valid()) {
        e.preventDefault();
        return;
    }
    // 验证通过后禁用按钮
    $(this).prop('disabled', true).val('Creating...');
});

额外提醒：服务器端也要防重复提交 #

客户端的禁用只是提升用户体验，懂技术的人可以绕过客户端限制，所以一定要在服务器端加一层防护：

• 可以在表单里添加@Html.AntiForgeryToken()，Action里用[ValidateAntiForgeryToken]特性，防止CSRF的同时也能一定程度防重复提交；
• 或者生成一个唯一的请求标识（比如存在Session里），用户提交后就标记这个标识已使用，重复提交就直接拒绝。

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