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
