C# OnclientClick 和 OnClick 不能同时工作？

OnclientClick and OnClick is not working at the same time?

提问by stckvrflw

I have a button like the following,

我有一个像下面这样的按钮，

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

When I use my button like that, onclick is not firing. When I remove OnClientClick, then onclick is firing.

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

What I need to do is, disable the button during the postback and enable it after the postback ends.

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

Edit: Additional information:

编辑：附加信息：

I added break point to my firing functions is c# part and I am debugging, they are not firing for sure. Those functions are like

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

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

and when I click my button, it is disabled for 1-2 seconds and automatically enabled, but I am not sure why it is enabled. I didn't add any part for it to be enabled again.

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

采纳答案by Vinay Pandey

From this article on web.archive.org:

来自web.archive.org 上的这篇文章：

The trick is to use the OnClientClick and UseSubmitBehavior properties of the button control. There are other methods, involving code on the server side to add attributes, but I think the simplicity of doing it this way is much more attractive:

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

OnClientClick allows you to add client side OnClick script. In this case, the JavaScript will disable the button element and change its text value to a progress message. When the postback completes, the newly rendered page will revert the button back its initial state without any additional work.

The one pitfall that comes with disabling a submit button on the client side is that it will cancel the browser's submit, and thus the postback. Setting the UseSubmitBehavior property to false tells .NET to inject the necessary client script to fire the postback anyway, instead of relying on the browser's form submission behavior. In this case, the code it injects would be:

__doPostBack('BtnSubmit','')

This is added to the end of our OnClientClick code, giving us this rendered HTML:

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

This gives a nice button disable effect and processing text, while the postback completes.

诀窍是使用按钮控件的 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" />

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

回答by Hans Ke?ing

What if you don't immediately set the button to disabled, but delay that through setTimeout? Your 'disable' function would return and the submit would continue.

如果您没有立即将按钮设置为禁用状态，而是通过 setTimeout 延迟它会怎样？您的“禁用”功能将返回，提交将继续。

回答by Juri

Your JavaScript is fine, unless you have other scripts running on this page which may corrupt everything. You may check this using Firebug.

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

I've now tested a bit and it really seems that ASP.net ignores disabled controls. Basically the postback is issued, but probably the framework ignores such events since it "assumes" that a disabled button cannot raise any postback and so it ignores possibly attached handlers. Now this is just my personal reasoning, one could use Reflector to check this in more depth.

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

As a solution you could really try to do the disabling at a later point, basically you delay the control.disabled = "disabled"call using a JavaTimer or some other functionality. In this way 1st the postback to the server is issued before the control is being disabled by the JavaScript function. Didn't test this but it could work

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

回答by Patrick

Vinay (above) gave an effective work-around. What's actually causing the button's OnClick event to not workfollowing the OnClientClick event function is that MS has defined it where, once the button is disabled (in the function called by the OnClientClick event), the button "honors" this by not trying to complete the button's activity by calling the OnClick event's defined method.

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

I struggled several hours trying to figure this out. Once I removed the statement to disable the submit button (that was inside the OnClientClick function), the OnClick method was called with no further problem.

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

Microsoft, if you're listening,once the button is clicked it should complete it's assigned activity even if it is disabled part of the way through this activity. As long as it is not disabled when it is clicked, it should complete all assigned methods.

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

回答by Ga???

OnClientClick seems to be very picky when used with OnClick.

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

I tried unsuccessfully with the following use cases:

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

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

But they did not work. The following worked:

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

<asp:Button ID="keywordSearch" runat="server" Text="Search" TabIndex="1" 
  OnClick="keywordSearch_Click" 
  OnClientClick="if (!ValidateSearch()) { return false;};" />

回答by Sam

There are two issues here:

这里有两个问题：

Disabling the button on the client side prevents the postback

禁用客户端的按钮会阻止回发

To overcome this, disable the button afterthe JavaScript onclickevent. An easy way to do this is to use setTimeoutas suggested by this answer.

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

Also, the OnClientClickcode runs even if ASP.NET validation fails, so it's probably a good idea to add a check for Page_IsValid. This ensures that the button will not be disabled if validation fails.

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

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

It's neater to put all of this JavaScript code in its own function as the question shows:

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

OnClientClick="disable(this);"

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

Disabling the button on the client side doesn't disable it on the server side

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

To overcome this, disable the button on the server side. For example, in the OnClickevent handler:

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

OnClick="Button1_Click"

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

Lastly, keep in mind that preventing duplicate button presses doesn't prevent two different users from submitting the same data at the same time. Make sure to account for that on the server side.

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

回答by user3783446

function UpdateClick(btn) {

函数更新点击（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;
}