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
