|
|
|
JavaScript Page Processor in Asp.Net |
|
Posted by
Moderator1
on
7/9/2007 10:56:30 AM
|
Category:
JavaScript |
|
|
Total Views :
6632 |
|
Adding to your Favorites....
|
|
|
 |
|
|
|
|
|
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 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|