Click here to Skip to main content
11,643,493 members (76,502 online)
Click here to Skip to main content

Progressbar user control in ASP.net 2.0

, 9 Sep 2005 83.5K 2.3K 39
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

Share

About the Author

Manoj Deshmukh
Architect
India India
Hands on Architect with 15 + years of experience in Microsoft technologies and worked for various clients across the globe. Has Insightful experience in Architecture, Design and Development of projects based on Microsoft Technologies. Worked with multiple fortune 500 customers. Possesses good knowledge on design patterns and best practices in .NET technologies.

You may also be interested in...

Comments and Discussions

 
Generalgreat article Pin
Kapil Thakur3-Apr-08 2:31
memberKapil Thakur3-Apr-08 2:31 
GeneralTying progress bar to file upload Pin
malbin28-Apr-07 15:25
membermalbin28-Apr-07 15:25 
GeneralRe: Tying progress bar to file upload Pin
dongxiang20-Jun-07 23:04
memberdongxiang20-Jun-07 23:04 
Generalbad code Pin
Member #380403121-Feb-07 22:38
memberMember #380403121-Feb-07 22:38 
QuestionAjax? Pin
Christian Siebmanns29-Oct-06 6:52
memberChristian Siebmanns29-Oct-06 6:52 
GeneralThanks! Pin
Lambi_uk3-Jan-06 1:38
memberLambi_uk3-Jan-06 1:38 
QuestionWhere's the -article-? Pin
Metaphor10-Sep-05 13:54
memberMetaphor10-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 | Terms of Use | Mobile
Web04 | 2.8.150731.1 | Last Updated 9 Sep 2005
Article Copyright 2005 by Manoj Deshmukh
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid