玄铁剑

• Download source files - 21 Kb
• Download demo project - 34 Kb

Introduction

This is a real-time web ProgressBar control which is built on top of the Script Callbacks Framework. If you have not read the Script Callbacks Framework article, take a look at the article Implement Script Callbacks Framework in ASP.NET 1.X.

Objectives

• To make use of the Script Callbacks Framework.
• To share the ideas of how people can make use of the Script Callbacks Framework to create interesting controls.
• To share the ideas of creating a real-time web-styled ProgressBar.

Background

ProgressBar control consists of 2 core components, which is ProgressBar.cs and ProgressBar.js files. Each of them takes care of the logic processing at server and client side, respectively. However, 2 of them work together makes the dream of real-time web-styled ProgressBar comes true.

Web-styled ProgressBar control visually indicates the progress of a lengthy operation. This ProgressBar control displays a bar that fills in from left to right with the system highlight color as an operation progresses. The ProgressBar control is typically used when an application performs tasks such as updating database or getting data from database. Users of an application might consider an application unresponsive if there is no visual cue. By using the ProgressBar in your application, you alert the user that the application is performing a lengthy task and that the application is still responding.

The Maximum and Minimum properties define the range of values to represent the progress of a task. The Minimum property is typically set to a value of zero, and the Maximum property is typically set to a value indicating the completion of a task. For example, to properly display the progress when copying a group of files, the Maximum property could be set to the total number of files to be copied. The Value property represents the progress that the application has made toward completing the operation. Because the bar displayed in the control is a collection of blocks, the value displayed by the ProgressBar only approximates the Value property's current value. Based on the size of the ProgressBar, the Value property determines when to display the next block.

There are a number of ways to modify the value displayed by the ProgressBar other than changing the Value property directly. You can use the Step property to specify a specific value to increment the Value property. Each time the ProgressBar control callbacks and then it will use the value specified in the Step property to increment the Value property .

The Message property will be displayed on the Statusbar while performing the callbacks operation. However, you also can change the display of the progress of work either as Percentage or Value through the TextMode property.

Using the ProgressBar control

Developing a Page that makes use of ProgressBar control is as easy as few steps listed below:  

1.    Make sure that the ProgressBar.jsfile is located in the Scripts folder under your Web Project folder.

2.    Add the ProgressBar.dll control into your Toolbox through the Add/Remove Items... menu from the Toolbox panel.

3.    Drag the ProgressBar control from the Toolbox and drop onto the WebForm.

4.    Double click the ProgressBar control tol create the Event Handler, this is where you will place the code to do the progress checking.

5.    Last but not least, you can attach any JavaScript function to the ProgressBar OnClientCompleteHandler or OnClientErrorHandler properties to tell the control to react when the processing completes or error occurrs in the middle of processing at the server, respectively.

The OnClientCompleteHandler property of ProgressBar control expects the Javascript function with the following signature:

				function ProgressBar_OnComplete(context) 
{ 
    //    your code goes here... 
};
		

The OnClientErrorHandler property of ProgressBar control expects the Javascript function with the following signature:

				function ProgressBar_OnError(msg, context) 
{ 
    //    alert(msg);//     your code goes here... 
};
		

Last, but not least, I've included a demo sample, available from the link at the top of this article, demonstrates the capabilities of this ProgressBar control and how you could use it in your ASP.net Web Project.

Points of Interest

1.  I've tested it in Microsoft Internet Explorer and Mozila Firefox, both of them work fine. However, the progress value or progress percentage displays on the ProgressBar does not get updated in the Mozila Firefox browser.

2.  I've included the Designer's source code that associates with the ProgressBar control, it allows users to select any of the four predefined skins built into the ProgressBar control.

Conclusion