如何使用 UpdatePanels 在 ASP.NET 应用程序中防止使用 jQuery 双重提交

Question

我有一个有时响应缓慢的 Intranet ASP.NET 应用程序。我的要求是防止重复提交，并且最好向用户提供表单已经提交的反馈。

我发现的示例展示了如何禁用提交按钮，但这还不够，因为在我的应用中可能会发生提交：

• 来自提交按钮。
• 从任何具有 AutoPostBack = true 的控件（使用 javascript AFAIK 提交）。
• 从 UpdatePanel 中的上述任何一个 - 据我了解，在这种情况下，POST 是使用 AJAX 完成的，当 AJAX 调用完成时我需要重新启用。

我正在考虑显示一个覆盖/模式弹出窗口之类的东西，可能带有一个动画进度图像，该图像将在提交时显示。对于 UpdatePanel，在 AJAX 调用完成时隐藏。

有没有人有一个可以像上面那样轻松集成到 ASP.NET 页面中的示例？或者指出我需要挂钩哪些事件来显示/隐藏叠加层。

更新

@Aristos 的回答让我大部分时间都在那里。关键部分是处理 PageRequestManager.endRequest 以在 AJAX 调用完成时隐藏进度对话框。

在一种情况下我仍然遇到问题：如果提交按钮导致文件下载，我没有可以用来隐藏我的进度对话框的事件。 This question 有一个答案可以解决问题，我会试试看。

Answer 1

您根据标志放置允许/不允许提交表单，如：

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

当您通过更新面板发送并等待返回时，您打开关闭提交的标志。

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

当然，您还有“请稍候”消息，它可以通过更新面板自动打开。