55

我有一个如下按钮，

<asp:Button ID="pagerLeftButton" runat="server" OnClientClick="disable(this)" onclick="pager_Left_Click" Text="<" />

当我这样使用我的按钮时，onclick 不会触发。当我删除 OnClientClick 时，会触发 onclick。

我需要做的是，在回发期间禁用按钮并在回发结束后启用它。

编辑：附加信息：

我在我的触发函数中添加了断点是 c# 部分，我正在调试，它们肯定不会触发。这些功能就像

protected void pager_Left_Click(object sender, EventArgs e)
{
//Do smthing.
}
protected void pager_Right_Click(object sender, EventArgs e)
{
//Do smthing.
}

当我点击我的按钮时，它会被禁用 1-2 秒并自动启用，但我不确定它为什么会被启用。我没有添加任何部分来再次启用它。

4

7 回答 7

102

从web.archive.org 上的这篇文章：

诀窍是使用按钮控件的 OnClientClick 和 UseSubmitBehavior 属性。还有其他方法，涉及到服务器端的代码来添加属性，但我认为这样做的简单性更有吸引力：

<asp:Button runat="server" ID="BtnSubmit"  OnClientClick="this.disabled = true; this.value = 'Submitting...';"   UseSubmitBehavior="false"  OnClick="BtnSubmit_Click"  Text="Submit Me!" />

OnClientClick 允许您添加客户端 OnClick 脚本。在这种情况下，JavaScript 将禁用按钮元素并将其文本值更改为进度消息。回发完成后，新呈现的页面会将按钮恢复到其初始状态，而无需任何额外工作。

在客户端禁用提交按钮的一个陷阱是它将取消浏览器的提交，从而取消回发。将 UseSubmitBehavior 属性设置为 false 会告诉 .NET 注入必要的客户端脚本来触发回发，而不是依赖浏览器的表单提交行为。在这种情况下，它注入的代码将是：

__doPostBack('BtnSubmit','')

这被添加到我们的 OnClientClick 代码的末尾，为我们提供了这个呈现的 HTML：

<input type="button" name="BtnSubmit"  onclick="this.disabled = true; this.value ='Submitting...';__doPostBack('BtnSubmit','')"  value="Submit Me!" id="BtnSubmit" />

这提供了一个很好的按钮禁用效果和处理文本，同时回发完成。

于 2010-01-28T14:26:20.703 回答
14

OnClientClick 与 OnClick 一起使用时似乎非常挑剔。

我尝试使用以下用例失败：

OnClientClick="return ValidateSearch();" 
OnClientClick="if(ValidateSearch()) return true;"
OnClientClick="ValidateSearch();"

但他们没有工作。以下工作：

<asp:Button ID="keywordSearch" runat="server" Text="Search" TabIndex="1" 
  OnClick="keywordSearch_Click" 
  OnClientClick="if (!ValidateSearch()) { return false;};" />
于 2012-06-19T17:03:25.817 回答
6

Vinay（上图）给出了一个有效的解决方法。 实际导致按钮的 OnClick 事件在 OnClientClick 事件函数之后不起作用的原因是 MS 已经定义了它，一旦按钮被禁用（在 OnClientClick 事件调用的函数中），按钮通过不尝试完成来“尊重”这一点通过调用 OnClick 事件的定义方法来激活按钮的活动。

我挣扎了几个小时试图弄清楚这一点。一旦我删除了禁用提交按钮的语句（位于 OnClientClick 函数内），就调用了 OnClick 方法，没有进一步的问题。

微软，如果你在听，一旦按钮被点击，它应该完成它分配的活动，即使它在这个活动的过程中被禁用。只要它在点击时没有被禁用，它应该完成所有分配的方法。

于 2011-12-22T15:45:26.453 回答
6

这里有两个问题：

禁用客户端上的按钮可防止回发

要克服这个问题，请在 JavaScript事件之后禁用该按钮。onclick一个简单的方法是按照这个答案setTimeout的建议使用。

此外，OnClientClick即使 ASP.NET 验证失败，代码也会运行，因此添加对Page_IsValid. 这样可以确保在验证失败时按钮不会被禁用。

OnClientClick="(function(button) { setTimeout(function () { if (Page_IsValid) button.disabled = true; }, 0); })(this);"

如问题所示，将所有这些 JavaScript 代码放在自己的函数中会更整洁：

OnClientClick="disable(this);"

function disable(button) {
    setTimeout(function () {
        if (Page_IsValid)
            button.disabled = true;
    }, 0);
}

在客户端禁用按钮不会在服务器端禁用它

要克服这个问题，请禁用服务器端的按钮。例如，在OnClick事件处理程序中：

OnClick="Button1_Click"

protected void Button1_Click(object sender, EventArgs e)
{
    ((Button)sender).Enabled = false;
}

最后，请记住，防止重复按下按钮并不能防止两个不同的用户同时提交相同的数据。确保在服务器端考虑到这一点。

于 2013-05-29T04:11:09.873 回答
2

如果您不立即将按钮设置为禁用，而是通过 setTimeout 将其延迟，该怎么办？您的“禁用”功能将返回，提交将继续。

于 2010-01-28T14:27:14.520 回答
1

您的 JavaScript 没有问题，除非您在此页面上运行了其他可能会损坏所有内容的脚本。您可以使用Firebug进行检查。

我现在已经测试了一下，看起来 ASP.net 确实忽略了禁用的控件。基本上发出回发，但框架可能会忽略此类事件，因为它“假设”禁用的按钮不能引发任何回发，因此它忽略可能附加的处理程序。现在这只是我个人的推理，可以使用 Reflector 更深入地检查这一点。

作为一种解决方案，您可以稍后真正尝试禁用，基本上您control.disabled = "disabled"使用 JavaTimer 或其他一些功能来延迟调用。以这种方式，在 JavaScript 函数禁用控件之前，第一次回发到服务器。没有测试这个，但它可以工作

于 2010-01-28T14:49:26.387 回答
0

功能更新点击（btn）{

    for (i = 0; i < Page_Validators.length; i++) {

        ValidatorValidate(Page_Validators[i]);

        if (Page_Validators[i].isvalid == false)

            return false;
    }

    btn.disabled = 'false';

    btn.value = 'Please Wait...';

    return true;
}
于 2015-04-02T09:43:59.893 回答