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

Progressbar user control in ASP.net 2.0

, 9 Sep 2005
Rate this:
Please Sign up or sign in to vote.
The sample code to create simple progress bar user control in ASP.NET 2.0
Download source code - 3.3 Kb

Sample Image - Progressbar.jpg

Introduction

I wanted to create a simple progress bar for asp.net application which can be used across the pages and wanted to avoid use of any third party control or create any custom control for the same.

In the attached source code consist of following files:

 

  1. ProgressBar.aspx – The design page for the user control
  2. ProgressBar.aspx.vb – The code behind for the user control
  3. default.asp – The demo aspx page
  4. default.asp.vb – The code behind demo page

Let’s have a look at the importent code portions.

1.      ProgressBar.aspx: This is a simple page where I have added a asp:table control with no rows. Following are the properties of the table control that I am setting in the design mode.

id = tblProgressBar

runat = server

BorderWidth="1px"

CellPadding="1"

CellSpacing="1"

Height="15px"

Width="200px">

 

2.      ProgressBar.aspx.vb: This is the code behind page for the progress bar user control. Following are the properties that I have added to the progress bar user control.

·        Public Property BGColor() As Drawing.Color – Background color of the progress bar. This property will be used to set the background color of the table that we have added in design mode.

·        Public Property FillColor() As Drawing.Color - Color of the progress blocks in the progress bar. This property will be used to set the background color of the table cells.

·        Public Property BorderColor() As Drawing.Color – Border color of the progress bar. This property will be used to set the border color of the table that we have added in design mode.

·        Public Property BorderSize() As Integer - Border size of the progress bar - This property will be used to set the border size of the table that we have added in design mode.

·        Public Property CellPadding() As Integer - This property will be used to set the cell padding of the table that we have added in design mode.

·        Public Property CellSpacing() As Integer - This property will be used to set the cell spacing of the table that we have added in design mode.

·        Public Property Height() As Integer – This property will be used to set the height of the table that we have added in design mode.

·        Public Property Width() As Integer – This property will be used to set the width of the table that we have added in design mode.

·        Public Property Blocks() As Integer – This property will be used to create the number of cell in the row of the table.

·        Public Property Value() As Integer – This property will be used to show the percentage progress done in the progress bar. User of the control can specify this value in the range of 0 to 100.

 

After adding the above mentioned properties to the control, the next task is to add small code in the Page_PreRender event.

This is what I am doing in this event:

 

  1. Create a table row.
  2. Read the blocks property of the control and create that many table cells.
  3. Determine whether the crated cell lies in the range of progress, if yes then set the background color of the cell to the FillColor property of the control. This is how I am doing it:

If intBlocks <= Math.Ceiling((Me.Value * Me.Blocks / 100)) Then

tblCell.BackColor = Me.FillColor

End If

  1. Add the table cells to the table row.
  2. Add the table row to the table.

 

Using the Control

The attached source code contains a sample which shows how to use the control.

 

 

Using the code

1. Download the code.
2. Unzip the files
3. Open the Visual studio 2005.
4. Goto File -> Open Web Site.. and open the Progressbar folder.

5. Run the web site

 

Thanks,

Manoj Deshmukh

 

 

 

</body> </html>

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

About the Author

Manoj Deshmukh
Web Developer
India India
Hello friends,
I am working as a software professional from last 6 years.
I have worked on various technologies and currently learning .NET.
My hobbies include listing to Indian classical music, Drama and photography. I do compose poems in my Marathi.

Comments and Discussions

 
Generalgreat article PinmemberKapil Thakur3-Apr-08 2:31 
GeneralTying progress bar to file upload Pinmembermalbin28-Apr-07 15:25 
GeneralRe: Tying progress bar to file upload Pinmemberdongxiang20-Jun-07 23:04 
Generalbad code PinmemberMember #380403121-Feb-07 22:38 
QuestionAjax? PinmemberChristian Siebmanns29-Oct-06 6:52 
GeneralThanks! PinmemberLambi_uk3-Jan-06 1:38 
QuestionWhere's the -article-? PinmemberMetaphor10-Sep-05 13:54 

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
Web03 | 2.8.140721.1 | Last Updated 9 Sep 2005
Article Copyright 2005 by Manoj Deshmukh
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid