Introduction

One of the excellent features of ASP.NET AJAX Extensions 1.0 is the UpdatePanel
control. The UpdatePanel control enables partial-page rendering in an ASP.NET We
b page asynchronously. The contents of the UpdatePanel control will automaticall
y update when a postback event is invoked. This control does work the same as th
e MagicAjax.net panel control. The UpdateProgress control is very useful when wo
rking with the UpdatePanel control. With an UpdateProgress control, you can show
the status during the partial-page rendering of an UpdatePanel.
Below is the sample code that uses the UpdateProgress control associated with an
UpdatePanel control.
Hide Copy Code
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:Button ID="Button1" runat="server"
OnClick="Button1_Click" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1"
AssociatedUpdatePanelID="UpdatePanel1" runat="server">
<ProgressTemplate>Update in Progress .. </ProgressTemplate>
</asp:UpdateProgress>
In the <ProgressTemplate>, you can use an image instead of static text. Check th
e code below:
Hide Copy Code
<ProgressTemplate>
<img src="animatedprogress.jpg" />
</ProgressTemplate>
How to work the UpdateProgress control and the UpdatePanel with triggers
In the above code, the contents inside the <ContentTemplate> will asynchronously
update when the Click event of the Button is invoked. While starting an asynchr
onous postback, the UpdateProgress control will work. The contents inside the <P
rogressTemplate> tag will show during the partial-page rendering of an UpdatePan
el. The AssociatedUpdatePanelID is the UpdatePanel control you associated with a
n UpdateProgress control. In the above example, the Button control displays insi
de the UpdatePanel so that partial-page rendering will automatically be done whe
n the Click event is invoked. But in many cases, you have to update the contents
of the UpdatePanel while postback of the controls happens outside the UpdatePan
el. In that case, you can use AsyncPostBackTrigger in the <Triggers> section of
the UpdatePanel.
Hide Copy Code
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click"/>
</Triggers>
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1"
AssociatedUpdatePanelID="UpdatePanel1" runat="server">

<ProgressTemplate>
Update in Progress ..
</ProgressTemplate>
</asp:UpdateProgress>
<asp:Button ID="Button1" runat="server"
OnClick="Button1_Click" Text="Button" />
In the above example, the Button control sits outside the UpdatePanel control. I
f you want to update the contents of the UpdatePanel control when the Click even
t occurs, you can use the following markup:
Hide Copy Code
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Event"/>
</Triggers>
But in the above scenario, the UpdateProgress control will not work because the
asynchronous postback results from a control (in the above example, the Button c
ontrol) that is not inside the UpdatePanel. In that case, you can display an Upd
ateProgress control programmatically using JavaScript. Add the following JavaScr
ipt code in the script block:
Hide Copy Code
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
var postBackElement;
function InitializeRequest(sender, args)
{
if (prm.get_isInAsyncPostBack())
args.set_cancel(true);
postBackElement = args.get_postBackElement();
if (postBackElement.id == 'Button1')
$get('UpdateProgress1').style.display = 'block';
}
function EndRequest(sender, args)
{
if (postBackElement.id == 'Button1')
$get('UpdateProgress1').style.display = 'none';
}
In the above code, I have used the initializeRequest event and the endRequest ev
ent of the Sys.WebForms.PageRequestManager class. The initializeRequest event wi
ll invoke during the initialization of the asynchronous postback, and the endReq
uest event will invoke after an asynchronous postback is finished and the contro
l has been returned to the browser.