Click here to Skip to main content
11,636,300 members (74,854 online)
Click here to Skip to main content

Real-time Web-styled ProgressBar Control

, 11 Nov 2006 CPOL 41.6K 676 37
Rate this:
Please Sign up or sign in to vote.
Displays in real time the progress of jobs running at server side.

Introduction

I ran into the problem of creating a progress bar in a web application because the application took some time to do background processes. This could be anything from database operations to file uploads. So I came up with a progress bar concept. Microsoft provides a control for Windows based applications but for web based applications, there is no readily available control shipped with VS. A solution can be achieved through JavaScript.

Background

I built this sample application using ASP.NET 1.1 and JavaScript.

Code Walkthrough

The sample application contains two ASPX files:

  1. Main.aspx: This file is the place holder of the progress bar.
  2. Progressbar.aspx: This file will populate the progress bar.

We will first examine the Main.aspx file. This file contains the single line code apart from the default code generated by the framework.

<iframe height =100 frameborder =0 width =900 
        id=frm runat ="server" src ="progressbar.aspx"></iframe>

height and width are set as per the developer's choice. By default, iframe will display a border; if you wish, you can avoid this my setting the frameborder attribute to 0.

Now, we will examine the Progressbar.aspx file.

function progress()
{
  var tend = "</tr></table>";
  var tstrt = "<table><tr>";
  scell = scell + "<td style='width:10;height:10' bgcolor=red>";
  document.getElementById("cell1").innerHTML = sbase + tstrt +  scell + tend; 
     
  if( i < 50)
  // total 50 cell will be created with red color.
  {                    
      i = i + 1;
      timerID = setTimeout("progress()",1000);
      // recursive call
  }
  else
  {
      if(timerID)
      {
          clearTimeout(timerID);
      }
  }
}

The above JavaScript code will generate the progress bar with a red color.

Closing Comments

It is not necessary that you should use an iframe for your progress bar. You can use the same JavaScript and HTML code in your parent page as well.

License

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

Share

About the Author

Elvin Cheng
Singapore Singapore
Elvin Cheng is currently living in Woodlands, Singapore. He has been developing applications with the .NET Framework, using C# and ASP.NET since October 2002. Elvin specializes in building Real-time monitoring and tracking information system for Semi-conductor manufacturing industry. During his spare time, he enjoys reading books, watching movie and gym.

You may also be interested in...

Comments and Discussions

 
Questionhow to add progress bar in web site of vb.net Pin
mkalantri21-Apr-09 8:03
membermkalantri21-Apr-09 8:03 
QuestionI have doubt please help me as im Beginner Pin
Govind Raj25-Sep-07 19:23
memberGovind Raj25-Sep-07 19:23 
Generalneed help Pin
faycal_2226-Aug-07 1:13
memberfaycal_2226-Aug-07 1:13 
QuestionWill this work for VB? Pin
hoops4eva14-Nov-06 9:46
memberhoops4eva14-Nov-06 9:46 
AnswerRe: Will this work for VB? Pin
Elvin Cheng15-Nov-06 4:17
memberElvin Cheng15-Nov-06 4:17 
Yes. But you have to compile the source code into an assembly say ProgressBar and then referenced it from your VB.net project.

Nothing is impossible!

GeneralRe: Will this work for VB? Pin
hoops4eva15-Nov-06 5:13
memberhoops4eva15-Nov-06 5:13 
Questiontesting on the web and how to amke it progress Pin
mikedepetris14-Nov-06 5:33
membermikedepetris14-Nov-06 5:33 

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 | Terms of Use | Mobile
Web04 | 2.8.150728.1 | Last Updated 11 Nov 2006
Article Copyright 2006 by Elvin Cheng
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid