65.9K
CodeProject 正在变化。 阅读更多。
Home

适用于 ASP.NET 的进度条

fstrahberger
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.07/5 (5投票s)

2007 年 5 月 22 日

CPOL

1分钟阅读

viewsIcon

119541

downloadIcon

4725

使用 AJAX 实现 ASP.NET 进度条。

Screenshot - 068_prog_bar.jpg

引言

在这篇简短的文章中，我将解释如何在 ASP.NET 网站中创建一个进度条。为了更新进度条，我使用了 AJAX UpdatePanel 和 Timer 控件。

控件 (Default.aspx)

首先，我创建了一个启用 AJAX 的网站项目，并在 Web 表单上放置了一些控件。以下是生成的 Default.aspx 页面

<%@ Page Language="VB" AutoEventWireup="true" 
      CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <atlas:ScriptManager ID="ScriptManager1" 
           runat="server" EnablePartialRendering="True" />
        <div>
            <atlas:TimerControl ID="TimerControl1" runat="server" 
               OnTick="TimerControl1_Tick" Enabled=false Interval=2000>
            </atlas:TimerControl>
        </div>
        <atlas:UpdatePanel ID="UpdatePanel1" runat="server" Mode="Conditional">
           <Triggers>
             <atlas:ControlEventTrigger ControlID=TimerControl1 EventName=Tick />
           </Triggers>
           <ContentTemplate>
             <div style="background-color:Black; height:10px; width:300px">
                <div id="bar" runat="server" 
                   style="height:10px; width:0px; background-color:Fuchsia">
                </div>
             </div>
             <asp:Label ID="Label1" runat="server" Text="0 %"></asp:Label>
             <br />
             <br />
             <asp:HyperLink ID="HyperLink1" runat="server" 
               NavigateUrl="~/Default.aspx" 
               Visible="False">Reload Page</asp:HyperLink><br />
           </ContentTemplate>
        </atlas:UpdatePanel>
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </form>
    <script type="text/xml-script">
        <page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
            <references>
            </references>
            <components>
            </components>
        </page>
    </script>
</body>
</html>

关于上述代码的一些细节。为了更新进度条，我使用了一个 AJAX Timer 控件。这个计时器会调用服务器方法 TimerControl1_Tick。 TimerControl1 最初需要被禁用。

<atlas:TimerControl ID="TimerControl1" runat="server" 
   OnTick="TimerControl1_Tick" Enabled=false Interval=2000>
</atlas:TimerControl>

然后我创建了一个 UpdatePanel，它由 TimerControl1 的滴答事件触发。这意味着每当 TimerControl1 的滴答事件触发时，UpdatePanel1 将被刷新

<atlas:UpdatePanel ID="UpdatePanel1" runat="server" Mode="Conditional">
    <Triggers>
         <atlas:ControlEventTrigger ControlID=TimerControl1 EventName=Tick />
    </Triggers>
    <ContentTemplate>
    </ContentTemplate>
</atlas:UpdatePanel>

最后，我使用了两个 div 元素来显示进度条

<div style="background-color:Black; height:10px; width:300px">
   <div id="bar" runat="server" style="height:10px; width:0px; background-color:Fuchsia">
   </div>
</div>

接下来，我将一个 Button 放置在 UpdatePanel1 之外，以提交表单并启动长时间运行的任务

<asp:Button ID="Button1" runat="server" Text="Button" />

代码 (Default.aspx.vb)

当用户点击 Button1 时，表单会发布到服务器。然后代码后台创建一个新的线程来执行长时间运行的任务。接下来，我启动线程并启用 TimerControl1。

Protected Sub Button1_Click(ByVal sender As Object, _
              ByVal e As System.EventArgs) Handles Button1.Click
    Session.Add("status", 0)
    Dim objThread As New Thread(New System.Threading.ThreadStart(AddressOf DoTheWork))
    objThread.IsBackground = True
    objThread.Start()
    Session("Thread") = objThread
    Button1.Enabled = False
    TimerControl1.Enabled = True
End Sub

长时间运行的任务在 DoTheWork 函数中完成。以下是代码

Protected Sub DoTheWork()
     Dim i As Integer = 0
     While i < 100
         Thread.Sleep(500)
         i = i + 1
         Session("status") = i
     End While
     Dim objThread As Thread = CType(Session("Thread"), Thread)
     objThread.Abort()
End Sub

任务的当前状态被写入会话变量 status。这个会话变量将在 TimerControl1_Tick 事件中使用，以更新进度条。以下是滴答事件的代码

Protected Sub TimerControl1_Tick(ByVal sender As Object, _
              ByVal e As System.EventArgs) Handles TimerControl1.Tick
     Dim i As Integer = CType(Session.Item("status"), Integer)
     If i = 100 Then
         TimerControl1.Enabled = False
         HyperLink1.Visible = True
     End If
     Label1.Text = i.ToString + " %"
     Dim div As HtmlGenericControl = Me.FindControl("bar")
     i = i * 3
     div.Style.Item("width") = i.ToString + "px"
End Sub

首先，我将会话变量 status 转换为一个 Integer。接下来，我检查任务是否完成 (i=100)。如果为真，我再次禁用 TimerControl1 并启用一个超链接来重新加载页面。无论如何，我都会更新 Label1 的文本值。并且，我也设置了内部 div 元素的宽度。

© . All rights reserved.