Click here to Skip to main content
15,881,882 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.9K   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

 
GeneralUpdateProgress with Content and Master Pages Pin
Remith R15-Nov-07 10:53
Remith R15-Nov-07 10:53 
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 
GeneralGetting error Pin
Anilesh30-May-07 4:59
Anilesh30-May-07 4:59 
GeneralRe: Getting error Pin
webdevr21-Jun-07 4:51
webdevr21-Jun-07 4:51 
GeneralWhere to place the JavaScript [modified] Pin
jakeschirm9-May-07 11:07
jakeschirm9-May-07 11:07 
Can you expand on how you are placing the javascript. Are you adding it to the script block in code or in the html?


-- modified at 17:14 Wednesday 9th May, 2007

Sorry I see the code now, my issue is I have multiple events that trigger the update is there a solution that would not require me to repeat this javascript for each control?
GeneralRe: Where to place the JavaScript Pin
webdevr21-Jun-07 4:58
webdevr21-Jun-07 4:58 

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.