一个简单的进度条 Web 用户控件

• 下载源代码文件 - 9.19 Kb

引言

在一个最近的项目中，我需要一种方法来向用户显示一系列手动推进的网页的进度。如果他们正在浏览第 10 页，共 20 页，我希望他们能够清楚地看到他们已经完成了一半。

我的理想解决方案是一个快速、简单、轻量级的进度条。我曾尝试过一些复杂的想法，例如动态创建图像来表示当前状态，但最终另一位程序员向我展示了一种更简单的方法，即使用 HTML 表格。我采用了这个想法，并通过创建一个我可以在我的 ASP.NET 应用程序中使用（和重用）的 Web 用户控件来扩展它。

使用代码

我创建了一个带有单个标签控件的 Web 用户控件，名为 lblProgress。然后，我添加了一个公共 SetProgress 方法，允许父 Web 表单设置进度。

Public Sub SetProgress(ByVal current As Integer, ByVal max As Integer)
    Dim percent As String = Double.Parse(current * 100 / max).ToString("0")

    If Not percent.Equals("0") And Not percent.Equals("100") Then
        lblProgress.Text = percent + "% complete (" + _
                current.ToString() + " of " + max.ToString() + ")"

    lblProgress.Text = lblProgress.Text & _
        "<TABLE cellspacing=0 cellpadding=0 border=1 width=200 ID="Table1"_
        ><TR><TD bgcolor=#000066 width=" + _
        percent.ToString() + _
        "%> </TD><TD bgcolor=#FFF7CE> _
        </TD></TR></TABLE>"
    End If
End Sub

后来，我添加了一个检查，以防止进度条在达到阈值（在我的例子中为 25%）之前显示。这个想法是，我们不想通过显示他们只有完成了 5% 来打击用户的积极性。相反，我们将从他们达到某个预定点时开始显示进度条，届时它将更具鼓励作用。

If Integer.Parse(percent) < 25 Then
    'only start showing at 25%
    lblProgress.Visible = False
Else
    lblProgress.Visible = True
End If

关注点

显然，这是一种非常简单的技术，但它救了我一命——我可能会花费很多时间编写一个动态生成图像的用户控件，并且获得的效果仅比这个稍好一些。

历史

• 首次上传：2003 年 9 月 9 日。