Tutorial Disabling Button on Asynchronous PostBack in C# AJAX ASP.NET

In this tutorial, we will be looking at how to use AJAX to make Asynchronous calls, and also how to manage those calls by disabling our button until the call completes. Often, if a user doesn’t see near-immediate results when they make a request (click a button for example), that user will try to make the call again.
This can cause problems, especially when using AJAX as the last call made will take precedence over any that are currently in progress. A good way to deal with this is to give the user visual feedback that their request is processing.

This can be done with an UpdateProgress control, for example. But another way to do it is to disable the button whilst an Asynchronous request is being processed.
To demonstrate how to do this, we will create a small form with an UpdatePanel and a Button . The button will get the current time on the server, which will take only milliseconds to complete – too fast for us to demonstrate the button being disabled. For this example, we will slow the request down by making it sleep for 2 seconds before processing.
We start by building out our ASPX page. Let’s add a ScriptManager and an UpdatePanel:

<form id="form2" runat="server">
         <asp:ScriptManager ID="SM1" runat="server" />
         <asp:UpdatePanel ID="UP1" runat="server">
             <ContentTemplate>
             </ContentTemplate>
         </asp:UpdatePanel>
         <br />
         </form>

Need help with cloud hosting ? Try Server Intellect . We used them for our cloud hosting services and we are very happy with the results!

In our UpdatePanel, we are going to output the current Date and Time, and also include a Button to allow the user to update it:

form id="form2" runat="server">
<asp:scriptmanager id="SM1" runat="server" />
<asp:updatepanel id="UP1" runat="server">
  
 <ContentTemplate>
  
 <%= DateTime.Now.ToStringundefined) %>
 <br />
 <asp:Button ID="btn_GetTime" runat="server" Text="Get Current Time" OnClick="btn_GetTime_Click" />
  
 </ContentTemplate>
  
 </asp:updatepanel>
<br />
</form> 

Notice we have a handler for the Button’s click event. This is where we are going to slow the process down. In the code-behind, we will add the following:

using System.Threading;
  
 
  
 protected void btn_GetTime_Clickundefinedobject sender, EventArgs e)
 {
 
 Thread.Sleepundefined3000);

All that is left to do is to disable the button during the Async PostBack. We will do this using JavaScript, as it will be executed in the browser and will be effective immediately. At the bottom of the page, we add the following script:

<script type="text/javascript">
 
    Sys.WebForms.PageRequestManager.getInstanceundefined).add_beginRequestundefinedstartRequest);
    Sys.WebForms.PageRequestManager.getInstanceundefined).add_endRequestundefinedendRequest);
 
    function startRequestundefinedsender, e) {
 
        //disable button during the AJAX call
        document.getElementByIdundefined'<%=btn_GetTime.ClientID%>').disabled = true;
        document.getElementByIdundefined'<%=btn_GetTime.ClientID%>').value = 'Getting time..';
 
    }
    function endRequestundefinedsender, e) {
 
        //re-enable button once the AJAX call has completed
        document.getElementByIdundefined'<%=btn_GetTime.ClientID%>').disabled = false;
        document.getElementByIdundefined'<%=btn_GetTime.ClientID%>').value = 'Get Current Time';
 
    }
 
</script>

We chose Server Intellect for its cloud hosting , for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.
Here, we are calling a function on the start of an Async Request, and then another method on the end of the Request. These functions change the disabled value of the button, and also the text. Now when we run this application, we will be able to click the button to retrieve the current date and time, and display it to the page. We are also pausing the request for two seconds, so that we can see during the request that the button is disabled and the text is temporarily changed. When the request is complete, however, we re-enable the button and change the text back.

<script type="text/javascript">
 
    var instance = Sys.WebForms.PageRequestManager.getInstanceundefined);
    instance.add_initializeRequestundefinedinstance_initializeRequest);
 
    function instance_initializeRequestundefinedsender, args) {
 
        if undefinedinstance.get_isInAsyncPostBackundefined)) {
 
            alertundefined'Still processing request. Please wait..');
            args.set_cancelundefinedtrue);
        }
    }
 
</script>

The ASPX will look something like this:

See how easy that was?
Thank you for reading our tutorial on AJAX Controls, we aim to provide the best AJAX tutorials. Learning AJAX in ASP.NET is easy and we hope you are getting your hands dirty by trying different things and coming up with your own ideas. If you have any questions or concerns, please feel free to suggest a tutorial or you can comment below in the comments section.
We moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.