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:
- Main.aspx: This file is the place holder of the progress bar.
- 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)
{
i = i + 1;
timerID = setTimeout("progress()",1000);
}
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.