创建简单的 ASP.NET 进度条控件
4.15/5 (26投票s)
2005 年 5 月 22 日
2分钟阅读
178623
7972
创建简单的 ASP.NET 进度条 Web 控件，并下载示例 ZIP 文件。
使用代码
我们的进度条是一个简单的 HTML 表格，包含一行和两列
<table width="200" border="0">
<tr>
<td width="50%" bgcolor="#999999">Indicator</td>
<td width="50%" ></td>
</tr>
</table>
应该如下所示
| 指示器 |
我们使用百分比值分配列宽。如果你的分数或已完成的值是 300，最大分数/已完成值是 1000，那么你的百分比是 { (300/1000)*100 = 30 }。因此，第一列的宽度是 (width="30%")，第二列的宽度是 { 100-30=70 } (width="70%")
所以：
<tr>
<td width="30%" bgcolor="#999999">Indicator</td>
<td width="70% "></td>
</tr>
</table>
应该如下所示
| 指示器 |
创建你自己的 Web 控件
如果你不熟悉自定义 Web 控件，以下是 Microsoft 文档中的部分定义
Web 控件在服务器上运行，包括表单控件（如按钮和文本框），以及特殊用途控件（如日历）。这允许你以编程方式控制网页上的这些元素。Web 控件比 HTML 控件更抽象。它们的对象模型不一定反映 HTML 语法。（请参阅 msdn.microsoft.com。）
我们只需要两个变量来实现此控件：已完成的值和最大值，并让 Render 方法将上述 HTML 表格与我们的两个值写入网页..
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...
}
}
进一步步骤
我们的 3D ASP.NET 控件
在上面的表格中，我在此控件中使用背景图像属性，然后我得到了很好的结果，3D 条形图！！
代码修改
有五个成员属性和两个方法，一个方法使用 StringBuilder 编写上述代码，然后将其作为 string 返回给 Render 方法，没什么新鲜的……！
Render 方法变为
protected override void Render(HtmlTextWriter output)
{
output.Write(Progress(currentValue,totalValue));
}
其中 Progress(....) 方法执行我们在上述示例中所做的事情，但带有额外的标签（只是图像和样式……）
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...!
}
此控件使用的图像位于 ZIP 文件中，你应该将此文件夹复制到你的 Web 解决方案中。
========== 构建: 成功 1 个，失败 0 个，跳过 0 个 ==========