Click here to Skip to main content
15,868,082 members
Articles / Web Development / HTML5

AJAX Progress Bar for ASP.NET

Rate me:
Please Sign up or sign in to vote.
4.80/5 (33 votes)
11 Jun 2014CPOL4 min read 169.3K   8K   51   66
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 the web service, remember to include the [System.Web.Script.Services.ScriptService] attribute.

C#
[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.

ASP.NET
<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.

C#
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 behind 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. (This is typicially done when only one instance of the process is allowed in the entire application.)
  • ProgressControlId - Specifies optional target control to be shown when progress started. This can be used for processes for which we can't calculate the progress untill 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 all received lines.
  • 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. (Using this event will cause a Postback upon completion)

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

C#
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 etc.), 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)


Written By
Software Developer (Senior) FDK
Iran (Islamic Republic of) Iran (Islamic Republic of)
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
AnswerRe: source code file link broken Pin
Hossein Montazeri11-Jun-14 21:21
professionalHossein Montazeri11-Jun-14 21:21 
GeneralRe: source code file link broken Pin
Dave Vroman12-Jun-14 10:07
professionalDave Vroman12-Jun-14 10:07 
GeneralRe: source code file link broken Pin
Hossein Montazeri12-Jun-14 11:01
professionalHossein Montazeri12-Jun-14 11:01 
QuestionHow to get Client Completed event ? Pin
u3299-Jun-14 0:56
u3299-Jun-14 0:56 
AnswerRe: How to get Client Completed event ? Pin
Hossein Montazeri10-Jun-14 22:22
professionalHossein Montazeri10-Jun-14 22:22 
GeneralRe: How to get Client Completed event ? Pin
u32911-Jun-14 0:08
u32911-Jun-14 0:08 
GeneralRe: How to get Client Completed event ? Pin
u32911-Jun-14 15:41
u32911-Jun-14 15:41 
GeneralRe: How to get Client Completed event ? Pin
Hossein Montazeri11-Jun-14 20:27
professionalHossein Montazeri11-Jun-14 20:27 
GeneralRe: How to get Client Completed event ? Pin
u32911-Jun-14 21:31
u32911-Jun-14 21:31 
GeneralRe: How to get Client Completed event ? Pin
Hossein Montazeri11-Jun-14 21:35
professionalHossein Montazeri11-Jun-14 21:35 
GeneralRe: How to get Client Completed event ? Pin
u32912-Jun-14 4:06
u32912-Jun-14 4:06 
GeneralMy vote of 5 Pin
Humayun Kabir Mamun18-May-14 22:02
Humayun Kabir Mamun18-May-14 22:02 
QuestionDose it work with asp.net 3.5? Pin
farsi8-Apr-14 7:01
farsi8-Apr-14 7:01 
AnswerRe: Dose it work with asp.net 3.5? Pin
Hossein Montazeri8-Apr-14 7:48
professionalHossein Montazeri8-Apr-14 7:48 
QuestiongetProgress keeps being called Pin
Alan Telford3-Apr-14 14:54
Alan Telford3-Apr-14 14:54 
AnswerRe: getProgress keeps being called Pin
Hossein Montazeri3-Apr-14 21:43
professionalHossein Montazeri3-Apr-14 21:43 
QuestionThanks Pin
cyunta28-Mar-14 2:51
cyunta28-Mar-14 2:51 
AnswerRe: Thanks Pin
Hossein Montazeri28-Mar-14 3:04
professionalHossein Montazeri28-Mar-14 3:04 
QuestionHide Progress Bar Pin
Member 1043056124-Mar-14 10:24
Member 1043056124-Mar-14 10:24 
AnswerRe: Hide Progress Bar Pin
Hossein Montazeri24-Mar-14 22:17
professionalHossein Montazeri24-Mar-14 22:17 
QuestionDatePicker error Pin
Member 1043056114-Mar-14 10:15
Member 1043056114-Mar-14 10:15 
AnswerRe: DatePicker error Pin
Hossein Montazeri14-Mar-14 11:30
professionalHossein Montazeri14-Mar-14 11:30 
GeneralRe: DatePicker error Pin
Member 1043056114-Mar-14 11:40
Member 1043056114-Mar-14 11:40 
GeneralRe: DatePicker error Pin
Hossein Montazeri14-Mar-14 11:44
professionalHossein Montazeri14-Mar-14 11:44 
GeneralRe: DatePicker error Pin
Member 1043056114-Mar-14 11:51
Member 1043056114-Mar-14 11:51 

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

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