CodeProject: ProgressBar for ASP.NET. Free source code and programming help

Report Article

Discuss

Send to a friend

4 votes for this Article.

Popularity: 2.45 Rating: 4.08 out of 5

Note: This is an unedited contribution. If this article is inappropriate, needs attention or copies someone else's work without reference then please Report This Article

Download 068_prog_bar_src.zip - 412.8 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 Update Panel and the Timer Control.

The controls (Default.aspx)

First of all I created an Ajax enabled Website project and dropped some controls at the web form. Here is the resulting Default.aspx page.

<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " href="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">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">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. The TimerControl1 has to be disabled at first.

<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 the TimerControl1 fires the UpdatePanel1 will be refreshed:

<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:

<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:

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

The code (Default.aspx.vb)

When the user clicks the Button1 the form is posted to the server. Then the code behind creates a new Thread to execute the long running task. Next I started the thread and enabled the 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 wether the task is finished (i=100). When this is true I disable the TimerControl1 again and enable an Hyperlink to reload the page. In any case I update the text value for Label1. And also I set the width for the inner div-element.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

fstrahberger

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

Occupation:	Web Developer
Location:	Germany

Other popular ASP.NET articles:

Multiple File Upload With Progress Bar Using Flash and ASP.NET
How to use Flash to upload multiple files in a medium-trust hosting environment
CAPTCHA Image
Using CAPTCHA images to prevent automated form submission.
10 ASP.NET Performance and Scalability Secrets
10 easy ways to make ASP.NET and AJAX websites faster, more scalable and support more traffic at lower cost
Paging of Large Resultsets in ASP.NET
An article about optimization and performance testing of MS SQL Server 2000 stored procedures used for paging of large resultsets in ASP.NET
File Upload with ASP.NET
This article shows you how work with uploading of the files using ASP.NET and C#.