AspdotnetCodes.com
Search
Articles
Books
Resources
Asp.Net News
Downloads
Free Tech Magazines
Asp.Net Web Hosting
Archives
Softwares
Newsletter
Suggest Us
Link to Us
Feeds Subscription
Articles
Questions & Answers
Tips & Tricks
 JavaScript Page Processor in Asp.Net
Posted by Moderator1 on 7/9/2007 10:56:30 AM Category: JavaScript
Total Views : 58141
Add to my favorites
Email to friend
  
Introduction
This article explains the way to implement Page Processor in an Asp.Net page with the help of JavaScript.
In the world of internet, the speed concerns everyone. This ultimately tests the patience of the users, as they can see only the Internet Explorer globe spin, but cannot make out either the Internet connection is down or their system is slow or any error in the back-end system. Sometimes this will totally profits bad impression on the website and this will totally avoid them from coming into the website. To avoid this situation, keep the user on their side by providing them with a message to let them know the system is currently processing on their request.
One common way to give a status message is to use JavaScript to create a standard page processor. When the user navigates to a page that takes a long time to process, the page processor appears in-between and displays some message or update progress animation image. At the same time, the requested page will be get downloaded at the background, which is not visible to the users. After the requested page gets downloaded, the page processor will get replaced by the requested page.

We are going to create page processor with the help of JavaScript. This processing delay script cannot be placed in the requested page because this script can only be executed after that page gets rendered. So we need to create a generic page processor that will handle the request from any other page. In this article, we will explain you how this page processing can be build easily with JavaScript in an Asp.Net Pages.

Sample Scenario

In your web application, create three aspx pages and named the pages as FirstPage.aspx, PageProcessor.aspx, and TargetPage.aspx. For demonstration, we are going to make request from FirstPage.aspx to the TargetPage.aspx and PageProcessor.aspx will be in the intermediate to process the request. Let us make ready page by page to implement our objective.


PageProcessor.aspx

Let us start with the code-behind of PageProcessor.aspx, declare a string variable named as PageToLoad and in the Page_Load event, assign PageToLoad with the querystring ‘PageId’ value. The value for PageId will be some page name you want to request. In our case, its value will be ‘TargetPage.aspx’. So the code will look like

protected string PageToLoad;

protected void Page_Load(object sender, EventArgs e)
{
    PageToLoad = Request.QueryString["PageId"];
}

Now in the Html design of the PageProcessor.aspx, add a JavaScript block between the <head> </head> tags as follows

<script>
function PageOnLoad()
{
   location.href = "<%=PageToLoad%>"; 
   document.images['imgloading'].src="Images/Loading.gif";
}
</script>

The function PageOnLoad have only two lines of code. If you notice the first line of code, we are using location.href for navigation, is assigned by a small asp script. The asp block uses the variable ‘PageToLoad’ which we declared in the code-behind. The value in the querystring will come to PageToLoad and PageToLoad will be assigned to location.href. So whatever page name you pass in the PageId will be assigned to the location.href. The second line of the JavaScript function is nothing but assigning some loading animation gif image to the image control you placed in this page. Then you have to call the function PageOnLoad in the body tag’s onload event as follows

<body onload="PageOnLoad();">
FirstPage.aspx

In this page, add a HyperLink control and set its NavigateUrl to PageProcessor.aspx with PageId querystring key and its value is TargetPage.aspx.
<asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/ PageProcessor.aspx?Page=TargetPage.aspx">Go to My Target Page</asp:HyperLink>

TargetPage.aspx

You can do any coding in this page. As there is nothing to process in the TargetPage.aspx, we just create a Thread class to delay the process of the page for 10 seconds. So in the Page_Load event, add the following code 

System.Threading.Thread.Sleep(10000);

Save all the three pages, right click on the FirstPage.aspx and in the popup me select View in Broser. Your default browser will load FirstPage.aspx with the Hyperlink labeled as “Go to My Target Page”. Click that link, you can see the PageProcessor.aspx come to action. Exactly after 10 seconds, you can TargetPage.aspx will get load.

There are some drawback with this concept of page processors,that is, after the TargetPage.aspx load click on your browser back-button, sure it will not allow you to go FirstPage.aspx. Let us all try to overcome this issue in near future.


To view our sample application, click here.

Click here to view the Sample Source Code
Viewer's Comments
Posted by KHALID on 7/25/2007 5:43:48 AM
Thank you i was looking for these code
 
Posted by Karthik on 10/8/2007 12:09:34 PM
Thank you very much. This is very simple and good!
 
Posted by Giri on 11/14/2007 4:58:19 PM
Excellent!!!! I searched all over the web and your solution was the simplest. Thanks
 
Posted by cxccccccc on 2/14/2008 5:43:21 AM
bad
 
Posted by vinayak on 5/21/2008 6:29:46 AM
Hi , In most of the Web appication which i do my menu depends on the role . I mean to say one menu option is visible t one person then some other person cant have access to that menu . then what shall we do make menu more flexible
 
Posted by Abhilash on 6/17/2008 2:02:34 AM
Nice article. Thats simple & good. As u say, lets fix the backward-naviagtion problem Cheers.
 
Posted by GoodJob on 10/30/2008 3:14:49 PM
Nice work, Simple and easy to use, thanks for the idea!!
 
Posted by manikanta on 11/24/2008 1:39:12 AM
Excellent!!!! Nice.....................
 
Posted by Siva on 1/20/2009 3:05:54 AM
It's very nice , every one understand easily
 
Posted by essa on 2/12/2009 1:44:09 AM
does not work with passing parameters using query string
 
Posted by Muhamamd Shahzad Ali on 3/26/2009 9:00:12 PM
Good stuff dear!!!!!! Keep it up.
 
Posted by Tim on 8/7/2009 2:44:26 PM
The querystring issue would be rather easy to resolve, just pull out all the querystrings and then apply them again to the URL in the processor page.
 
Posted by Miko Genetz on 6/29/2012 3:19:50 AM
Great. The explanation was very good. I have also found a good solution fro SMS sending from java with javascript: ozekisms.com/index.php?owpn=584 It is also useful. Thanks, Miko
 
Posted by Daniel on 10/10/2014 8:03:28 AM
great!!!
 
 Rating & Comments
A word 'Excellent' means lot to the author of this article. You can give comments about this article but not the author.
Rate this Article:
Name:
Email Id:  
We never display your email id anywhere.
Comment/Question: Max. 500 letters
Seventy plus Three Equals To
 
Sponsored by
Speech Technology Magazine
The JavaScript Anthology: 101 Essential Tips, Tricks & Hacks - Free 158 Page Preview
Simply JavaScript - Free 150 Page Preview!