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

AJAX Progress Bar for ASP.NET

, 11 Jun 2014
Rate this:
Please Sign up or sign in to vote.
Async Progress Indicator with Messages and OnComplete Event

Introduction

This article describes an AJAX Component for ASP.NET allowing the client to see a smooth progress bar showing a server side process. This control works in Internet Explorer 8+, Chrome, Firefox, and Opera.

Background

The only thing you will need to implement in your application is a web service or web method to return the progress values. Remember that you'll need only one web service for the entire web application but for test purposes, I used web methods on each test page of the test project.

Features

  1. Smooth Progress using value estimation
  2. HTML5 native progress for browsers supporting HTML5 and a substitute for older browsers
  3. Optional Message Box to display server messages and log
  4. Optional event handler to trigger postback upon completion
  5. Optional progress substitute to be displayed when process is running (It's useful when we can't calculate the actual progress and only know the beginning and end of the process.)
  6. Optional State object to hold objects in memory and use it on progress completion (like when generating a report takes time and we need to send the result to user when process is completed)

How It Works

Each instance of the ProgressBar control has its own unique GUID named ProgressId which is automatically generated upon construction of the class. There is a property named Progress in ProgressBar using this GUID allowing developers to control the progress and messages displayed on the optional message box.

Using the Code

First, you'll need to create a web service somewhere in the web project or a web method in the page you are using the control but I recommend in the web service, remember to include the [System.Web.Script.Services.ScriptService] tag.

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, 
// uncomment the following line. 
[System.Web.Script.Services.ScriptService]
public class ProgressStatus : System.Web.Services.WebService
{
    [WebMethod]
    public object getProgress(string progressId)
    {
        return Progress.GetResponse(progressId);
    }
}

Then, include an instance of the ProgressBar control in the desired usercontrol or page. You are going to need a ScriptManager on the page too.

<hmc:ProgressBar
        ID="ProgressBar1"
        runat="server"/>

Also, you should set the properties of the control according to your needs.

On the code-behind, the main technique would be to allow the postback to occur and we start the process asynchronously. Please note the progress is a number between 0 and 1 and sending value 1 will trigger the Complete event if set.

protected void btnStart_Click(object sender, EventArgs e)
{
    Progress progress = ProgressBar1.Progress;
    Thread thread = new Thread(() => Start(progress));
    thread.Start();
    btnStart.Enabled = false;
}
private void Start(Progress progress)
{
    double max = 50;
    for (int i = 0; i < max; i++)
    {
        // Actual time consuming action here:
        Thread.Sleep(100);
        // Progress calculation
        progress.SetProgress(i / max);
        // Optional messages to be sent
        progress.AddMessageLine("your message line here");
    }
    // Ensure the control receives 1
    progress.SetProgress(1);
}    

Properties

  • ServicePath - This property indicates the path for the service sending the progress information. If not specified, the control assumes you are using a web method the page control is used on.
  • Service_GetMethod - Specifies the name of the method in the WebService or on the page. Default value would be getProgress and note the casing!
  • MessageTargetId - Indicates the optional target control to display received messages.
  • ProgressId is a unique GUID indicating the process, you can change the value so that all instances of the control in a certain page have the same ProgressId and all users can see the same progress results
  • ProgressControlId - Specifies optional target control to be shown when progress started. This can be used for processes for which we can't calculate their progress unless they are finished. Using this property will hide the progress bar.
  • Interval - The interval between each request to web service in milliseconds. Please refrain from using small values. The optimal value is 1000-5000 ms.
  • SingleLine - Indicates whether to show only the last line of the messages or not
  • OnClientComplete - Gets or sets the client-side script that executes when a ProgressBar control's Complete event is raised.

Events

  • Complete - This event will be triggered when control receives 100% (1.0) from the server. It can be used to show the client additional data like result of a query, etc.

The following sample shows how to maintain some data during the progress and retrieve it upon completion.

protected void btnStart_Click(object sender, EventArgs e)
{
    Progress progress = ProgressBar1.Progress;
    // Passing the object to State variable
    progress.State = new MyDataType();
    Thread thread = new Thread(() => Start(progress));
    thread.Start();
    btnStart.Enabled = false;
}
private void Start(Progress progress)
{
    // perform the action here
    // you also have access to your data:
    var mydata = (MydataType)progress.State;
    //...
}
protected void ProgressBar1_Complete(object sender, EventArgs e)
{
    var progressBar = (ProgressBar)sender;
    var mydata = (MyDataType)progressBar.Progress.State;
    btnStart.Enabled = true;
    Label1.Text = DateTime.Now.ToString();
}

Points of Interest

When dealing with time consuming operations on the server side (i.e., importing/processing large Excel files, generating large reports, performing database operations), the user might think the server is not responding or even face HTML timeout exception. This control helps developers and designers to have a solution for mentioned problems and improve user experience.

Known Issues

  • Although we are not using AjaxControlToolkit, you are going to need your web application to reference the AjaxControlToolkit library. This won't be a big problem as most web applications are already using it.

Final Word

Please don't hesitate to inform me of any issues you might face or suggestions regarding the control. Also please feel free to use this component in your projects and please drop me a line if you are using it in a commercial application.

Don't forget to rate the article.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Hossein Montazeri
Software Developer (Senior) FDK
Iran (Islamic Republic Of) Iran (Islamic Republic Of)
No Biography provided

Comments and Discussions

 
QuestionMy vote of 5 Pinmemberipd-wiss18-Jun-14 20:47 
AnswerRe: My vote of 5 PinmemberHossein Montazeri19-Jun-14 7:10 
GeneralMy vote of 5 Pinmemberu32913-Jun-14 6:22 
GeneralRe: My vote of 5 PinmemberHossein Montazeri14-Jun-14 0:21 
Questionsource code file link broken PinmemberTridip Bhattacharjee11-Jun-14 21:07 
AnswerRe: source code file link broken [modified] PinmemberHossein Montazeri11-Jun-14 21:21 
GeneralRe: source code file link broken PinprofessionalDave Vroman12-Jun-14 10:07 
GeneralRe: source code file link broken PinmemberHossein Montazeri12-Jun-14 11:01 
QuestionHow to get Client Completed event ? Pinmemberu3299-Jun-14 0:56 
AnswerRe: How to get Client Completed event ? PinmemberHossein Montazeri10-Jun-14 22:22 
GeneralRe: How to get Client Completed event ? Pinmemberu32911-Jun-14 0:08 
GeneralRe: How to get Client Completed event ? Pinmemberu32911-Jun-14 15:41 
GeneralRe: How to get Client Completed event ? PinmemberHossein Montazeri11-Jun-14 20:27 
GeneralRe: How to get Client Completed event ? Pinmemberu32911-Jun-14 21:31 
GeneralRe: How to get Client Completed event ? PinmemberHossein Montazeri11-Jun-14 21:35 
GeneralRe: How to get Client Completed event ? Pinmemberu32912-Jun-14 4:06 
GeneralMy vote of 5 PinmemberHumayun Kabir Mamun18-May-14 22:02 
QuestionDose it work with asp.net 3.5? Pinmemberfarsi8-Apr-14 7:01 
AnswerRe: Dose it work with asp.net 3.5? PinmemberHossein Montazeri8-Apr-14 7:48 
QuestiongetProgress keeps being called [modified] PinmemberAlan Telford3-Apr-14 14:54 
AnswerRe: getProgress keeps being called PinmemberHossein Montazeri3-Apr-14 21:43 
QuestionThanks Pinmembercyunta28-Mar-14 2:51 
AnswerRe: Thanks PinmemberHossein Montazeri28-Mar-14 3:04 
QuestionHide Progress Bar PinmemberMember 1043056124-Mar-14 10:24 
AnswerRe: Hide Progress Bar PinmemberHossein Montazeri24-Mar-14 22:17 

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
Web04 | 2.8.140827.1 | Last Updated 11 Jun 2014
Article Copyright 2013 by Hossein Montazeri
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid