Disable the Button that Initiated Asynchronous PostBack Until Server Processing Completes in ASP.Net AJAX

In ASP.Net AJAX applications, when the users initiated a bulk server processing there are chances that the users may click the button again and again which results in duplicate processing on the server. This is because, in classic ASP.Net applications, the page will be refreshed when a button is clicked which indicates that response if yet to be received, where as in AJAX application its not. The UpdateProgress control in ASP.Net AJAX will help the users to notify them that their request still progressing. Read my article on Using UpdateProgress Control Effectively.

In ASP.Net AJAX, when we have duplicate request sent to the server then the user will be provided with the response of the latest request.

To overcome this, we can disable the button until the server response is received.

The below script will help us do that.

<script language="JavaScript">

     var Page;

     var postBackElement;

     function pageLoad()

    {      

      Page = Sys.WebForms.PageRequestManager.getInstance();  

      Page.add_beginRequest(OnBeginRequest);

       Page.add_endRequest(endRequest);

    }

    function OnBeginRequest(sender, args)

    {       

      postBackElement = args.get_postBackElement();     

      postBackElement.disabled = true;

    }  

     function endRequest(sender, args)

    {      

      postBackElement.disabled = false;

    } 

  </script>

We used PageRequestManager object's begin and end request event to enable and disable the button.