Click here to Skip to main content
15,867,568 members
Articles / Web Development / IIS
Article

ASP.NET ProgressBar Control

Rate me:
Please Sign up or sign in to vote.
2.95/5 (15 votes)
31 Mar 20023 min read 360.6K   9.3K   106   18
A ProgressBar control to be used in WebForms

Sample Image

Introduction

I was using the Microsoft Vote control that can be found here. It shows the percentage of votes that each choice has using a bar, just like the CodeProject article's rating.

Using it I found the problem that it wouldn't show anything in Netscape since it doesn't render the   in empty cells. My ProgressBar class handles this problem and has new capabilities

How to show a progress bar in HTML

As far as I'm concerned there's 4 ways to accomplish this:

Using HTML tables

This is actually the way Microsoft ProgressBar does the trick. To show a 40% value you create a table with 1 row and 5 columns, and the first 2 cells have the bar color, as the code below:

<table border='0' cellspacing='0' cellpadding='0' height='10px' bgColor='#B5CCFF'>
<tr>
	<td height='10px' width='5' bgColor='Blue'></td>
	<td width='5' bgColor='Blue'></td>
	<td width='5' bgColor='Blue'></td>
	<td width='5' bgColor='Blue'></td>
	<td width='5' bgColor='Blue'></td>
	<td width='5' bgColor='Blue'></td>
	<td width='5' bgColor='Blue'></td>
	<td width='5' bgColor='Blue'></td>
	<td width='5' bgColor='Blue'></td>
	<td width='5'></td>
	<td width='5'></td>
	<td width='5'></td>
	<td width='5'></td>
	<td width='5'></td>
	<td width='5'></td>
	<td width='5'></td>
	<td width='5'></td>
	<td width='5'></td>
	<td width='5'></td>
	<td width='5'></td>
</tr>
</table>
Result: (if you are using a Netscape browser you won't see a thing)

Note that there's 20 cells to draw the bar. So when can show the value in steps of 5% (100 / 20 = 5). The HTML table above isn't visible in Netscape browsers since the table cells are empty. To solve this browser specific problem you can set each cell value to &nbsp; (non breaking space) or a transparent gif. The benefit of using the last one is that the bar will have the height that you want.

Using an Image

You create a 1x1 pixel image with the bar color. We set the image tag width according to the percentage. Take a look at the sample below:

<table border='0' cellpadding='0' cellSpacing='0' bgColor='Red'>
<tr>
	<td width='100'><img src='bar.gif' width='50' height='10px'></td>
</tr>
</table>
Result:
Image 2

The red background color is set in the table. This approach is compatible with all browsers that I tested (IE, Netscape and Opera).

Creating an image on the fly

This is the most sophisticated solution. You create the image file on the fly according to the parameters. This is compatible with all the browsers since you will create a simple image. You can create sophisticated images with gradient bar or other graphic effects. The only problem with this solution is that you are consuming your WebServer resources to create the image every time it's needed.
Example:
A progress bar generated on fly

A image for all possible values

You could have a image for each of the values that could be represented, e.g. bar0.gif, bar05.gif, bar10.gif and so on. This approach isn't handled by the ProgressBar class, although it's simple.

The ProgressBar class

The logic is really simple, just take a look at the sources.

Public Instance Properties

BorderColor Inherited. Defines the border color, the default is Color.Empty
BackColor Inherited. Defines the background color, the default is Color.Empty
ForeColor Inherited. Defines the foreground color, the default is Color.Empty
PercentageStep It's the percentage step. The default value is 5, so only values % 5 == 0 are allowed. This value must be divisible by 100. Should be used only if you'll render the bar as a HTML table.
FillImageUrl It's the image that should be used in empty cells when rendering to a Netscape browser. Should be used only if you'll render the bar as a HTML table.
BarImageUrl It's the image that should be used as the bar.
ImageGeneratorUrl The page that will generate the image for the progress bar. The values will be send to it through the QueryString, where width is 'w', height is 'h', backColor is 'bk', borderColor is 'bc', foreColor is 'fc' and percentage is 'p'.
Percentage The percentage value.

A faster solution

Besides having more features the ProgressBar can render less html code comparing to the Microsoft control. Take a look at comparison table below:

Solution Rendered Html Size (in bytes)
ProgressBar class Using Html tables 705
Using a gif file (with border, w/o border) 264, 170 + gif file size
Creating the image file on the fly 170 + generated image file size
Microsoft ProgressBar Using Html table 1381

The values may vary according to the values used.

How to create images on the fly

To do it will be creating a page that has the content type an image/gif (or other image format). After generating the graphic will stream it to the browser using the Response.OutputStream stream. For more information take a look at the source code provided.

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


Written By
Architect VisionOne AG
Switzerland Switzerland
XicoLoko is a brazilian developer based in Switzerland.

Comments and Discussions

 
GeneralMy vote of 1 Pin
Ankur_Agrawal9-May-13 3:35
Ankur_Agrawal9-May-13 3:35 
GeneralMy vote of 5 Pin
kumarvinit8622-Sep-11 20:19
kumarvinit8622-Sep-11 20:19 
GeneralMy vote of 1 Pin
sujit_haldar5-Feb-11 0:40
sujit_haldar5-Feb-11 0:40 
Generalprogress bar Pin
Rod DeValcourt26-Jul-09 12:49
Rod DeValcourt26-Jul-09 12:49 
Questionrun project Pin
ravanth21-Oct-08 23:27
ravanth21-Oct-08 23:27 
Generalhmmmm Pin
dongxiang20-Jun-07 22:54
dongxiang20-Jun-07 22:54 
QuestionThanks and how about punk rock concert?? Pin
ratjung27-Mar-07 0:01
ratjung27-Mar-07 0:01 
GeneralProgress Bar Pin
Amit20053-Jan-05 20:27
Amit20053-Jan-05 20:27 
GeneralRe: Progress Bar Pin
khalidpal6-Mar-06 22:07
khalidpal6-Mar-06 22:07 
GeneralUpdating the progress bar live... Pin
12-Jun-02 0:49
suss12-Jun-02 0:49 
GeneralRe: Updating the progress bar live... Pin
7-Aug-02 0:08
suss7-Aug-02 0:08 
GeneralRe: Updating the progress bar live... Pin
Heath Stewart23-Dec-02 3:12
protectorHeath Stewart23-Dec-02 3:12 
GeneralRe: Updating the progress bar live... Pin
shielo24-Jul-03 22:10
shielo24-Jul-03 22:10 
GeneralRe: Updating the progress bar live... Pin
john51330-Oct-03 8:33
john51330-Oct-03 8:33 
GeneralUse only 2 TD's Pin
Mats Karlsson9-Apr-02 23:45
Mats Karlsson9-Apr-02 23:45 
GeneralRe: Use only 2 TD's Pin
xicoloko18-Apr-02 1:40
xicoloko18-Apr-02 1:40 
GeneralRe: Use only 2 TD's Pin
8-Nov-02 5:05
suss8-Nov-02 5:05 
GeneralRe: Use only 2 TD's Pin
PeteSB6-Nov-08 23:21
PeteSB6-Nov-08 23:21 

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.