ASP.NET 进度条控件

• 下载源码 - 6.25 Kb

引言

我正在使用 Microsoft Vote 控件，可以在这里找到。它使用条形图显示每个选项的投票百分比，就像 CodeProject 文章的评分一样。

在使用过程中，我发现它在 Netscape 中不会显示任何内容，因为它不会在空单元格中呈现  。我的 ProgressBar 类解决了这个问题，并具有新的功能

如何在 HTML 中显示进度条

据我所知，有 4 种方法可以实现这一点

使用 HTML 表格

这实际上是 Microsoft ProgressBar 的工作方式。要显示 40% 的值，您需要创建一个包含 1 行和 5 列的表格，前 2 个单元格具有条形图颜色，如下面的代码所示

<table border='0' cellspacing='0' cellpadding='0' height='10px' bgColor='#B5CCFF'>
<tr>
	<td height='10px' width='5' bgColor='Blue'></td>
	<td width='5' bgColor='Blue'></td>
	<td width='5' bgColor='Blue'></td>
	<td width='5' bgColor='Blue'></td>
	<td width='5' bgColor='Blue'></td>
	<td width='5' bgColor='Blue'></td>
	<td width='5' bgColor='Blue'></td>
	<td width='5' bgColor='Blue'></td>
	<td width='5' bgColor='Blue'></td>
	<td width='5'></td>
	<td width='5'></td>
	<td width='5'></td>
	<td width='5'></td>
	<td width='5'></td>
	<td width='5'></td>
	<td width='5'></td>
	<td width='5'></td>
	<td width='5'></td>
	<td width='5'></td>
	<td width='5'></td>
</tr>
</table>

结果：（如果您使用的是 Netscape 浏览器，您将看不到任何内容）

请注意，有 20 个单元格用于绘制条形图。因此，我们可以以 5% 的步长显示该值 (100 / 20 = 5)。上面的 HTML 表格在 Netscape 浏览器中不可见，因为表格单元格是空的。要解决这个特定于浏览器的问题，您可以将每个单元格的值设置为  （不间断空格）或透明 gif。使用后者的好处是条形图将具有您想要的高度。

使用图像

您可以使用条形图颜色创建一个 1x1 像素的图像。我们根据百分比设置图像标签的宽度。请看下面的示例

<table border='0' cellpadding='0' cellSpacing='0' bgColor='Red'>
<tr>
	<td width='100'><img src='bar.gif' width='50' height='10px'></td>
</tr>
</table>

结果

该red背景颜色是在表格中设置的。这种方法与我测试过的所有浏览器（IE、Netscape 和 Opera）兼容。

动态创建图像

这是最复杂的解决方案。您可以根据参数动态创建图像文件。这与所有浏览器兼容，因为您将创建一个简单的图像。您可以创建具有渐变条或其他图形效果的复杂图像。此解决方案的唯一问题是，每次需要时，您都会消耗 WebServer 资源来创建图像。
示例

所有可能值的图像

您可以为可以表示的每个值使用一个图像，例如 bar0.gif、bar05.gif、bar10.gif 等。尽管它很简单，但 ProgressBar 类不处理此方法。

ProgressBar 类

逻辑非常简单，只需查看源代码即可。

公共实例属性

BorderColor	继承。定义边框颜色，默认为 Color.Empty
BackColor	继承。定义背景颜色，默认为 Color.Empty
ForeColor	继承。定义前景色，默认为 Color.Empty
PercentageStep	它是百分比步长。默认值为 5，因此仅允许值 % 5 == 0。此值必须可以被 100 整除。只有当您将条形图呈现为 HTML 表格时才应使用它。
FillImageUrl	它是渲染到 Netscape 浏览器时应在空单元格中使用的图像。只有当您将条形图呈现为 HTML 表格时才应使用它。
BarImageUrl	它是应用作条形图的图像。
ImageGeneratorUrl	将为进度条生成图像的页面。这些值将通过 QueryString 发送到该页面，其中 width 为 'w'，height 为 'h'，backColor 为 'bk'，borderColor 为 'bc'，foreColor 为 'fc'，percentage 为 'p'。
百分比	百分比值。

一个更快的解决方案

除了具有更多功能外，与 Microsoft 控件相比，ProgressBar 可以呈现更少的 html 代码。请查看下面的比较表

解决方案		渲染的 Html 大小（以字节为单位）
ProgressBar 类	使用 Html 表格	705
	使用 gif 文件（带边框，不带边框）	264, 170 + gif 文件大小
	动态创建图像文件	170 + 生成的图像文件大小
Microsoft ProgressBar	使用 Html 表格	1381

这些值可能会根据使用的值而有所不同。

如何在运行时创建图像

要做到这一点，将创建一个内容类型为 image/gif（或其他图像格式）的页面。 生成图形后，将使用 Response.OutputStream 流将其流式传输到浏览器。 有关更多信息，请查看提供的源代码。