Click here to Skip to main content
Click here to Skip to main content

ProgressBar for ASP.NET

, 22 May 2007
Rate this:
Please Sign up or sign in to vote.
ProgressBar for ASP.NET using AJAX.

Screenshot - 068_prog_bar.jpg

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:

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

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

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

Share

About the Author

fstrahberger
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: www.venco.de
 
For video tutorials about asp.net, ajax, gridviews, ... (in german) visit: www.siore.com

Comments and Discussions

 
QuestionIn C# PinprofessionalAbhilask kumar27-Sep-13 20:54 
QuestionThread don't run on IIS PinmemberNico_FR758-Aug-13 2:43 
Generalactivate button Pinmemberlinkhackz7-Mar-11 19:21 
Generalc# code Pinmembersaber ahmadi10-Jul-09 19:22 
GeneralRe: c# code PinmemberMember 350908026-Jan-10 9:38 
GeneralGreat Pinmemberprofezmike889-Mar-09 9:05 
QuestionHigh load on the web server? Pinmemberhughyblah22-May-07 9:25 
AnswerRe: High load on the web server? Pinmemberfstrahberger22-May-07 21:32 
GeneralGood Job Pinmembermerlin98122-May-07 3:33 
GeneralRe: Good Job Pinmemberfstrahberger22-May-07 3:45 
Thanks ...

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

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

| Advertise | Privacy | Mobile
Web03 | 2.8.140827.1 | Last Updated 22 May 2007
Article Copyright 2007 by fstrahberger
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid