Click here to Skip to main content
15,867,834 members
Articles / Web Development / ASP.NET
Article

Progressbar for long running scripts

Rate me:
Please Sign up or sign in to vote.
3.12/5 (10 votes)
21 Aug 2008CPOL 39K   797   22   5
Show a progress bar when your code runs for a long time.

Image 1

Red.jpg

Introduction

I have been looking, to no avail, for an easy way to show a progress bar in ASP.NET that can be updated with C# code-behind, so I built one and think it might be useful to other developers who need to show the progress of a long running code snippet.

Using the code

The progress bar can be placed on any ASP.NET form by just adding a few new functions to your existing code. The colour can be changed by just updating the image used to display the bar.

There are only two functions that need to be included. The first function is to draw the progress bar in a table:

C#
public void CreateInterface()
{
    //Draw the progress page
    Response.Write("<table width=\"100%\" style=\"font-family:Arial; font-size:12px;" + 
                   "text-align:center\"><tr><td>" + 
                   "<div id='mydiv' style=\"border:solid 1px black\" >" + 
                   "<strong>Progressbar Demo</strong><br /><hr />" +
                   "<table border=\"0\" style=\"font-family:Arial;" + 
                   " font-size:12px;\" width=\"300px\">" + 
                   "<tr><td width=\"100%\" style=\"text-align:center\"" + 
                   "><div id=\"ProgressText\">0%</div>" + 
                   "</td></tr></table>" +
                   "<table border=\"1\" cellpadding=\"0\" cellspacing=\"0\" " + 
                   "width=\"300px\" height=\"13\">" + 
                   "<tr><td id=\"indicator\" style=\"background-image:url('Progress" + 
                   ddlColour.SelectedItem.Text + ".jpg');" + 
                   " background-repeat:repeat-x\" width=\"0%\">" + 
                   "</td><td width=\"100%\"></td></tr>" + 
                   "</table></div></td></tr></table>");
    //Insert the scripts for updating
    Response.Write("<script language="\""javascript\">;");

    Response.Write("function ShowProgress(){}");

    Response.Write("function StartShowWait(){mydiv.style.visibility = 'visible';" + 
                   " window.setInterval('ShowProgress()',1000);}");

    Response.Write("function HideWait(){mydiv.style.display" + 
                   " = 'none';window.clearInterval();}");

    Response.Write("function UpdateIndicator(NewValue) " + 
                   "{indicator.style.width = NewValue +\"%\";" + 
                   " ProgressText.innerText=NewValue + \"%\"}");

    Response.Write("StartShowWait();</script>");

    if (!IsPostBack)
    {
        //Hide if first load
        Response.Write("<script>HideWait();</script>");
    }

    Response.Flush();
}

The second function is to update the progress bar from your code:

C#
public void UpdateProgressBar(double Text)
{
    Response.Write("<script>UpdateIndicator(\"" + 
             Convert.ToInt32(Text).ToString() + "\");</script>");
    Response.Flush();
}

License

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


Written By
Web Developer Metrix Software Solutions
South Africa South Africa
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionHow to update progress based on server side task status. Pin
Sudipta Chaudhari31-May-09 5:40
Sudipta Chaudhari31-May-09 5:40 
QuestionWhy boxing? Pin
Guido_d22-Aug-08 3:29
Guido_d22-Aug-08 3:29 
AnswerRe: Why boxing? Pin
Wayne Redelinghuys22-Aug-08 3:53
Wayne Redelinghuys22-Aug-08 3:53 
Most of the time I use a formula to work out the percentage that is currently completed and the answer is normally a double value such as 1.2396666 For ease of use I then pass the double value and then convert it to a int value for display purposes.

Wayne Redelinghuys

GeneralPlease Check your formatiing Pin
Abhijit Jana21-Aug-08 23:22
professionalAbhijit Jana21-Aug-08 23:22 
GeneralRe: Please Check your formatiing Pin
Wayne Redelinghuys22-Aug-08 3:59
Wayne Redelinghuys22-Aug-08 3:59 

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.