OnclientClick 和 OnClick 不能同时工作?

发布于 2024-08-19 11:02:05 字数 592 浏览 10 评论 0原文

我有一个如下所示的按钮,

<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 秒并自动启用,但我不确定为什么会启用它。我没有添加任何部分来使其再次启用。

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.

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

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.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(7

微凉徒眸意 2024-08-26 11:02:06

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

function UpdateClick(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;
}
孤凫 2024-08-26 11:02:05

从这篇文章中web.archive.org

技巧是使用按钮控件的 OnClientClick 和 UseSubmitBehavior 属性。还有其他方法,涉及在服务器端添加属性的代码,但我认为这样做的简单性更具吸引力:

>

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

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

__doPostBack('BtnSubmit','')

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


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

From this article on 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.

岁月如刀 2024-08-26 11:02:05

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;};" />

OnClientClick seems to be very picky when used with 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;};" />
各自安好 2024-08-26 11:02:05

这里有两个问题:

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

要解决此问题,请在 JavaScript onclick 事件之后禁用按钮。执行此操作的一个简单方法是按照此答案的建议使用setTimeout

此外,即使 ASP.NET 验证失败,OnClientClick 代码也会运行,因此添加对 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;
}

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

There are two issues here:

Disabling the button on the client side prevents the postback

To overcome this, disable the button after the JavaScript onclick event. An easy way to do this is to use setTimeout as suggested by this answer.

Also, the OnClientClick code 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="(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:

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 OnClick event handler:

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.

鸵鸟症 2024-08-26 11:02:05

Vinay(上图)给出了一个有效的解决方法。 实际上导致按钮的 OnClick 事件在 OnClientClick 事件函数之后不起作用是 MS 已将其定义为,一旦按钮被禁用(在 OnClientClick 事件调用的函数中),按钮“将“这是通过不尝试通过调用 OnClick 事件的定义方法来完成按钮的活动。

我花了几个小时试图弄清楚这一点。一旦我删除了禁用提交按钮的语句(位于 OnClientClick 函数内部),就可以调用 OnClick 方法,没有进一步的问题。

微软,如果您正在听的话,一旦单击按钮,它就应该完成分配给它的活动,即使它在该活动的过程中被禁用。只要单击时没有被禁用,它就应该完成所有分配的方法。

Vinay (above) gave an effective work-around. What's actually causing the button's OnClick event to not work following 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.

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.

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.

路还长,别太狂 2024-08-26 11:02:05

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

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.

-柠檬树下少年和吉他 2024-08-26 11:02:05

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

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

作为一种解决方案,您确实可以尝试在稍后进行禁用,基本上您可以使用 JavaTimer 或其他一些功能来延迟 control.disabled = "disabled" 调用。这样,在 JavaScript 函数禁用控件之前,首先会向服务器发出回发。没有测试过,但它可以工作

Your JavaScript is fine, unless you have other scripts running on this page which may corrupt everything. You may check this using 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.

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文