解决Ajax button双击提交Bug

解决Ajax button双击提交Bug
Scenario:
用户单击 Preview Button, 系统会弹出一个Modal PopUp窗体
然后用户看完最后提交学要确认的信息,单击存在于ModalDialog
的Submit button, 向server提交信息.
So:
1) Button存在于Modal Popup里面;
2) Modal popup存在于UpdatePanel里面;

传统的方案双击提交,会提交两次,因为update panel里面的control会

直接出发异步调用事件而不刷新页面,双击会导致button异步两次,

会引起错误,如数据版本控制和并发问题.

解决:
原想在Site.Master里面写一个Common的Javascript去解决问题,后来发现

会引起一些奇怪问题,如在updatepanel里面的gridview的翻页button(翻页
button是image控件)工作正常,但是仍然刷新.

所以,就让需要控制双击的页面加上如下代码.

      var prm = Sys.WebForms.PageRequestManager.getInstance();
            var btn;
            var btnId = '<%=XXXXXXXXX.ClientID%>';               
        prm.add_initializeRequest(InitializeRequest);
        prm.add_endRequest(EndRequestHandler);
        function InitializeRequest(sender, args)
            {
           
                  btn= document.getElementById(btnId);
                  if (btn != undefined && (btn.type=="button" || btn.type=="submit"))
                     btn.disabled=true;

            if(prm.get_isInAsyncPostBack() && args.get_postBackElement().id == btnId)
            {
                args.set_cancel(true);
            }
            }
           
      function EndRequestHandler(sender, args)
      {
            if(btn != undefined)
                btn.disabled=false;
      }

其中 XXXXX是需要控制的button server端ID.

 

转载于:https://www.cnblogs.com/koukai/archive/2008/06/02/1212036.html