Problem Statement:
Most modern day website use AJAX for page navigation and
gone are the days of complete HTTP redirection so it is imperative that we
support
back and forward buttons on the browser so that end users navigation is
not broken. In this article we discuss about solutions which are already
available and problems with them.
Microsoft History
Support:
Post .Net 3.5 sp1 Microsoft’s Script manager supports history
for websites using Update panels. This is achieved by enabling the ENABLE
HISTORY property for the script manager and then the event “Page_Browser_Navigate”
needs
to be handled. So whenever the browser buttons are clicked the event is
fired and the application can write code
to do the navigation.
The following articles provide good tutorials on how
to do
that
http://www.asp.net/aspnet-in-net-35-sp1/videos/introduction-to-aspnet-ajax-history
http://www.codeproject.com/KB/aspnet/ajaxhistorymanagement.aspx
And Microsoft api internally creates an IFrame and changes
the bookmark of the url. Unfortunately this has a bug and it does not work in
Ie6 and 7 which are the major browsers but it works in ie8 and Firefox. And
Microsoft has apparently fixed this bug in .Net 4.0. Following is the blog
http://weblogs.asp.net/joshclose/archive/2008/11/11/asp-net-ajax-addhistorypoint-bug.aspx
For solutions which are still running on .net 3.5 sp1 there
is no solution which Microsoft offers so there is are two way
to solve this
o
Disable the
back button.
o
Develop custom solution.
Disable
back button
Even though this might look like a very simple thing
to do
there are issues around doing this
because there is no event which can be manipulated from the javascript.
The browser does not provide an api
to do this. So most of the technical
solution on internet offer work arounds like doing a history.forward(1) so that
even if the user clicks a
back button the destination page redirects the user
to the original page. This is not a good customer experience and does not work
for asp.net website where there are different views in the same page.
There are other ways around detecting the window unload
events and writing code there. So there are 2 events onbeforeUnload and
onUnload and we can write code
to show a confirmation message
to the user. If
we write code in onUnLoad then we can only show a message but it is too late
to
stop the navigation. And if we write on onBeforeUnLoad we can stop the
navigation if the user clicks cancel but this event would be triggered for all
AJAX calls and hyperlinks where the href is anything other than #. We can do
this but the website has
to be checked properly
to ensure there are no links
where href is not # otherwise the user would see a popup message saying “you
are leaving the website”.
Believe me after
doing a lot of research on the
back button disable I found it easier
to support
it rather than disabling the button. So I am going
to discuss a solution which
work using jQuery with some tweaking.
Custom Solution
JQuery already
provides an api
to manage the history of a AJAX website -
http://plugins.jquery.com/project/history
We need
to integrate this with Microsoft Page request
manager so that both of them work in tandem.
The page state is maintained in the cookie so that it can be
passed
to the server and I used jQuery cookie plug in for that –
http://plugins.jquery.com/node/1386/release
Firstly when the page loads there is a need
to hook up all
the events on the page which needs
to cause browser history and following is
the code
to that.
jQuery(document).ready(function()
{
// Initialize history plugin.
// The callback is called at once by present location.hash.
jQuery.history.init(pageload);
// set onlick event for buttons
jQuery("a[@rel='history']").click(function() {
//
var hash = this.page;
hash =
hash.replace(/^.*#/, '');
isAsyncPostBack = true;
// moves
to a new page.
// pageload is called at once.
jQuery.history.load(hash);
return true;
});
});
The above scripts basically gets all the DOM objects which
have the attribute rel=”history” and add the event. In our test page we have
the link button which has the attribute rel set
to history.
<asp:LinkButton ID="Previous" rel="history" runat="server" onclick="PreviousOnClick">Previous</asp:LinkButton>
<asp:LinkButton ID="AsyncPostBack" rel="history" runat="server" onclick="NextOnClick">Next</asp:LinkButton>
<asp:LinkButton ID="HistoryLinkButton" runat="server"
style="display:none" onclick="HistoryOnClick"></asp:LinkButton>
And you can see that there is an hidden HistoryLinkButton
which used
to send a sever side postback in case of browser
back or previous
buttons. And note that we need
to use display:none and not visible= false
because asp.net AJAX would disallow any post backs if visible=false.
And in general the pageload event get executed on the client
side when a
back or forward is pressed and the function is shown below
function pageload(hash) {
if
(hash) {
if
(!isAsyncPostBack) {
jQuery.cookie("page", hash);
__doPostBack("HistoryLinkButton", "");
}
isAsyncPostBack = false;
} else
{
//
start page
jQuery("#load").empty();
}
}
As you can see in case there is an hash in the url we are
basically do an asp.net AJAX post
back using the following statement
__doPostBack("HistoryLinkButton", "");
So whenever the user clicks
back or forward the post
back
happens using the event statement we provide and Previous event code is invoked
in the code behind. We need
to have the
code
to use the pageId present in the url
to change the page content.
And there is an important thing
to note – because the hash
is worked out using the pageId’s there is a need
to recalculate the hash after
every AJAX post
back so following code is plugged in
function ReWorkHash() {
jQuery("a[@rel='history']").unbind("click");
jQuery("a[@rel='history']").click(function() {
//
var
hash = jQuery(this).attr("page");
hash = hash.replace(/^.*#/, '');
jQuery.cookie("page", hash);
isAsyncPostBack = true;
//
moves
to a new page.
//
pageload is called at once.
jQuery.history.load(hash);
return
true;
});
}
This code is executed from the code behind using
ScriptManager RegisterClientScriptBlock as shown below –
ScriptManager.RegisterClientScriptBlock(this, typeof(_Default), "Recalculater",
"ReWorkHash();", true);
A sample application is available
to be downloaded at the
following location –
http://techconsulting.vpscustomer.com/Source/HistoryTest.zip
And a working sample is available at –
http://techconsulting.vpscustomer.com/Samples/Default.aspx
