Click here to Skip to main content
Click here to Skip to main content
Go to top

The UpdateProgress Control of ASP.NET AJAX Extensions

, 11 Apr 2007
Rate this:
Please Sign up or sign in to vote.
An introduction to the UpdateProgress control and how to use the UpdateProgress control and UpdatePanel with triggers.

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Shiju Varghese
Architect BlueLabs
India India
Shiju Varghese is a Technical Architect on the Microsoft .Net stack with a focus on web application development and Domain-Driven Design. He has been working with .Net Technologies since beta version. Shiju focuses on C#, ASP.Net MVC, Entity Framework, Windows Azure, REST, WCF and Unity. Shiju holds number of Microsoft certifications including MCP, MCAD, MCTS, and MCPD: Web. He blogs at http://weblogs.asp.net/shijuvarghese/
 

You can check out his blog from http://weblogs.asp.net/shijuvarghese
You can contact him via shiju.varghese@live.com.

Comments and Discussions

 
QuestionFile not showing after downloding. PinmemberMember 96151129-Jan-14 2:41 
QuestionThank u so much PinmemberAriharasudhan20-Jul-12 21:50 
GeneralMy vote of 5 PinmemberProEnggSoft3-Mar-12 17:28 
GeneralMy vote of 5 Pinmemberjultra21-Dec-11 3:51 
GeneralMy vote of 4 Pinmemberninadnaik2524-Aug-11 0:34 
GeneralMy vote of 4 Pinmemberbasheer97121-Jul-11 0:18 
QuestionError: Displaying an UpdateProgress control programmatically using JavaScript Not working Pinmemberpreeti Teotia19-Jul-10 23:44 
GeneralShow message Pinmemberperspolis1-Jun-09 19:09 
QuestionHow to Update the ProgressTemplate Text while page is running PinmemberDumbur5-Mar-09 19:43 
GeneralApplying font style to progress bar Pinmembermeeram39511-Jan-09 23:48 
I was using the UpdateProgress bar control of Ajax with your codings. It was working very well. Thanks a lot.. I require one more info. Can I do some formatting for the progress template like font styles? Is it possible? I couldn't find any cssclass properties.
 
Success is the good fortune that comes from aspiration, desperation, perspiration and inspiration.

GeneralThanks! Pinmemberjftejadal12-Nov-08 11:46 
GeneralAlso got rid of the UpdateProgress Control Pinmemberjalvarezca11-Nov-08 8:26 
GeneralAnother way to do same thing Pinmemberdbbtvlzfpz24-Oct-08 3:11 
General[Message Removed] Pinmembernompel1-Oct-08 7:39 
Generalwhenever pageloading alert will come and page should be disable. Pinmemberkathyani17-Jul-08 2:04 
GeneralRe: whenever pageloading alert will come and page should be disable. PinmemberJasonC7213-Oct-08 5:20 
GeneralA way around this PinmemberLiam Wheldon14-Jun-08 11:06 
GeneralGracias PinmemberJarpi28-Apr-08 5:06 
GeneralJust what I needed Pinmemberdaokfella9-Apr-08 10:24 
GeneralUpdateProgress with Content and Master Pages Pinmemberremy15-Nov-07 10:53 
GeneralRe: UpdateProgress with Content and Master Pages Pinmemberratul_ctg16-Feb-09 19:38 
GeneralRe: UpdateProgress with Content and Master Pages PinmemberJavier Vera10-Dec-10 18:07 
GeneralThanks!!! Pinmember_Thurein_12-Nov-07 16:19 
GeneralRe: Thanks!!! Pinmemberrahu_12220-Aug-09 6:47 
GeneralGetting error PinmemberAnilesh30-May-07 4:59 
GeneralRe: Getting error Pinmemberwebdevr21-Jun-07 4:51 
GeneralWhere to place the JavaScript [modified] Pinmemberjakeschirm9-May-07 11:07 
GeneralRe: Where to place the JavaScript Pinmemberwebdevr21-Jun-07 4:58 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140922.1 | Last Updated 11 Apr 2007
Article Copyright 2007 by Shiju Varghese
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid