Click here to Skip to main content
14,659,434 members
Articles » Web Development » Ajax » Controls
Posted 22 May 2007


59 bookmarked

ProgressBar for ASP.NET

Rate this:
4.07 (5 votes)
Please Sign up or sign in to vote.
4.07 (5 votes)
22 May 2007CPOL
ProgressBar for ASP.NET using AJAX.

Screenshot - 068_prog_bar.jpg


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:

<%@ Page Language="VB" AutoEventWireup="true" 

      CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

<html xmlns="">
<head runat="server">
    <title>Untitled Page</title>
    <form id="form1" runat="server">
        <atlas:ScriptManager ID="ScriptManager1" 

           runat="server" EnablePartialRendering="True" />
            <atlas:TimerControl ID="TimerControl1" runat="server" 

               OnTick="TimerControl1_Tick" Enabled=false Interval=2000>
        <atlas:UpdatePanel ID="UpdatePanel1" runat="server" Mode="Conditional">
             <atlas:ControlEventTrigger ControlID=TimerControl1 EventName=Tick />
             <div style="background-color:Black; height:10px; width:300px">
                <div id="bar" runat="server" 

                   style="height:10px; width:0px; background-color:Fuchsia">
             <asp:Label ID="Label1" runat="server" Text="0 %"></asp:Label>
             <br />
             <br />
             <asp:HyperLink ID="HyperLink1" runat="server" 


               Visible="False">Reload Page</asp:HyperLink><br />
        <asp:Button ID="Button1" runat="server" Text="Button" />
    <script type="text/xml-script">
        <page xmlns:script="">

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.

<atlas:TimerControl ID="TimerControl1" runat="server" 

   OnTick="TimerControl1_Tick" Enabled=false Interval=2000>

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:

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

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

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 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
    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
         i = i + 1
         Session("status") = i
     End While
     Dim objThread As Thread = CType(Session("Thread"), Thread)
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.


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


About the Author

Web Developer
Germany 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:

For video tutorials about, ajax, gridviews, ... (in german) visit:

Comments and Discussions

QuestionConverted C# Code Pin
jithesh a10-Nov-14 0:40
Memberjithesh a10-Nov-14 0:40 
QuestionIn C# Pin
Abhilask kumar27-Sep-13 20:54
professionalAbhilask kumar27-Sep-13 20:54 
QuestionThread don't run on IIS Pin
Nico_FR758-Aug-13 2:43
MemberNico_FR758-Aug-13 2:43 
Generalactivate button Pin
linkhackz7-Mar-11 19:21
Memberlinkhackz7-Mar-11 19:21 
Generalc# code PinPopular
saber ahmadi10-Jul-09 19:22
Membersaber ahmadi10-Jul-09 19:22 
GeneralRe: c# code Pin
navyjax226-Jan-10 9:38
Membernavyjax226-Jan-10 9:38 
GeneralGreat Pin
profezmike889-Mar-09 9:05
Memberprofezmike889-Mar-09 9:05 
QuestionHigh load on the web server? Pin
hughyblah22-May-07 9:25
Memberhughyblah22-May-07 9:25 
AnswerRe: High load on the web server? Pin
fstrahberger22-May-07 21:32
Memberfstrahberger22-May-07 21:32 
GeneralGood Job Pin
merlin98122-May-07 3:33
professionalmerlin98122-May-07 3:33 
GeneralRe: Good Job Pin
fstrahberger22-May-07 3:45
Memberfstrahberger22-May-07 3:45 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

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