Creating a generic “Please Wait…” page for ASP.NET

February 8, 2009

I was looking at Peter Bromberg’s post “Build a dynamic progress page” which is about creating a “Loading” page for time-taking asp.net webpages. The problem with Peter’s solution is if your destination page has more than one query string params, then it wont work. Another small problem is non-standard DOM access which wont work in non-IE browsers (it was written almost five years back so it might not a big concern at that time)

Here is the modified code to make it work with query string AND non-IE browsers.

The basic idea is having a transient ‘Loading’ page which loads the time-taking page in the background and in meantime show a nice animated progress bar. Lets name our middle page ‘loading.aspx’

loading.aspx

Header section has javascript code to show, hide progress bar while loading the destination page

    capture1

Body has nothing but visual element for progress bar. Note that we are calling Begin() on body load and End() on unload.

 

capture2 

loading.aspx.cs

In the code-behind, destinal URL is generated.

 

capture31 

Finally, to use this page to call a time-consuming page (say  longloadingpage.aspx) which takes ID1 and ID2 as query params  simply call

/loading.aspx?destPage=longloadingpage.aspx?ID1=123&ID2=345

Advertisements

2 Responses to “Creating a generic “Please Wait…” page for ASP.NET”

  1. jon Says:

    thanks. that was interesting. as a beginner programmer i want to try it.

    -jon
    QA
    Thinkstream Inc., Baton Rouge, LA

  2. Atakan Says:

    I made several corrections/modifications to this code.

    1. You need quots around this
    window.location = “”;

    2.
    // we don’t really want to include the first querystring, so avoid it by using a simple counter.

    int count = 0;
    foreach (string k in Request.QueryString.AllKeys)
    {
    if (count > 0)
    destURL += “&” + k + “=” + Request.QueryString[k].ToString();
    count++;
    }

    // including a label may be usefull for users to visualize. and * 6 is close enough to simulate the 100 percent.
    2.

    if(curCtr <= ctrMaxIterations)
    {
    document.getElementById("indicator").style.width = curCtr * 10 + "px";
    document.getElementById("Status").innerText= curCtr * 6 + "%";
    return curCtr;
    }

    This is a very helpful program. Thanks for improving and sharing it. Of course thanks to Peter Bromberg for developing this wonderfull code for us.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: