The UpdateProgress Control of ASP.NET AJAX Extensions

• Download source - 148 KB

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 Web page asynchronously. The contents of the UpdatePanel control will automatically update when a postback event is invoked. This control does work the same as the MagicAjax.net panel control. The UpdateProgress control is very useful when working 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.

<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 the code below:

<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 asynchronous postback, the UpdateProgress control will work. The contents inside the <ProgressTemplate> tag will show during the partial-page rendering of an UpdatePanel. The AssociatedUpdatePanelID is the UpdatePanel control you associated with an UpdateProgress control. In the above example, the Button control displays inside the UpdatePanel so that partial-page rendering will automatically be done when 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 UpdatePanel. In that case, you can use AsyncPostBackTrigger in the <Triggers> section of the UpdatePanel.

<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. If you want to update the contents of the UpdatePanel control when the Click event occurs, you can use the following markup:

<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 control) that is not inside the UpdatePanel. In that case, you can display an UpdateProgress control programmatically using JavaScript. Add the following JavaScript code in the script block:

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 event of the Sys.WebForms.PageRequestManager class. The initializeRequest event will invoke during the initialization of the asynchronous postback, and the endRequest event will invoke after an asynchronous postback is finished and the control has been returned to the browser.