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