Click here to Skip to main content
12,072,809 members (74,559 online)
Click here to Skip to main content
Add your own
alternative version

Stats

139.4K views
7K downloads
93 bookmarked
Posted

Create Simple ASP.NET Progress Bar Control

, 30 May 2005
Rate this:
Please Sign up or sign in to vote.
Create simple ASP.NET Progress Bar Web control, and download example ZIP file.

Sample Image - prgBar2.jpg

Using the code

Our progress bar is a simple HTML table with single row and two columns:

<table width="200" border="0">
    <tr>
        <td width="50%" bgcolor="#999999">Indicator</td>
        <td width="50%" ></td>
    </tr>
</table>

Should be like:

Indicator

We assign column widths with percent values, if your score or progressed value is 300 and Max. Score/Progressed Value is 1000,then your percentage is { (300/1000)*100 = 30 }. So, the First column width is (width="30%"), and second column width is { 100-30=70 } (width="70%")

So:

    <tr>
        <td width="30%" bgcolor="#999999">Indicator</td>
        <td width="70% "></td>
    </tr>
</table>

Should be:

Indicator

Create your own Web Control

If you are not familiar with custom Web controls, here is a partial definition from the Microsoft documentation:

Web controls run on the server and include form controls such as buttons and text boxes, as well as special purpose controls such as a calendar. This allows you to programmatically control these elements on a Web page. Web controls are more abstract than HTML controls. Their object model does not necessarily reflect HTML syntax. (See msdn.microsoft.com.)

We need two variables only to implement this control progressed value and max value, and let Render method write above the HTML table with our two values to web page..

public class WebCustomControl1 : System.Web.UI.WebControls.WebControl
{
    private float progressedValue;
    private float maxValue;
    
    //to access the control within your web solution code
    public float Value
    {
        get{return progressedValue;}
        set{progressedValue=value}
    } 
    public float MaxValue
    {
        get{return maxValue;}
        set{maxValue=value}
    } 
        
        
    protected override void Render(HtmlTextWriter output)
    {
        //table start tag
        output.Write("<table width="200" border="0">");
        //row start tag
        output.Write("<tr>");
        //
        //Progress Indicator Column start tag
        output.Write("<td");
        //calculate width in percent
        output.Write(" width=\""+progressedValue*100/maxValue);
        //the rest of column start&end tags
        output.Write("\" bgcolor=\"#999999\">"+
               progressedValue*100/maxValue+"% </td>");
            
        //second Column start tag
        output.Write("<td");
        //calculate width in percent
        output.Write("" width=\""+(100-(progressedValue*100/maxValue))");
        //the rest of column start&end tags
        output.Write("\" ></td>");
        //row end tag
        output.Write("</tr>");
        //table end tag
        output.Write("</table>");
        //done...
    }
}

Step Further

Our 3D ASP.NET Control

In the above table, I use background image attribute in this control , then I've great result, 3D Bar!!

The Code modification

There are five member properties and two methods, one method writes the above code with help of StringBuilder then returns it as string to Render method, there is nothing new..!

Render method becomes:

protected override void Render(HtmlTextWriter output)
{
    output.Write(Progress(currentValue,totalValue));
}

where the Progress(....) method do what we do in the above example, but with additional tags (just images & styles....):

private string Progress(float _value,float _total)
{
  float result=(_value*100/_total);//calculations 
  float spent=100-result;          //result holders
            
  StringBuilder s=new StringBuilder("");

  switch(result.ToString())
  {
    case "0"://score=0
    {
      s.Append("<center>");
      s.Append("<table border=\"0\" width=\"622\">");
      s.Append("<tr><td width=\"100%\">");
      s.Append("<img border=\"0\" src=\"images/zero.jpg\" " + 
             " width=\"622\" height=\"29\">");
      s.Append("<p align=\"center\" dir=\"ltr\">");
      s.Append("<p align=\"center\"><font color=\"#FF0000\" " + 
             " size=\"6\" face=\"Impact\">");
      s.Append(minText); // min value text
      s.Append("</font><font size=\"6\" face=\"Impact\" " + 
             "color=\"#FF9933\">");
      s.Append("</font><font color=\"#FF9933\" " + 
             "face=\"Impact\" size=\"5\"> X 10");
      s.Append("<sup>6</sup></font>" + 
             "<font color=\"#FF0000\" size=\"6\" face=\"Impact\">");
      s.Append("    ...!</font></td></tr></table>");
      s.Append("<font color=\"#8585AD\" face=\"Impact\" " + 
             "size=\"2\"> Completed ");
      s.Append(_value+" / "+_total);// acutally data
      s.Append("</font></font></p>");
      s.Append("</center>");
      break;
    }
    case "100"://score=100
    {
      s.Append("<center>");
      s.Append("<table border=\"0\" width=\"622\">");
      s.Append("<tr><td width=\"100%\">");
      s.Append("<img border=\"0\" src=\"images/full.jpg\" " + 
             "width=\"622\" height=\"33\">");
      s.Append("<p align=\"center\" dir=\"ltr\">");
      s.Append("<p align=\"center\"><font " + 
             "size=\"6\"face=\"Impact\" color=\"#FF6600\">");
      s.Append(fullText); //max value text
      s.Append("</font>");
      s.Append("<font size=\"5\" face=\"Impact\" " + 
            "color=\"#FF0000\">. . . !</font>");
      s.Append("<font size=\"5\" color=\"#FF0000\">" + 
            "</font></td></tr></table>");
      s.Append("<font color=\"#8585AD\" face=\"Impact\" " + 
            "size=\"2\"> Completed ");
      s.Append(_value+" / "+_total);// acutally data
      s.Append("</font></font></p>");
      s.Append("</center>");
      break;
    }
    default://score=0.1~99.9
    {
      // Progress Bar
      s.Append("<center>");
      s.Append("<table border=\"0\"width=\"622\" " + 
           "background=\"images/bg.jpg\"height=\"26\"");
      s.Append("dir=\"rtl\">");
      s.Append("<tr><td width=\"100%\"> " + 
           "<div align=\"left\">");
      s.Append(" <table border=\"0\" width=\"100%\"> <tr>");
    
      s.Append("<td width=\"");
      s.Append(spent); // empty cell percentage value
      s.Append("%\"></td>");

      s.Append("<td width=\"");
      s.Append(result);          // progress bar percentage value
      s.Append("%\">");

      s.Append("<table border=\"0\" width=\"100%\">");
      s.Append("<tr><td width=\"1%\">");
      s.Append("<img border=\"0\" src=\"images/endprogressBG.JPG\" " + 
            "width=\"9\"height=\"");
      s.Append("29\"></td>");    
      s.Append("<td width=\"97%\" background=\"images/progressBG.JPG\"> " +
            "</td><td width=\"");
      s.Append("2%\">");
      s.Append("<img border=\"0\" src=\"images/lprogressBG.JPG\" " + 
            "width=\"16\"height=\"");
      s.Append("29\"></td>");
      s.Append("</tr></table></div></td> " + 
            "</tr></table></td></tr></table>");
                    
      //string
      s.Append("<table border=\"0\" width=\"500\">" + 
            "<tr><td width=\"100%\">");
      s.Append("<p dir=\"ltr\" align=\"center\">< " + 
            "font face=\"Impact\"><font size=\"4\">");
      s.Append(" </font><font color=\"#FF6600\" size=\"6\">");
      s.Append(result.ToString());// percentage
      s.Append("</font><font size=\"4\" color=\"#FF6600\">");
      s.Append(" % </font><font color=\"#8585AD\" " + 
           "> Completed ");
      s.Append(_value+" / "+_total);// acutally data
      s.Append("</font></font></td></tr></table>");

      s.Append("</center>");

      break;
    }
  }
  return s.ToString(); // Done...!
}

The images used by this control are within ZIP file, you should copy this folder to your web solution.

========== Build: 1 succeeded, 0 failed, 0 skipped ==========

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

Ameen Abudbash
Team Leader
Egypt Egypt
• Over 8 years of experience in software developing, designing and implementing High Available web based applications specialized in Microsoft & IBM technologies.
• Extensive experience in developing, designing and implementing ECM solutions using IBM Filenet,Workplace, IBM BPM, REST services, AND Partial Experience in major CMS (Documentum and Oracle ECM).
• Extensive experience in Designing & Implementing Web2 Enterprise Apps using Leading RIA Frameworks (ExtJs , YUI… ).
• Partial experience in development with Microsoft SharePoint 2007 & 2010.
• Practical experience in Microsoft BI tools SSAS, SSIS, SSRS and Excel Services.
• Deep understanding of the OOP and Strong Design patterns background
• Interactive and fast enough to learn new technologies and sciences.

• Extensive experience in problem-to-resolution troubleshooting skills
• Playing different IT roles including designing, implementing, supporting, consulting and development, Managing teams composed of analyst, developers & QA.
• Agile project management methodologies and managed teams with Scrum.
• Deliver technical workshops, presentations, documents and POCs.

You may also be interested in...

Comments and Discussions

 
Questionit is not showing intermediate result. It renders the last one. Pin
santosh jha"Don"10-Apr-15 21:54
membersantosh jha"Don"10-Apr-15 21:54 
BugProgress bar not showing Pin
Serenity117-Mar-14 22:04
memberSerenity117-Mar-14 22:04 
Questioncalling Render?? Pin
J TG27-Jan-14 0:27
memberJ TG27-Jan-14 0:27 
GeneralMy vote of 5 Pin
antonache_radu@yahoo.com26-Apr-12 23:35
memberantonache_radu@yahoo.com26-Apr-12 23:35 
QuestionHow to Use this control? Pin
shokung1-Mar-12 22:45
membershokung1-Mar-12 22:45 
GeneralMy vote of 5 Pin
manoj kumar choubey17-Feb-12 22:46
membermanoj kumar choubey17-Feb-12 22:46 
GeneralI tried to add ProgressBar in my Application but in toobox i can't find the Progress Bar Pin
mkalantri23-Apr-09 6:46
membermkalantri23-Apr-09 6:46 
Generalhelp please Pin
Member #323672215-Jan-07 1:28
memberMember #323672215-Jan-07 1:28 
GeneralNice one Pin
Daniel Vaughan29-Oct-06 6:42
memberDaniel Vaughan29-Oct-06 6:42 
NewsWebControl Usage Pin
Askaroth26-Feb-06 11:13
memberAskaroth26-Feb-06 11:13 
AnswerRe: WebControl Usage Pin
Ameen Abudbush28-Feb-06 4:38
memberAmeen Abudbush28-Feb-06 4:38 
GeneralRe: WebControl Usage Pin
Member 79267041-Dec-11 18:55
memberMember 79267041-Dec-11 18:55 
GeneralDivision by zero Pin
aurorahe9-Sep-05 10:20
memberaurorahe9-Sep-05 10:20 
GeneralRe: Division by zero Pin
Ameen Abudbush10-Sep-05 23:26
memberAmeen Abudbush10-Sep-05 23:26 
GeneralCannot open in Visual Studio.NET 2003 Pin
Dan T.9-Aug-05 12:58
sussDan T.9-Aug-05 12:58 
GeneralRe: Cannot open in Visual Studio.NET 2003 Pin
Ameen Abudbush9-Aug-05 22:09
memberAmeen Abudbush9-Aug-05 22:09 
GeneralThanks !!! Pin
Trance Junkie30-May-05 1:56
memberTrance Junkie30-May-05 1:56 
GeneralRe: Thanks !!! Pin
Ameen Abudbush2-Jun-05 13:14
memberAmeen Abudbush2-Jun-05 13:14 

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.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.160208.1 | Last Updated 30 May 2005
Article Copyright 2005 by Ameen Abudbash
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid