Click here to Skip to main content
15,867,568 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

 
QuestionCSS Styling or Otherwise Pin
Brandon Byers19-Dec-23 9:54
Brandon Byers19-Dec-23 9:54 
BugProgress not updating correctly Pin
Member 1544410028-Nov-21 10:06
Member 1544410028-Nov-21 10:06 
GeneralRe: Progress not updating correctly Pin
Member 154441005-Dec-21 18:10
Member 154441005-Dec-21 18:10 
GeneralRe: Progress not updating correctly Pin
Hossein Montazeri8-Dec-21 20:50
professionalHossein Montazeri8-Dec-21 20:50 
Questionhigher version of ajax toolkit is not working Pin
sundar sahukhala19-Feb-20 17:50
sundar sahukhala19-Feb-20 17:50 
AnswerRe: higher version of ajax toolkit is not working Pin
Sam Farah3-Mar-20 11:27
Sam Farah3-Mar-20 11:27 
QuestionRequest is not available in this context Pin
suresh jaggarapu24-Nov-15 1:50
suresh jaggarapu24-Nov-15 1:50 
Questioni have a strange problem Pin
umer jamil7-Aug-15 6:59
umer jamil7-Aug-15 6:59 
AnswerRe: i have a strange problem Pin
Hossein Montazeri7-Aug-15 9:39
professionalHossein Montazeri7-Aug-15 9:39 
GeneralRe: i have a strange problem Pin
umer jamil7-Aug-15 10:02
umer jamil7-Aug-15 10:02 
GeneralMy vote of 5 Pin
Heriberto Lugo3-Aug-15 5:42
Heriberto Lugo3-Aug-15 5:42 
GeneralRe: My vote of 5 Pin
Hossein Montazeri4-Aug-15 0:48
professionalHossein Montazeri4-Aug-15 0:48 
QuestionProblem getting to function Pin
Scott Petersen30-Mar-15 13:25
Scott Petersen30-Mar-15 13:25 
AnswerRe: Problem getting to function Pin
Hossein Montazeri1-Apr-15 11:17
professionalHossein Montazeri1-Apr-15 11:17 
GeneralMy vote of 1 Pin
Tyler458-Feb-15 11:44
Tyler458-Feb-15 11:44 
GeneralRe: My vote of 1 Pin
Hossein Montazeri14-Feb-15 21:16
professionalHossein Montazeri14-Feb-15 21:16 
QuestionProgressbar Control Pin
tara_sh50022-Jan-15 14:09
tara_sh50022-Jan-15 14:09 
AnswerRe: Progressbar Control Pin
Hossein Montazeri23-Jan-15 21:34
professionalHossein Montazeri23-Jan-15 21:34 
Questionjavascript / jquery error Pin
eastlands30-Aug-14 5:14
eastlands30-Aug-14 5:14 
AnswerRe: javascript / jquery error Pin
Hossein Montazeri31-Aug-14 1:16
professionalHossein Montazeri31-Aug-14 1:16 
QuestionMy vote of 5 Pin
ipd-wiss18-Jun-14 20:47
ipd-wiss18-Jun-14 20:47 
AnswerRe: My vote of 5 Pin
Hossein Montazeri19-Jun-14 7:10
professionalHossein Montazeri19-Jun-14 7:10 
GeneralMy vote of 5 Pin
u32913-Jun-14 6:22
u32913-Jun-14 6:22 
GeneralRe: My vote of 5 Pin
Hossein Montazeri14-Jun-14 0:21
professionalHossein Montazeri14-Jun-14 0:21 
Questionsource code file link broken Pin
Tridip Bhattacharjee11-Jun-14 21:07
professionalTridip Bhattacharjee11-Jun-14 21:07 

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.