3 Different Ways to Display Progress in an ASP.NET AJAX Application

Abstract: In this article, we will study three different techniques that allow you to visually display progress to users while performing partial-page updates using the UpdatePanel.

3 Different Ways to Display Progress in an ASP.NET AJAX Application

In this article, we will study three different techniques that allow you to visually display progress to users while performing partial-page updates using the UpdatePanel. For all the three approaches, I have used a .gif image to show a spinning gear kind of a progress bar while the UpdatePanel is performing some action. The image can be found with the source code for this article over here.

Method 1: Using PageRequestManager to display progress in an ASP.NET AJAX application

The PageRequestManager class handles the partial-page updates of the UpdatePanel. This class defines client events that you can use during an asynchronous request cycle. Let us see how to use some events of this class to display progress to the user while the UpdatePanel updates its contents.

Drag and drop a Button(btnInvoke) and Label(lblText) control inside the UpdatePanel. Also add a <divid="divImage" inside the UpdatePanel. This div will contain a .gif image that depicts progress and is initially set to invisible style="display:none". On the button click, perform a time consuming task. In our case, we have set a delay of 3 seconds by using Thread.Sleep(3000).

As shown in the code above, we first get a reference to the PageRequestManager and then wire up the initializeRequest and endRequest events to execute, when an async postback begins and ends respectively.

When the user initiates a postback by clicking on the button kept inside the UpdatePanel, we set a delay of 3 seconds. To display progress to the user, we handle the InitializeRequest at the client side and set the divImage to visible. This shows up the .gif image with the progress as shown below. The button that caused the postback is disabled during this event, so in order to prevent users from hitting the button again.

Note: Remember that you cannot have simultaneous async postbacks using ASP.NET AJAX.

When the async postback completes (in our case when 3 seconds are over), the endRequest event gets fired. The divImage is set to invisible, there by hiding the gif image and the button is enabled again.

Method 2: Using the UpdateProgress control to display progress in an ASP.NET AJAX application

Another very simple option to display progress during an async postback is to use the UpdateProgress control. You can use this control to display status information to the user, while the UpdatePanel updates its content. In the example below, we use the same .gif to display progress while the UpdatePanel is updating its content. For understanding purposes, we have emulated a time consuming operation by setting a delay of 3 seconds by using Thread.Sleep(3000) on the button click.

In the code shown above, we use the AssociatedUpdatePanelID property of the UpdateProgress control to associate it with an UpdatePanel control. The ProgressTemplate property that can contain HTML, is used to specify the message displayed by an UpdateProgress control. In our case, we are displaying a .gif image progress as shown below

Method 3: Using UpdatePanelAnimationExtender to display progress in an ASP.NET AJAX application

The UpdatePanelAnimation control can also be used to visually display progress to the users while the UpdatePanel is performing some operation. As defined in the ASP.NET AJAX documentation “The UpdatePanelAnimationExtender is a simple extender that allows you to utilize the powerful animation framework with existing pages in an easy, declarative fashion. It is used to play animations both while an UpdatePanel is updating and after it has finished updating”. You can read more about the UpdatePanelAnimationExtender over here. For this sample to work, drag and drop a UpdatePanelAnimationExtender from the AJAX Toolkit on to your page.

<Animations> are declared in the UpdatePanelAnimationExtender to create animation effect. Within the <Animations>, you can define the sequence of effects for the UpdatePanelAnimation. You can even use <ScriptAction> definitions to fine-tune and customize the animation.

In this example, we will show how to display an image progress bar using the <ScriptAction> definition of the UpdatePanelAnimationExtender. In the example given below, we have defined two <ScriptAction>; one for while the UpdatePanel is updating(<OnUpdating>) and one for after the UpdatePanel has finished updating(<OnUpdated>).

The two <ScriptAction> definition tags call two JavaScript methods respectively that are responsible for displaying and hiding the image progress bar while the UpdatePanel performs an update on the control. As shown in the previous methods, we have emulated a time consuming operation by setting a delay of 3 seconds by using Thread.Sleep(3000) on the button click. You can replace this code with any time consuming operation, like fetching records from a remote database or performing any similar resource intensive operation. The technique of hiding and showing the image also remains the same as we had discussed in Method 1. The entire source code and mark up is as shown below:

Well those were the three different methods of displaying progress to the user while the UpdatePanel updates its contents. The entire source code of this article can be downloaded from here (pwd:dotnetcurry123#). I hope this article was useful and I thank you for viewing it.

Was this article worth reading? Share it with fellow developers too. Thanks!

Suprotim has received the prestigious Microsoft MVP award for nine times in a row now. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that represents premium web sites and digital publications comprising of Professional web, windows, mobile and cloud developers, technical managers, and architects.

How to make a Gmail-like loading indicator with ASP.NET Ajax
http://codeclimber.net.nz/archive/2007/05/17/How-to-make-a-Gmail-like-loading-indicator-with-ASP.NET-Ajax.aspx

Comment posted by
kk18_b
on Monday, November 10, 2008 10:53 PM

Very nice article. But, I am working on Master page, and there are 2 usercontrols in the Masterpage which uses 2 different update panels in each of them and if I click Retrieve button for one user control, I am getting the loading image for both of the usercontrols. Is there any other way to work with this kind of problem. Please update me..

kk18_b: Hard to say without seeing some code. Use the Contact page and mail me your code.

Comment posted by
kk18_b
on Tuesday, November 11, 2008 6:07 PM

Thank you Suprotim Agarwal for your reply. I found the solution for my problem. I mailed you the code that I was having problem with and the code that I resolved.
One last question, as I am new to this website, is there any forums where we can discuss the problems?

This article is really nice. I have a situation i open a pop up window . This is not model window . So in that case is that possible to show the image there ?

Thanks,
Thani

Comment posted by
;';;;';'
on Monday, December 1, 2008 1:49 AM

;'

Comment posted by
samuelanre
on Monday, December 1, 2008 5:24 AM

very nice code segments; i have not really explored it in-depth.................

Comment posted by
sa
on Monday, December 1, 2008 2:44 PM

Wat if User Refreshes Page?

Comment posted by
Stephen
on Tuesday, December 2, 2008 3:38 AM

very insightfull post, but which method is the
A) Best in terms of speed, responsiveness and load on server
B) Do you recommend in terms of code maintainability and good development practice

Me thinks A, the pure JScript options is the most lightweight, It will however be a nigthmare to maintain. Your thoughts?

Comment posted by
Mark Kamoski
on Tuesday, December 2, 2008 1:49 PM

Regarding the Copy-Scape notice on this page, is it OK print a PDF of this document? Please advise. Thank you. -- Mark Kamoski

Comment posted by
Mark Kamoski
on Tuesday, December 2, 2008 1:51 PM

Nice article. I really appreciate it. The only suggestion that I will make is to somehow tweak the page layout a bit because the embedeed VS.NET ad-based video wreaks havoc on the page, bouncing around, etc, and the page in general does not print to PDF very well due to ads. Aside from that, it is great. Thank you. -- Mark Kamoski

Stephen - If it was speed and responsiveness, I would rather focus on the task that is being performed in the UpdatePanel and find means to speedup. The difference between the 3 approaches in terms of speed should not be much, although I have observed that the animation extender is a little slower than the other two.

Watch out for one of my forthcoming articles where I show a similar approach using jQuery!

Mark: Thanks. Yes you can print the article. Can you send me a screenshot using the 'Contact' page where the VS.NET ad spoils the page view. Also please mention the browser and version you are using.

Also, we will be providing the Print option very soon on the site. It's currently being tested.

Comment posted by
Borik
on Wednesday, December 3, 2008 11:23 AM

Unfortunately this is only a Binary Progress State, its eater working or done...

What would be cool is to have an intermediate indicators for ex: 10%, 20%, 30%, etc...

Only way i got that to work was to set Value into Application Variable and Check and Update value from Client Side every 2 sec,
if any one has a better solution please share...

Comment posted by
JOHN P PARLATO
on Saturday, January 17, 2009 7:23 AM

I used the first way that you showed here and it worked great. I want to thank you for doing such a great job of explaining this. Thank you and to everyone like you that teach - you are a asset to our community.

I am using V2 to send a form that includes an attach file via fileupload control. For some reason V2 is sending duplicate emails, in the first email the file is corrupt, in the second email the file is intact. Any ideas why this is happening? Thanks!!

Comment posted by
KLM
on Friday, August 28, 2009 3:43 PM

I got it, I was using Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click not Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)

Comment posted by
Angeline
on Wednesday, September 23, 2009 2:06 AM

Excellent article.. The solution resolved my problem. Thanx a lot...

Comment posted by
Ram Thatikonda
on Friday, May 14, 2010 4:41 PM

Where can I get the password for the zip file that I downloaded? I am a subscribed user but dont have the password.

Comment posted by
Admin
on Sunday, May 16, 2010 11:05 PM

there is no password for any of the files. Just Ctrl + F5 the page and download the file again.

Comment posted by
AnnieX
on Wednesday, June 23, 2010 6:07 AM

Hi. Love the code it works great but when i have 2 different update panels on a page and i click either button both images show at the same time. Is their away around this. All the best AnnieX.

///btnAddZone1: These two functions are used when the btnAddZone1 button is clicked
function onUpdating2() {
var panelProg2 = $get('divImage2'); //get the divImage
panelProg2.style.display = ''; //set it to visible
}

Nice article. I really appreciate it. but i should be in popup it's look good..like to see follow link http://www.cprogrammings.com/result/How-to-show-the-progressbar-during-Postback-in-Asp.net/60.html

Comment posted by
newProgrammer
on Wednesday, May 2, 2012 1:47 AM

none of them are working....

Comment posted by
Arjun
on Saturday, May 19, 2012 8:31 AM

I think the following link is much easier for freshers........(my opinion)

I have one question sir... in my project i am using updatepanel. but some times controles in the update panel will not work properly or they get disappear, after refreshing its work properly. what will be the problem.

Comment posted by
dip
on Thursday, October 18, 2012 4:52 AM

First method worked like a charm for me. I just copied and pasted the code in master page.