Decrease Font Size
Increase Font Size
   BLOG

ASP.NET redirect a web page with AJAX loading indicator image

by bryian 6. February 2010 17:14

ASP.NET page redirecting progress indicator |

Progress Indicator |

Progress Indicator For Slow-Loading Pages |

ASP.NET intermediate processing page |

ASP.NET AJAX loading page |

ASP.NET intermediate page |

ASP.NET Menu Target |

ASP.NET progress indicator |

AJAX loading indicator |

Page Loading Indicator |

ASP.NET progress bar

 

Introduction

There are times when the web pages that the web applications are redirecting to, might take some time to response or load. For instance, after the users successfully login into a web application, the application will redirect the request to the home page. Imagine that, if the mentioned page contains a dashboard and many personalized WebParts. The requested web page might take some time to respond depending on the users Internet connection speed and the amount of network traffic at any given time. Some users might get impatient and tempted to click on other buttons or links on the page, see figure 1. To overcome this problem, first, redirect the request to an intermediate page, and then load the requested page from there. The main purpose of the intermediate page is to display an AJAX loading indicator image (figure 2), while the users wait for the requested web page to respond.

Figure 1
no loading indicator
Figure 2
with loading indicator

Implementation

Create an HTML page and name it Redirecting.html, add an image tag in the body section and wrap it in a div element. See listing 1

Listing 1

<div style='position:absolute;z-index:5;top:45%;left:45%;'>
    <img id="imgAjax" alt="loading..." title="loading..." src="images/ajax-loading.gif" style="width: 100px; height: 100px" /><br /> <br />
 </div>

Add the JavaScript shown in listing 2 below the div tag. In this JavaScript, we have two global variables namely querystring and page, and a public function called toPage. After reading the JavaScript best practices article, I decided to employ the JavaScript module pattern. I have created a namespace called redirect to wrap the mentioned public variables and function. The variable querystring will return the query string value in the current URL. The page variable will return the substring of the querystring from index of "=" to the end of the string. The purpose of the function toPage() is to append a Header to refresh the web page for browsers other than Internet Explorer (IE). If the browser type is IE and its version is greater than or equal to 4, then use the location.replace function to replace the current URL with new location URL. The redirect.begin() will invoke the toPage() method.

Listing 2

<script type="text/javascript">
    /* <![CDATA[ */
    this.focus(); //focus on new window
    redirect = function() {
        var querystring = window.location.search.substring(1); //query string
        var page = querystring.substring(querystring.indexOf('=') + 1, querystring.length);
        function toPage() {
            if (page !== undefined && page.length > 1) {
                document.write('<!--[if !IE]>--> <head><meta http-equiv="REFRESH" content="1;url=' + page + '" /><\/head><!--<![endif]-->');
                document.write(' \n <!--[if IE]>');
                document.write(' \n <script type="text/javascript">');
                document.write(' \n var version = parseInt(navigator.appVersion);');
                document.write(' \n if (version>=4 || window.location.replace) {');
                document.write(' \n window.location.replace("' + page + '");');
                document.write(' document.images["imgAjax"].src = "images/ajax-loading.gif"');
                document.write(' \n } else');
                document.write(' \n window.location.href="' + page + '";');
                document.write(' \n  <\/script> <![endif]-->');
            }
        }
        return {
            begin: toPage
        }
    } ();

    redirect.begin();

    /* ]]> */
</script>  

Using the Code

Response.Redirect("Redirecting.html?page=test.aspx");

<a href="Redirecting.html?page=test.aspx" target="_blank"> Redirect and Open on new page</a>

//requested web page with multiple query string
<a href="Redirecting.html?page=http://www.amazon.com/gp/offer-listing/059610197X?tag=asp-net-20&linkCode=sb1&camp=212353&creative=380553">
	Redirect with multiple query string</a>

Points of Interest

When I tested this JavaScript on browsers other than Internet Explorer, the image did not render correctly. Injecting a Header to refresh the page instead of calling the location.replace or location.href solves the problem.

I encapsulated the JavaScript in a HTML page because the whole process does not require server side programming and I can reuse it in others web applications that are written in different programming languages.

On IE 6, the order of the lines shown below is very important. If we place 2 before 1, the image will not display on IE 6. The current order works fine on both the IE 6 and 7.
1) document.write(' \n window.location.replace("' + page + '");');
2) document.write(' document.images["imgAjax"].src = "images/ajax-loading.gif"');

Conclusion

I hope someone will find this tips useful. If you find any bugs or disagree with the contents, please drop me a line and I'll work with you to correct it. I would suggest downloading the demo and explore it in order to grasp the full concept of it because I might have left out some useful information. Tested on IE 6.0/7.0, Firefox, Google Chrome, Apple Safari 4.0.4, Verizon BlackBerry Storm

Tested on IE 6.0/7.0/8.0, Google Chrome, Firefox, Safari

Resources

JavaScript best practices

Watch this script in action

Demo

Downloads

Download

Comments (38) -

12/22/2009 10:33:19 PM #

tooth whitening

How to add timer on code behind file which redirect to another page after 10 secs? ASP.NET?

tooth whitening India

12/24/2009 3:59:39 AM #

zoom whitening

I am very new to vb.net, and am having a lot of trouble getting the vertical scroll-bar to work. Can anybody let me in on some scroll-bar code to make this work? Thank you!

zoom whitening India

12/26/2009 3:11:42 AM #

glamour images

Need to know which brand has the best service and costs cheap. Not interested about advance features, intended for old couples.THANKS..

glamour images United States

12/28/2009 3:39:11 AM #

Budget Van Lines

i wonder if theres a more elegant solution..

Budget Van Lines United States

12/28/2009 3:33:16 PM #

Recycled Mugs

Is it ok to redirect a web page to another web page while its in the Google index?

Recycled Mugs India

12/30/2009 12:57:35 AM #

boat builders

Is there a way to block the redirect meta tag when viewing a web page?

boat builders India

12/31/2009 2:53:50 AM #

cosmetic dentistry

Is there away to redirect a web page, to a random a link on that page.?

cosmetic dentistry India

1/3/2010 1:08:42 AM #

Miami web design

This i one of the hardest part of web designing. To make work the codes you input in all the existing browsers.

Miami web design United States

1/4/2010 3:25:35 PM #

Car Hire in Hobart

I want to buy a blue-tooth phone to use for some java software that I'm designing and i don't want to spend too much money on it. I don't care very much about other characteristics, it just has to have blue-tooth and has to be java-enabled.

Car Hire in Hobart India

1/7/2010 8:14:35 PM #

men's health magazine

Before becoming a workaholic, I used to do a lot of rock climbing. Prior to any big climb, I'd review the route in the guidebook and read the recommendations made by people who had visited the site before. But, no matter how good the guidebook, you need actual rock climbing experience.

men's health magazine India

1/15/2010 9:26:39 AM #

Watch Series

The watch series is willing to have a video streamer can you please suggest how it would be if i prder the frame design in .net

Watch Series United States

1/15/2010 11:39:46 AM #

Weight Loss Tips

Hey, just thought you might want to know that your website looks messed up when I view it on my Nokia N95. I'm not sure if it has something to do with my phone's browser or your website.

-Amanda

Weight Loss Tips United States

1/19/2010 11:05:57 AM #

Refurbished Computers

Very informative article. I’ve found your blog via Yahoo and I’m really glad about the information you provide in your posts. Thank You for sharing this very informative article... Regards… http://www.pctechoutlet.com

Refurbished Computers Canada

1/25/2010 10:10:23 PM #

logitech z-5500 review

Love your site I'm going to subscribe.

logitech z-5500 review Greece

1/28/2010 1:30:54 AM #

James @ overclock Intel Quad Core

This was just what I was looking for... Thanks!

James @ overclock Intel Quad Core Syria

1/28/2010 3:36:28 PM #

Jim @ CPU overclock Guide

Dude.. I am not much into reading, but somehow I got to read lots of articles on your blog. Its amazing how interesting it is for me to visit you very often.

Jim @ CPU overclock Guide Syria

2/8/2010 3:47:18 PM #

Los Angeles Search Engine Optimization

timer on code behind file which redirect to another page after 10 secs? ASP.NET?

Los Angeles Search Engine Optimization United States

2/9/2010 7:17:28 PM #

Ron

Thanks a lot man...looks good and will make my job easier Smile

Ron United States

2/11/2010 5:14:15 PM #

ipage review

This is a outstanding piece, I discovered your weblog looking around Google for a related theme and arrived to this. I couldn't discover to much other information and facts on this piece, so it was great to discover this one. I will be returning to look at some other articles that you have another time.

ipage review United States

2/18/2010 8:23:52 AM #

Jarrod Check

Ditto with the last comment

Jarrod Check Australia

2/21/2010 4:06:54 AM #

HELENA

Great blog, keeping me from working! This is the kind of information people expect from all blogs

HELENA Bahrain

3/12/2010 3:01:08 PM #

Stevie

This is interesting, please post more often! Is there a place to donate to your site?

Stevie Lithuania

3/15/2010 5:24:14 AM #

These posts are very clear and concise: good job.

Argentina

3/22/2010 1:20:48 PM #

David

Great blog, keeping me from searching, I really interested to know more

David Sweden

3/23/2010 2:04:30 PM #

web directory

Hello Briyan, very informative post as i m learing ASP.net.thanks for sharing

web directory India

3/29/2010 5:51:57 PM #

silicuda

incredible things thanx ...)

silicuda Islamic Republic of Pakistan

3/30/2010 4:14:40 PM #

Destiny

It's Very good

Destiny Ukraine

4/4/2010 5:10:39 AM #

Clark Harris

Remember to, are you capable to PM me and tell me few of a great deal more thinks about this,
I am really fan of the weblog...

Clark Harris Iraq

4/14/2010 2:02:50 PM #

freeads

this is a great blog post
desurves a bookmark and a new subscriber

freeads France

4/21/2010 8:14:26 PM #

Kate

Ok. This is great information on asp.net page redirecting progress indicator.
Kudos

Kate Switzerland

5/17/2010 12:03:58 PM #

Thomas Collins

I adore your weblog

Thomas Collins Azerbaijan

5/19/2010 12:50:53 PM #

lyrics

nice blog

lyrics United States

5/23/2010 5:02:11 AM #

Charles Campbell

Hey very nice weblog!!! Guy .. Gorgeous .. Incredible .. I'll bookmark your blog and consider the feeds also...

Charles Campbell Ecuador

11/20/2010 3:55:29 AM #

Sai

Really a good Post Smile but i am facing some problem with this code when i use it in my code like

" htmlfile: Operation Aborted "

when i debug this html file Frown Please help me, as i dont know what went wrong ???

Sai India

12/14/2010 12:01:48 AM #

chord

nice post

chord

12/15/2010 11:20:33 PM #

rumah mungil yang sehat

Valuable information and excellent design you got here! I would like to thank you for sharing your thoughts and time into the stuff you post!! Thumbs up!

rumah mungil yang sehat Brunei Darussalam

12/20/2010 7:31:09 PM #

Toothache Remedy

I really like your articles

Toothache Remedy Saudi Arabia

2/4/2011 1:33:12 PM #

Death facebook statuses

I loved this article. It was so great.

Death facebook statuses United States

Pingbacks and trackbacks (6)+

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading