Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

One of the cool new controls provided with the ASP.NET AJAX Extensions (aka "Atlas") is the UpdateProgress control.  This control allows you to automatically cause UI to display on a page while an AJAX callback is in progress, and also allows you to provide UI to enable a user to optionally cancel the AJAX callback if it is taking too long.  To use this control on a page, simply declare it like so:

    <atlas:UpdateProgress ID="progress1" runat="server">
        
<ProgressTemplate>
        
            
<div class="progress">
                
<img src="indicator.gif" /> 
                Please Wait...
            </
div>
        
        
</ProgressTemplate>
    
</atlas:UpdateProgress>

The content within the <ProgressTemplate> will then display while an AJAX callback is occuring.  You can use CSS rules to position the content displayed anywhere on the page (for example: you might want to fade it in directly on top of a GridView or other element).  Developers often use animated images to indicate progress to users as well within this <ProgressTemplate>.

Alan Le recently posted a cool link to a few useful sites that provide lots of animated indicator progress icons that you can easily use with the UpdateProgress control to visually indicate a callback operation:

Each site allows you to download spinning gears and progress icons that you can use.  A few examples can be found below:

I posted earlier this week about the new release of the Atlas Control Toolkit that now includes an animation library that can be used with the ASP.NET AJAX Extensions.  Used properly with the UpdateProgress control they can add a nice visual feel to your site. 

Hope this helps,

Scott

 

Published Thursday, September 21, 2006 1:06 PM by ScottGu

Comments

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Thursday, September 21, 2006 4:33 PM by Richard
Much as I like reading about all this new and cool Ajax stuff, could you please devote a quick post to letting us know when we can expect Visual Studio 2005 service pack 1 please. It's supposed to be out in the 3rd quarter, so you ain't got much time if you're going to hit that mark. VS2005 desperately needs fixing and there's very little information coming out of Microsoft. Please let us know......

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Thursday, September 21, 2006 6:12 PM by jc
Thats good info, though when I tried to use an animated gif, the animation seems to stop while its doing the UpdatePanel refresh so it maybe animates 10% of the time when the animation icon is loaded. So I ended up just changing it back to "Loading..." text which is still cool

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Thursday, September 21, 2006 8:17 PM by Sunny
excellent links Scott.. Thanks heaps :)

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Thursday, September 21, 2006 10:57 PM by Steve
Great to see. However, I'm disapointed that this isn't a 'per panel' option. ie. several panels on a page - only one needing to show this control.

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Friday, September 22, 2006 4:58 AM by Marshall Brooke
Hey Scott, The Atlas library looks better with every release. On the above point, I've noted that the UpdateProgress is not fired when you fire a PageMethods method. Is this by design? best Marshall

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Friday, September 22, 2006 7:37 AM by Chris Love
Awsome! I think we have all wanted a good way to do this for many of our pages. I can not wait to start digging into Atlas over the next few weeks.

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Friday, September 22, 2006 10:04 AM by wahyu
Is that any way i can use multiple UpdateProgress on a webform? If we have 3 content panels which controlled by 3 different triggers, the updateprogress should be specific to the button or panel that trying to retrieve data from the server.

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Friday, September 22, 2006 10:35 AM by Jeff

You know, something that has been on my mind for awhile, is trying to figure out an effective way to put the update in a particular place. There are times when you have a big mess of different UI elements, and it doesn't make sense to have a progress indicator in one corner of the screen, or floating on top of everything.

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Friday, September 22, 2006 1:26 PM by Ryan
Scott, thanks for these links! Great resource.

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Friday, September 22, 2006 3:12 PM by Laura
Interesting. I can only get this to work with server side code (ie. works with with OnClick, but not OnClientClick). Have you found this to be true also?

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Friday, September 22, 2006 3:12 PM by ScottGu

Hi Richard,

Info on SP1 should be coming out shortly I believe.  We are working really hard on it.

Hope this helps,

Scott

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Friday, September 22, 2006 3:13 PM by ScottGu

Hi Michael,

For ASP.NET 1.1 you might want to look at both AJAX.NET and Anthem.  I've heard very good things about both packages (they also work on ASP.NET 2.0 as well).

Hope this helps,

Scott

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Friday, September 22, 2006 3:14 PM by ScottGu

Hi Steve,

I believe with the final release there will be an option to have UpdateProgress fire per-panel (so you can have different ones for different updatepanels).  This will also exist for UpdateAnimators as well.

Hope this helps,

Scott

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Friday, September 22, 2006 3:22 PM by ScottGu

Hi Laura/Marshall,

I believe the UpdateProgress only fires automatically when you use an UpdatePanel notification.  If you call webmethods via JavaScript code, you want to manually kick off the notification and cancel it yourself (the reason being you'll have a better idea of when to start/stop it then we would).

Hope this helps,

Scott

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Saturday, September 23, 2006 5:58 AM by Majid Shahabfar
Scott, Last day I was searching the google to find such these indicators for my Atlas based project. thanks

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Saturday, September 23, 2006 8:55 PM by Daniel
Hi Scott, The new naming scheme is just a joke, right? :-) How about MAJAX Library, beats Microsoft ASP.NET AJAX Library. Regards, Daniel

# Mike Forgen

Sunday, September 24, 2006 10:40 AM by AJAX ASP.NET library that impressed me
For ASP.NET 1.x (and for ASP.NET 2.0 too), take better a look at Ajaxium component (or framework, don't really know how to call this new tool). A lot of its features are impossible with Atlas and other libraries -- smooth AJAX-ed navigation between different pages, downgrade to ASP.NET postbacks from AJAX for old browsers, accessibility to search spiders, etc. Mike

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Monday, September 25, 2006 9:50 PM by TEddy
The above product costs $2999!!! Atlas is FREE!!!!!!!!!! Sound like a punter. LOL :-)

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Thursday, September 28, 2006 6:38 PM by Mike Forgen
Are you joking? I've bought it. It costs only $349.

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Friday, October 27, 2006 12:13 AM by Pete Baza
You cannot post this without touching on File Upload issues...not cool...

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Saturday, November 11, 2006 12:42 PM by Michael Love

In the release notes witn Ajax... it was not mentioned that the

 <buildProviders>

   <add extension=".gas" type="System.Web.Compilation.PageBuildProvider" />

 </buildProviders>

had to be inside the <compilation>

</compilation>

Tags... Can this be added to the notes for those of us that are learning this stuff for the first time...

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Wednesday, December 13, 2006 10:07 AM by Andrew Stopani

In IE 6 I have seen that some controls "show through" the UpdateProgress details that I am showing.  Is there a solution to this which will allow me to sit over the controls that I am dynamically adding to the page?

I have tried z-index's and iframes but to no avail.  Any assistance would be greatly appreciated.

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Monday, January 29, 2007 2:15 PM by Davide

did anyone try to use UploadPanel with Fileupload and UpdateProgress?

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Tuesday, January 30, 2007 11:04 AM by Neal

Very cool! need to brush up on my css to get it position next to a button. anyone have any ideas?

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Sunday, February 4, 2007 11:34 PM by koistya

Scott, is there a way to make FileUpload control work withing UpdatePanel (with AJAX)?

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Tuesday, February 27, 2007 6:32 AM by amorano

Along the same vein as the above question. When are we going to get or easily be able to do TRUE progress bars, and not just animated gifs?

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Sunday, March 18, 2007 10:33 PM by Philip Long

Further to my comment March 15, found that the problem was my out-of-date ajaxcontroltoolkit.dll.

Now using version 1.0.10301.0