AJAX-based Progress Indicators

Published 18 May 07 06:50 PM | despos

With AJAX, Web applications may have a lifecycle similar to desktop applications. The user interacts with the user interface, a JavaScript event handler captures the DOM event and executes some code. At the end of the code, some data is generated to update the GUI. In this context, the code that expresses the required logic can either be local to the page (JavaScript) or remote (in a service). Is there a way to monitor the task? Is there a way to stop the task in case of need?
In Windows applications, a Cancel button to stop tasks in progress is nothing new. But in Web applications?
ASP.NET AJAX Extensions provides the UpdateProgress control to define a template that is displayed during a postback. This template can incorporate a Cancel button. There are a few limitations, though.

  1. The UpdateProgress control works only with the partial rendering model. It doesn't work if you implement the task through a remote service.
  2. The UpdateProgress control doesn't display dynamic information such as the time left.
  3. You are offered an object model to cancel the ongoing task. But what you can really cancel is the socket through which the client receives results. No stop message is ever passed on to the remote task.

An emerging AJAX pattern can help--the Progress Indicator. The idea is that you design the remote task to access a data store periodically during its lifecycle. The task will write its current state to the store and will retrieve from there any messages the client sent. An additional client-side service will poll the data store and read the task's state. This information will then be rendered graphically in a dynamic panel or through a progress bar. Likewise, when the user cancels the task, a new message is placed in the store to stop the task.
Once the task receives the request to stop has to make a decision--aborting, rolling back, or perhaps compensating.

For more details and source code, check out my upcoming Cutting Edge columns on MSDN Magazine, July and August 2007.

Filed under:

Comments

# Josh Stodola said on May 18, 2007 03:03 PM:

Thanks, Dino.  I'm looking forward to reading, I have been wanting to do this exact functionality for many years.

# medhat said on May 21, 2007 09:59 AM:

problems with ajax

1- uploading files using the file control .

can't upload any files to the server using while working with ajax .. the file control always have a null value of the postedfile property. (how to upload file using ajax.?)

2- set-focus using javascript or ASP.Net method doesn't work .!!

when i set focus to any control on the page while working with ajax using javascript or asp.net the it doesn't work while it works if i didn't use the ajax ( how can i set focus to any control using ajax.?)

3- the page become vey slow when i have a lot of controls on it or when i have a grid-view that have a lot of controls .. it takes a lot of time to be rendered.(is it better not to use ajax in large pages. ?)

------------------------

# Michael Tsai said on May 26, 2007 11:42 AM:

Hi, I'm reading your book "Introducing Microsoft ASP.NET AJAX," and I found one possible bug.

It's in Table 2-5, the description for "events" property, which says it "Lists all events fired by the class." And I found another explain here:

ajax.asp.net/.../default.aspx

which says it "Gets an EventHandlerList object that contains references to all the event handlers that are mapped to the current component's events."

I wonder which is correct. Would you please tell me?

# pluginbaby said on June 19, 2007 01:26 PM:

Really nice article, good work!

The AJAX UpdateProgress control *should* be renamed UpdateIndicator as it does nothing about progress !!

# mine said on July 5, 2007 06:29 AM:

if you do not want to publish a solution, do not make us waste our time

# Rob said on July 10, 2007 03:46 AM:

Any ideas why Progress1 (with Page Webmethods) fails to update the tasks if you add a Global.asax to the demo project ?

I tried adding to an existing project and was scratching my head for an hour or so over this... Thanks.

Rob.

# dian mushkov said on August 9, 2007 04:54 AM:

good work!

I notice suggested approach is not compatible with timer control.But what is when a developer has need to use timer to get long task server response?

In my situation through timer I get and display to  user server responses  on 5sec periods. Is there a way to stop such long running task?

# Martin said on December 10, 2007 07:53 AM:

Rob,

did you figure out what goes wrong when using a Global.asax file? I'm seing the same behavoiur...

# simone said on February 19, 2008 10:09 AM:

ciao!,

vorrei sapere se esiste un modo di creare una progress bar in ajax, per un file upload.

devo caricare dei file grossi sul server e mi serve una barra di caricamento che mi indichi a che punto è il  mio caricamento.

grazie per l'attenzione.

Muccioli Simone

Leave a Comment

(required) 
(required) 
(optional)
(required)