AspAlliance.com LogoASPAlliance: Articles, reviews, and samples for .NET Developers
URL:
http://aspalliance.com/articleViewer.aspx?aId=1030&pId=-1
Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations
page
by Scott Guthrie
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 26216/ 41

Introduction

Republished with Permission - Original Article

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:

Listing 1

<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:

http://www.napyfab.com/ajax-indicators/

http://www.ajaxload.info/

http://mentalized.net/activity-indicators/

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

Figure 1

Figure 2

Figure 3

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

Resources


©Copyright 1998-2021 ASPAlliance.com  |  Page Processed at 2021-03-01 4:51:07 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search