Progressbar for long running scripts

Download source code - 4.51 KB

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:

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:

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