ProgressBar for ASP.NET

fstrahberger

Rate me:

4.07/5 (5 votes)

22 May 2007CPOL1 min read

117.4K

4.7K

ProgressBar for ASP.NET using AJAX.

Download source code - 412 KB

Introduction

In this short article, I will explain how to create a progress bar for ASP.NET websites. In order to update the progress bar, I'm using an AJAX UpdatePanel and the Timer control.

The controls (Default.aspx)

First of all, I created an AJAX enabled website project and dropped some controls on the web form. Here is the resulting Default.aspx page:

ASP.NET

<%@ 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>

Here are some details about the above code. To update the progress bar, I used an AJAX Timer control. This timer calls the server method TimerControl1_Tick. TimerControl1 has to be disabled at first.

ASP.NET

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

Then I created an UpdatePanel that is triggered by the TimerControl1 tick event. This means whenever the tick event of TimerControl1 fires, UpdatePanel1 will be refreshed:

HTML

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

Last, I used two div-elements to display the progress bar:

HTML

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

Next, I placed a Button outside the UpdatePanel1 to submit the form and start the long running task:

HTML

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

The code (Default.aspx.vb)

When the user clicks Button1, the form is posted to the server. Then the code-behind creates a new thread to execute the long running task. Next, I start the thread and enable 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

The long running task is done in the function DoTheWork. Here is the code:

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

The current status of the task is written into a session variable status. This session variable will be used in the TimerControl1_Tick event to update the progress bar. Here is the code for the tick event:

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

First, I convert the session variable status into an Integer. Next, I check whether the task is finished (i=100). When this is true, I disable TimerControl1 again and enable a hyperlink to reload the page. In any case, I update the text value for Label1. And, I also set the width for the inner div-element.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

fstrahberger

Web Developer

Germany

Florian works as consultant for change- and configuration management for about 7 years. In this environment he is often forced to work with unix, perl and shell scripts.

For more information about change- and configuration management (espacially Serena Dimensions) visit: www.venco.de

For video tutorials about asp.net, ajax, gridviews, ... (in german) visit: www.siore.com

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

ProgressBar for ASP.NET

Introduction

The controls (Default.aspx)

The code (Default.aspx.vb)

License

Comments and Discussions