如何prevent双用jQuery在UpdatePanel的ASP.NET应用程序提交 [英] How to prevent double submit with jQuery in ASP.NET app with UpdatePanels

问题描述

我有一个内联网ASP.NET应用程序，这有时是响应慢。我的要求是，以prevent双提交，最好提供反馈表单已经提交给用户。

I have an Intranet ASP.NET application which is sometimes slow to respond. My requirement is to prevent double submit, and ideally provide feedback to the user that the form has already been submitted.

例子，我发现显示了如何禁用提交按钮，但是这还不够，因为在我的应用程序提交可能发生：

Examples I've found show how to disable a submit button, but that's not enough, as in my app the submit can happen:

• 从一个提交按钮。


• 从具有的AutoPostBack = true（此提交使用javascript据我所知）任何控制。


• 从上述任一一个UpdatePanel内 - 在这种情况下，我的理解是，在POST使用AJAX完成，我需要AJAX调用完成后重新启用
。

我喜欢展示一个覆盖/模式弹出，也许这将在提交显示动画的进步形象思维的东西。而在一个UpdatePanel的情况下，AJAX调用完成时隐藏起来。

I'm thinking of something like displaying an overlay / modal popup, perhaps with an animated progress image which would be displayed while submitting. And in the case of an UpdatePanel, hidden when the AJAX call completes.

有没有人有一个可以如上容易地集成到ASP.NET页面的样本？或表明我需要挂接到显示/隐藏覆盖哪些事件。

Does anyone have a sample that can be easily integrated into ASP.NET pages as above? Or indicate what events I would need to hook into to display / hide the overlay.

更新

@Aristos的回答得到了我大部分的方式存在。关键的部分是处理PageRequestManager.endRequest隐藏进度对话框当一个AJAX调用完成。

@Aristos' answer has got me most of the way there. The key part is to handle PageRequestManager.endRequest to hide the progress dialog when an AJAX call is complete.

有一个情况我仍然有一个问题：如果在一个文件下载提交按钮的结果，我没有一个事件，我可以用它来隐藏自己的进程对话框。 这个问题有一个答案可以做的伎俩，我来试试出去。

There is one case where I still have a problem: if a submit button results in a file download, I don't have an event I can use to hide my progress dialog. This question has an answer which may do the trick, I'll try it out.

推荐答案

您放置一个允许/不允许一个标志提交表单基地，

You place an allow/not allow to submit form base on a flag, as:

Page.Form.Attributes["onsubmit"] = "return fAllowToSubmit();";

和打开关闭的旗帜，当您通过发送的UpdatePanel提交，等待回报。

and you open close the flag for the submit when you send via updatepanel and wait for return.

 <script type="text/javascript"> 
    var _fAllowToSubmit = true;
    // here you can throw and an alert() when _fAllowToSubmit==false
    function fAllowToSubmit() 
     {
        if(!_fAllowToSubmit)
          alert("Please wait for the page to be updated");

       return _fAllowToSubmit;
     }

    // to avoid calling it before the Sys loaded
    jQuery(document).ready(function() {
      var prm = Sys.WebForms.PageRequestManager.getInstance();    
       prm.add_initializeRequest(InitializeRequest);
       prm.add_endRequest(EndRequest);
    });

    function InitializeRequest(sender, args) {
       _fAllowToSubmit = false;
       // to make it even nicer you can place here a fade css class
       // it will auto-clear with the next update.
       jQuery("#YourWarpDiv").addClass("FadedDiv");
    }

    function EndRequest(sender, args) {
        _fAllowToSubmit = true;
    }
</script>

和

.FadedDiv
{
    background-color: white;
    filter:alpha(opacity=50);
    opacity: 0.5;
    -moz-opacity:0.50;
}

当然，你也纷纷请稍候消息，可以与更新面板自动打开。

Of course you have also the "please wait" message that can open automatically with the update panel.

这篇关于如何prevent双用jQuery在UpdatePanel的ASP.NET应用程序提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！