点击ASP.NET表单按钮后禁用以防止重复点击。

Question

我有一个ASP.NET按钮，我需要在用户点击后禁用它，以防止重复点击。一旦提交完成，它必须再次启用。有人可以帮我吗？

- Goutham

---

在您完成所需的代码后，只需简单地使用 button.enable = false 即可。 - Developer

这是一个普通的PostBack还是AJAX请求？ - Jonathan Freeland

如果您不想逐个按钮修复此问题，请查看我的另一个问题的答案：https://dev59.com/D2025IYBdhLWcg3wOzTX#28844217 - sparebytes

Answer 1

这里提供了一种适用于 ASP.NET 按钮对象的解决方案。在前端，将以下属性添加到您的 asp:Button 定义中：

<asp:Button ... OnClientClick="this.disabled=true;" UseSubmitBehavior="false" />

在后端，在点击事件处理程序方法调用中，最好在finally块中的结尾添加以下代码。

myButton.Enabled = true;

- kmonty

---

第一天使用ASP.NET时，我的按钮被禁用了，但从未重新启用，我可能错过什么？ - Muds

它不起作用。我的按钮仍然可用，而且在它仍在处理响应时我可以再次点击它。 - Zizzipupp

Answer 2

我找到了这个，并且它有效：

btnSave.Attributes.Add(
    "onclick", 
    "this.disabled = true;" + ClientScript.GetPostBackEventReference(btnSave, null) + ";");

- gkneo

---

客户端脚本是一种在Web页面上运行的脚本语言，通常是JavaScript。它可以用来改变页面的外观、响应用户的交互操作、以及与服务器进行数据交换等功能。 - Bob Swager

我认为他们指的是 System.Web.UI 命名空间中的 Page.ClientScript。 - mn.

Answer 3

查看此链接，这是最简单的方式，并且不会禁用验证。

http://aspsnippets.com/Articles/Disable-Button-before-Page-PostBack-in-ASP.Net.aspx

如果你有例如：

  <form id="form1" runat="server">
      <asp:Button ID="Button1" runat="server" Text="Button1" OnClick="Button1_Clicked" />
  </form>

那么你可以使用

  <script type = "text/javascript">
  function DisableButton() {
      document.getElementById("<%=Button1.ClientID %>").disabled = true;
  }
  window.onbeforeunload = DisableButton;
  </script>

要在页面进行服务器回发并且验证成功后禁用按钮，只需像页面一样禁用即可。

- mohan padmanabhan

---

不幸的是，这似乎不起作用。在等待帖子完成时，按钮仍然处于启用状态（这意味着您可以多次单击它）。 - MC9000

非常棒的解决方案！它对我来说完美地运作了，谢谢！！ - Josue Barrios

Answer 4

如果你想防止因为服务器端代码响应缓慢而导致的双击问题，那么这个方法很有效：

<asp:Button ... OnClientClick="this.disabled=true;" UseSubmitBehavior="false" />

尝试在服务器的_Click()事件上放置一个Threading.Thread.Sleep(5000)，你会看到在服务器处理点击事件的时间内，按钮是被禁用的。

也不需要在服务器端的代码中重新启用按钮！

你还可以改变按钮的文本，就像在如何在点击后禁用提交按钮？中建议的那样。

   this.disabled=true; this.value='Sending…';

- Shaun Keon

---

完成了我需要达成的目标，非常完美。您还可以添加 this.style.backgroundcolor = '#abcdef'; 来更改元素的样式方面。 - Shawn Gavett

这个完美地运作。只想强调需要 UseSubmitBehavior="false"，如果没有它，你的按钮点击将不会在代码后台触发。 - Nick

@ShawnGavett 你在哪里添加那行代码？ - Zizzipupp

@Zizzipupp - 你可以创建一个CSS类并将其应用于按钮的CssClass属性，或者使用Style属性进行内联样式。 - Shawn Gavett

Answer 5

只需要为ASP按钮添加2个属性：

OnClientClick="this.disabled='true';"  UseSubmitBehavior="false"

e.g.

<asp:Button ID="Button1" runat="server" Text="TEST" OnClientClick="this.disabled='true';"  UseSubmitBehavior="false" CssClass="button-content btnwidth" OnClick="ServerSideMethod_Click"  />

更多详情请查看：

https://bytes.com/topic/asp-net/answers/918280-disable-button-click-prevent-multiple-postbacks

。该链接介绍了如何在ASP.NET中禁用按钮点击以防止多次提交。

- Sachin Karche

Answer 6

如果有人在意的话，我最初是找到了这篇文章，但我在页面上使用了ASP.NET内置的验证。这些解决方案可以工作，但即使已经通过验证，也会禁用按钮。您可以使用以下代码，以便仅在通过页面验证后才禁用按钮。

<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Submit" OnClientClick=" if ( Page_ClientValidate() ) { this.value='Submitting..'; this.disabled=true; }" UseSubmitBehavior="false" />

- eqiz

---

这是我能找到的唯一一个真正有效的答案！更好的是，按钮会改变以让用户知道正在提交（没有巨大的DIV覆盖或其他无聊的东西！） - MC9000

Answer 7

<asp:Button ID="btnSend" runat="server" Text="Submit"  OnClick="Button_Click"/>

---

        <script type = "text/javascript">
            function DisableButton()
            {
                document.getElementById("<%=btnSend.ClientID %>").disabled = true;
            }
            window.onbeforeunload = DisableButton;
        </script>

- Reshma

Answer 8

您可以使用客户端 onclick事件来实现这一点：

yourButton.Attributes.Add("onclick", "this.disabled=true;");

- Federico González

Answer 9

在OnClick事件中禁用按钮，然后在AJAX回调事件处理程序中重新启用。以下是我使用jQuery的方法。

<script>
$(document).ready(function() {

    $('#buttonId').click(function() {
         $(this).attr('disabled', 'disabled');
         callAjax();
    });

});

function callAjax()
{
    $.ajax({
      url: 'ajax/test.html',
      success: function(data) {
         //enable button
         $('#buttonId').removeAttr('disabled');

      }
    });
}
</script>

- rick schott

---

这段代码应该放在哪里？如果它是一个独立的脚本，如何从C#代码后台调用它？ - Zizzipupp

可以做两种方法，但棘手的部分是ID是生成的，因此如果放在独立脚本中，则需要将其传递到函数中。 - rick schott

Answer 10

我希望禁用按钮并调用回发，这样在按钮被禁用后仍然可以运行后台代码。

以下是如何从后台代码中附加：

btnProcess.Attributes.Add("onclick", " this.disabled = true; __doPostBack('btnProcess', ''); return false;")

然后在代码后台重新启用该按钮：

btnProcess.Enabled = True

- Taylor Brown