避免在 MVC 中同时单击按钮答案

【问题标题】：Avoid Simultaneous clicks of buttons in MVC避免在 MVC 中同时单击按钮
【发布时间】：2018-09-11 09:05:15
【问题描述】：

我有一个带有两个按钮的 MVC Web 应用程序 - 保存和提交。当用户第一次提交并在单击提交按钮后同时单击保存按钮时，数据发送会出错。

我对编程很陌生，因此不知道如何避免同时点击。

关于如何处理这个问题有什么建议吗？

谢谢

【问题讨论】：

从服务器获得成功响应后启用保存按钮。 :)

标签： c# asp.net asp.net-mvc logic

【解决方案1】：

您可以执行以下操作：

将提交按钮设置为“提交”按钮（在 html 中呈现为输入类型 =“提交”）
将“保存”按钮设置为普通按钮。

要将保存按钮呈现为普通按钮（呈现为input type=“button”，您可以使用UseSubmitBehavior: False。

然后您可以在其中一个按钮上使用 OnClientClick 并防止另一个按钮被单击。在这里你也可以发挥创意。您可以禁用单击的按钮并显示“正在保存...”，如下所示：

// its a button or document.getElementById
if (button.getAttribute('type') == 'button') {

button.disabled = true;
button.className = "inactive class";
button.value = "Saving, please wait. Have some peanuts while we save...";

【讨论】：

【解决方案2】：

尝试在提交按钮 HTML onclick=" ... "的代码中禁用保存按钮

【讨论】：

【解决方案3】：

使用 jQuery 的简单解决方案：

 $("[type='submit']").on("click", function (e) {

        // !!!IMPORTANT!!!
        e.preventDefault();

        var $self = $(this), $form = $self.closest("form");

        // Valid - before submit
        if ($form.valid()) {

            // Update text in button, ex: Sending..., Loading...
            $self.attr("disabled", "disabled").html("<i class='fa fa-spinner fa-pulse fa-lg fa-fw' aria-hidden='true'></i>Loading...");

            // Block all inputs.
            $form.find(":input:not([type=hidden])").attr("readonly", "readonly");

            // Submit form.
            $form[0].submit();
            return true;
        }
        // !!!IMPORTANT!!!
        return false;
    });

【讨论】：