Click here to Skip to main content
15,867,141 members
Articles / Web Development / HTML
Article

The UpdateProgress Control of ASP.NET AJAX Extensions

Rate me:
Please Sign up or sign in to vote.
4.39/5 (27 votes)
11 Apr 2007CPOL2 min read 424.5K   11.3K   83   29
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.NET
<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:

ASP.NET
<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.NET
<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:

ASP.NET
<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:

JavaScript
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)


Written By
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

 
QuestionThis doesn't work Pin
turbosupramk319-Oct-17 5:33
turbosupramk319-Oct-17 5:33 
QuestionFile not showing after downloding. Pin
Member 96151129-Jan-14 2:41
Member 96151129-Jan-14 2:41 
QuestionThank u so much Pin
RKRJ20-Jul-12 21:50
RKRJ20-Jul-12 21:50 
GeneralMy vote of 5 Pin
ProEnggSoft3-Mar-12 17:28
ProEnggSoft3-Mar-12 17:28 
GeneralMy vote of 5 Pin
jultra21-Dec-11 3:51
jultra21-Dec-11 3:51 
GeneralMy vote of 4 Pin
ninadnaik2524-Aug-11 0:34
ninadnaik2524-Aug-11 0:34 
GeneralMy vote of 4 Pin
basheer97121-Jul-11 0:18
basheer97121-Jul-11 0:18 
QuestionError: Displaying an UpdateProgress control programmatically using JavaScript Not working Pin
preeti Teotia19-Jul-10 23:44
preeti Teotia19-Jul-10 23:44 
GeneralShow message Pin
perspolis1-Jun-09 19:09
perspolis1-Jun-09 19:09 
QuestionHow to Update the ProgressTemplate Text while page is running Pin
Dumbur5-Mar-09 19:43
Dumbur5-Mar-09 19:43 
GeneralApplying font style to progress bar Pin
meeram39511-Jan-09 23:48
meeram39511-Jan-09 23:48 
GeneralThanks! Pin
jftejadal12-Nov-08 11:46
jftejadal12-Nov-08 11:46 
GeneralAlso got rid of the UpdateProgress Control Pin
jalvarezca11-Nov-08 8:26
jalvarezca11-Nov-08 8:26 
GeneralAnother way to do same thing Pin
Pravinc198424-Oct-08 3:11
Pravinc198424-Oct-08 3:11 
General[Message Removed] Pin
nompel1-Oct-08 7:39
nompel1-Oct-08 7:39 
Generalwhenever pageloading alert will come and page should be disable. Pin
kathyani17-Jul-08 2:04
kathyani17-Jul-08 2:04 
GeneralRe: whenever pageloading alert will come and page should be disable. Pin
JasonC7213-Oct-08 5:20
JasonC7213-Oct-08 5:20 
GeneralA way around this Pin
Liam Wheldon14-Jun-08 11:06
Liam Wheldon14-Jun-08 11:06 
GeneralGracias Pin
Jarpi28-Apr-08 5:06
Jarpi28-Apr-08 5:06 
GeneralJust what I needed Pin
daokfella9-Apr-08 10:24
daokfella9-Apr-08 10:24 
GeneralUpdateProgress with Content and Master Pages Pin
Remith R15-Nov-07 10:53
Remith R15-Nov-07 10:53 
The above solution for the UpdateProgress panel won’t work if you are using a Master Content page. The Button control and the UpdateProgress panel will be given another name, dynamically by the compiler.

So instead of: postBackElement.id == 'Button1'
We need to use: postBackElement.id == "<%=Button1.ClientID%>"

And instead of: $get('UpdateProgress1').style.display
We need to use: $get("<%=UpdateProgress1.ClientID%>").style.display


Enjoy Ajax Asp.Net programming
Remith
GeneralRe: UpdateProgress with Content and Master Pages Pin
ratul_ctg16-Feb-09 19:38
professionalratul_ctg16-Feb-09 19:38 
GeneralRe: UpdateProgress with Content and Master Pages Pin
Javier Vera10-Dec-10 18:07
Javier Vera10-Dec-10 18:07 
GeneralThanks!!! Pin
_Thurein_12-Nov-07 16:19
_Thurein_12-Nov-07 16:19 
GeneralRe: Thanks!!! Pin
Rahul Chitte20-Aug-09 6:47
Rahul Chitte20-Aug-09 6:47 

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

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