AJAX UpdateProgress control : Avoid multiple updates to Update Panel

This tutorial will demonstrate how UpdateProgress control can be used to avoid multiple updates to Update Panle while one update request is in progress.

To delay the refresh of data , Thread.Sleep of around 18000 milli seconds is introduced.

Steps to be followed are below :

1. Add a Script Manger control

<asp:ScriptManager ID=”ScriptManager1″ runat=”server”></asp:ScriptManager>

 2. Add a AJAX Update Panel control . With in UpdatePanel control , add a Label and Button control

<asp:UpdatePanel ID=”updPanel” runat=”server” UpdateMode=”Conditional”><ContentTemplate><asp:Label runat=”server” id=”lblDateTime” ></asp:Label>

</<asp:Button runat=”server” id=”btnUpdateDateTime” text=”Update Date Time” onclick=”btnUpdateDateTime_Click” />ContentTemplate></asp:UpdatePanel>

 3. Add a AJAX UpdateProgess control and Set to AssociatedUpdatePanelID to UpdatePanel control id.

<asp:UpdateProgress ID=”updProgess” runat=”server” AssociatedUpdatePanelID=”updPanel” ><ProgressTemplate>Please Wait.Refreshing Data …<br /><span id=”msgSpan”></span></ProgressTemplate></asp:UpdateProgress> 

4. Add a script block below Script Manager Control  :

<script type=”text/javascript”>
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(CheckStatus);
function CheckStatus(sender,args)

{
var par = Sys.WebForms.PageRequestManager.getInstance();
              if ( par.get_isInAsyncPostBack())
               {
                      $get(“msgSpan”).innerHTML = ” Still processing previous request..”;
                       args.set_cancel(true);
               }
              else
             {
                     $get(“msgSpan”).innerHTML = “”

             }
}
</script>

5. Add Update Button click event


protected void btnUpdateDateTime_Click(object sender, EventArgs e)

{
Thread.Sleep(10000);
lblDateTime.Text = DateTime.Now.ToString();

}

In the client script CheckStatus , we get instance of web form from PageRequestManager. Then we check where there is any Async Post Back is in progress using the method get_isInAsyncPostback(). If yes, then message is set to Still processing previous request. If no then message is set to blank.

Demo of what we have acheieved using above code

Page on initial load :

Page on click of Update Date Time button

Page on click of Update Date Time button avoid multiple updates
Hope you enjoyed this tutorial. For feedback , please leave your comments. Happy Coding


Leave a Reply