Back Button Support for ASP.NET AJAX

Awhile back I had a request to enable the inclusion of back button support into an AJAX web application that relied very heavily on the use of an update panel, including drill down levels, etc. My quest to solve this problem lead me to a dead end in having to use JavaScript in association with iframes. This sucks….its gonna be a lot of work!

Then one last google search led me to a pre built control by Nikhil that essentially wraps up all these things into a nicely packaged .NET control:

http://weblogs.asp.net/scottgu/archive/2006/09/14/Tip_2F00_Trick_3A00_-Enabling-Back_2F00_Forward_2D00_Button-Support-for-ASP.NET-AJAX-UpdatePanel.aspx

screenshotThis control was great and provided the exact solution I was looking for. I implemented and used this solution for some time. Eventually it was adopted into the .NET 3.5 SP1 framework as part of the ScriptManager. If you know how to use it, it can be quite easy and very powerful. Here is a quick start example:

Download Back Button Code Example

I have created a short example showing the base usage. This component is quite simple, but works fantastically. First begin by throwing your script manager and update panel onthe page. On your script manager add the property to “EnableHistory=true”.  As well you can give the the method name that should be executed when the back button is pressed: “OnNavigate=SManager_Navigate”.

markup

Once that is done, you have two key things to do:

 First, you must write code to store history points. When using AJAX requests you don’t want execute the previous request everytime someone hits the back button (that could be a mess if you have a lot of smaller requests). So you must explicitly add the history points were you want them. To do so you pass in any information (in a key value format – as a string) that is required to rehydrate a given ajax request.

ChangeView_Code

Secondly, you must write the method contents of the “SManager_Navigate” (or whatever you called the method), to grab the varaibles from the state (one of the arguments from the method) –  which is the same variables you provided when adding the history point, and use the contents to rehydrate the state.

Navigate_Code

And thats it. It works like a charm. This concept is especially useful if your in a Parent Child scenario where you can write and hydrate history points in one code location. You may also notice in the markup the use of “EnableSecureHistoryState”. Since the use of this component stores information in the querystring, which could be potentially sensitive data, you can able encryption with this property so that the querystring is not readable until decrypted by the web app.

This solution also allows your AJAX application to support bookmarking for dynamic content without much more work.

2 Comments

  1. asp.net, c#,javascript…

    […]Back Button Support for ASP.NET AJAX « Travis J. Gosselin[…]…

  2. I believe other website owners should take this website as an model, very clean and fantastic user genial pattern .