ajax实现页面加载进度条显示

源码：

 

客户端：

    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
        <div >
            <asp:Label ID="Label1" runat="server" Text="Label" Width="200"></asp:Label>
        </div>
        <div style=" width:200px; border-right:black 1px ridge; border-top:black 1px ridge; border-left:black 1px ridge; border-bottom:black 1px ridge;">
        <div runat="server" id="ProgressDiv" style="width:1%; background-color:Blue;"></div>
        </div>
            <asp:Timer ID="Timer1" runat="server" Enabled="False" Interval="10">
            </asp:Timer>
        </ContentTemplate>
        </asp:UpdatePanel>
    </div>

 

 

后台代码：

   Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            Timer1.Enabled = True'启动timer
        End If
    End Sub

 

'此函数返回目前的进度   

 Protected Function GetStatus() As Int32
        Dim status As Int32 = 0
        If Not Session("status") Is Nothing Then
            status = Convert.ToInt32(Session("status"))
        End If
        status += 1
        Session("status") = status
        If status >= 100 Then
            Timer1.Enabled = False
            Session("status") = 0
        End If
        Return status
    End Function

 

    Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As System.EventArgs) Handles Timer1.Tick
        Dim status As Int32 = GetStatus()
        ProgressDiv.Style("width") = status.ToString + "%"  'div的宽度等于status
        Label1.Text = ProgressDiv.Style("width")
    End Sub