Click here to Skip to main content
Click here to Skip to main content

AJAX Multi-Task Indicator

, 26 Apr 2007
Rate this:
Please Sign up or sign in to vote.
This is a custom webcontrol that shows the progress of long sequential tasks using AJAX to refresh the page
Prize winner in Competition "Best ASP.NET article of Mar 2007"

Screenshot - sample.jpg

Introduction

This is a custom webcontrol that shows the progress of long sequential tasks using AJAX to refresh the page.

I needed this for a web form where the user would click a button and the system would send e-mails for a group of people. To enhance the responsiveness of the system, I had the idea of showing the progress of each e-mail being sent. Then I realized this idea could be used in many other situations where tasks need to be synchronously executed.

Click here to see the webcontrol in action.

Implementation

I built this custom control on top of Anthem.NET library. I used Anthem because it makes it easy to call server methods using JavaScript and because I'm really comfortable with this library, since I've used it on many projects. You don't need to be familiar with Anthem.NET to use this control, but if you have never used it I recommend you to check it out.

To make the webcontrol fully customizable, I used the GridView as a base class for my control. So you can use how many columns you want and use the styles you like.

Using the code

Keep in mind that this control inherits from a GridView, so you should use it just like a GridView, but with additional properties, events and methods.

There are two ways you can show progress and status changes. Using an image and using a label. You can use both or only one of them. These two progress indicators correspond to two properties: ImageID and LabelID. These properties must contain the ID of an Image and a Label control. If not, you should add them to field templates. If you don't want to use one of them, just ignore the property.

To make things clear, let's see how we would use the control with an image indicator.

<MTI:MultiTaskIndicator runat="server" ID="mtiTasks" ImageID="imgStatus"  
    ProcessingImageURL="images/ajaxloader.gif" 
        TaskFinishedImageURL="images/checked.gif" 
    Width="350px" AutoGenerateColumns="false" CancelButtonID="btnCancel" >
    <HeaderStyle BackColor="navy" Font-Bold="true" ForeColor="white" 
        HorizontalAlign="center" />
    <Columns>

        <asp:TemplateField ItemStyle-HorizontalAlign="Center">
            <ItemTemplate>
                <asp:Image runat="server" ID="imgStatus" 
                    imageUrl="images/arrow.gif" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="TaskName" HeaderText="Task" 
            ItemStyle-HorizontalAlign="left" />                
    </Columns>

</MTI:MultiTaskIndicator>

There are a few properties we should look at:

  • ImageID – Corresponds to the ID of the Image control declared inside the template field.
  • ProcessingImageURL – The URL of the image that will appear when task is being executed.
  • TaskFinishedImageURL – The URL of the image that will appear when the task is completed. (This image can be changed programmatically).
  • CancelButtonID – If you want to use a cancel button on your form, you should inform the ID of the button.

Now, on the code behind, we should hook the event handlers to the control:

protected override void OnInit(EventArgs e)
{
    base.OnInit(e);
    this.mtiTasks.ExecuteTask += 
    new MultiTaskIndicator.MultiTaskIndicator.ExecuteTaskEventHandler(
            mtiTasks_ExecuteTask);
    this.mtiTasks.TaskEnded += 
    new MultiTaskIndicator.MultiTaskIndicator.TaskEndedEventHandler(
            mtiTasks_TaskEnded);
    this.mtiTasks.TaskStarted += 
    new MultiTaskIndicator.MultiTaskIndicator.TaskStartedEventHandler(
            mtiTasks_TaskStarted);
}

Before executing the tasks we must bind the control to a data source containing any list that will represent the tasks.

To start the process we must call the StartTasks method.

void btnStart_Click(object sender, EventArgs e)
{
    mtiTasks.StartTasks();
}

Now we have to handle the ExecuteTask event and do whatever task we need. We might need to pass an argument to the TaskEnded event handler. We can do through the UserData property of the MultiTaskIndicatorEventArgs.

void mtiTasks_ExecuteTask(object sender, MultiTaskIndicatorEventArgs e)
{
    //This is where you execute the task.
    //Notice the MultiTaskIndicatorEventArgs contains 
    //the properties needed to identify the current task        
    
    //demonstrates how to send data to the TaskEnded event handler
    e.UserData = !(e.Row.RowIndex == 3 || e.Row.RowIndex == 8); 
}

This is enough to use the basic functionality. But we may want to modify the default behavior depending on a task result. To accomplish that we must intercept the TaskStarted and TaskEnded events.

Here's some code:

void mtiTasks_TaskStarted(object sender, MultiTaskIndicatorEventArgs e)
{
    e.CurrentBackColor = System.Drawing.Color.LightYellow;
}

void mtiTasks_TaskEnded(object sender, MultiTaskIndicatorEventArgs e)
{    
    //simulate a situation where we need to change the pre-defined image
    if (!Convert.ToBoolean(e.UserData))
    {
        e.CurrentImageURL = "images/unchecked.gif";            
        e.CurrentBackColor = System.Drawing.Color.White;
    }
}

Conclusion

I hope you enjoy this piece of software. Download the sample and play with it. There might be other nice features I didn't include because my requirements were very simple and specific. But I'm sure it's customizable enough to be re-used on many situations.

I am opened to ideas and suggestions.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

Cassio Mosqueira
Software Developer (Senior) Intelligent Coder
Canada Canada
I've been developing .NET enterprise applications since 2000.
 
I am originally from Rio de Janeiro and I am currently working at http://www.intelligentcoder.com in Ontario.

Comments and Discussions

 
QuestionMultiTask Indicator Is not moving to next task if i run the application from Eternal Network Pinmembercnu.net6-Mar-12 9:55 
QuestionIE Not Support ? PinmemberSahandSOne28-Sep-09 7:02 
Generalfine, but doesn´t work with updatepanel, and anthem.multiview Pinmemberdavidberlin26-Jun-09 3:31 
GeneralSeems ok PinmemberTaffyLewis26-Dec-08 4:13 
GeneralNice example :) PinmemberLeistath27-Jun-07 4:02 
Great article. I'll try to implement in a web project currently on development. Thanks!
 
"I hated myself... no, I hated my place in the world" - From Jerry Maguire

GeneralIs there for .Net 1.1 PinmemberFly Wang5-Jun-07 19:43 
GeneralRe: Is there for .Net 1.1 PinmemberCassio Alves7-Jun-07 16:14 
Generalit seems terrific PinmemberLouisa Chen17-May-07 21:57 
GeneralEliminating time-out in a Long - running process PinmemberAchintya Jha1-May-07 4:33 
GeneralRe: Eliminating time-out in a Long - running process PinmemberCassio Alves2-May-07 5:21 
GeneralRe: Eliminating time-out in a Long - running process PinmemberAchintya Jha2-May-07 5:24 
GeneralRe: Eliminating time-out in a Long - running process PinmemberCassio Alves2-May-07 12:51 
QuestionWebservices issue? PinmemberHyperX29-Apr-07 14:57 
AnswerRe: Webservices issue? PinmemberCassio Alves29-Apr-07 18:37 
QuestionMissing file? PinmemberLanUx27-Apr-07 6:18 
AnswerRe: Missing file? PinmemberCassio Alves27-Apr-07 8:06 
GeneralRe: Missing file? PinmemberLanUx27-Apr-07 11:20 
GeneralRe: Missing file? PinmemberCassio Alves27-Apr-07 11:39 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140721.1 | Last Updated 26 Apr 2007
Article Copyright 2007 by Cassio Mosqueira
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid