Create Simple ASP.NET Progress Bar Control

• Download 3D Progress Bar Web Control ( Source & Binary ) - 38.4 Kb

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:

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:

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 ==========