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