Maintain Page State on Browser’s Back Button Click

Broswer-Back
Broswer-Back

Maintain Page State on Browser’s Back Button Click

Welcome to CodeSpread!

This is a very common requirement and a major expectation for a quality user experience.

Scenario:

User visits a site which heavily uses AJAX. Here, AJAX will not let the user navigate from the page, How? For each user request, AJAX page will interact with server asynchronously and there will NOT be any full Postback. So far, this provides a very lovely user experience.

Now, if user clicks the Back button of the browser, then the expected behavior is to move the application to its last state but it usually not happens. What really happens is that browser returns to the  previous page, not to the previous state of the current page

Solutions Available:

Think logically, If the same page fires multiple requests to achieve different states on the same page and these different states can be bookmarked by the browser then it would be quite easy to navigate between the state. We just need to control the navigation between states by tying them up with browser’s back and forward button.

These bookmarks are referred to as history points.

This solution can be achieved in two ways in .Net 4.0

1) Using ASP.NET Server Controls

ScriptManager and ScriptManagerProxy server controls are used to set history points.History state is managed in a query string marked with the “#” character.

For example:

http://codespread.com/article.aspx#state=2
  • To create a browser history point, ScriptManager control has a method AddHistoryPoint.
  • This method can be used to define server state and keys, and optional data to represent history point.
  • Client code in the Web page detects that the URL contains history state data and raises Navigate event of the ScriptManager and ScriptManagerProxy server controls.
  • This event can handled to move the application to previous state as per the parameter values passed.
  • There is an additional property called IsNavigating . If this property is set to true, the postback is determined to be originated as a navigation call.

2) Using Client Script

  • To create a browser history point, client has Sys.Application.addHistoryPoint method.
  • This method can be used to define server state and keys, and optional data to represent history point.
  • Client code in the Web page detects that the URL contains history state data and raises the client Sys.Application.navigate event.
  • This event can handled to move the application to previous state as per the parameter values passed.

Prerequisites

  • Enable history declaratively through the ScriptManager control.
&lt;asp:<span class="hiddenSpellError">scriptmanager id=""ScriptManager1"" enablehistory=""true"" runat=""server"" /&gt;

Conclusion

Developers and Designers always try to cover the extra mile to provide a better user experience and this tool provides a sigh of relief to them. Sigh!

Author: hershey

A passion for knowledge drives me to do programming, A passion for programming drives me to create something different, A passion for creation drives me to spread the knowledge.

Share This Post On

0 Comments

  1. nice superb explaination

    Post a Reply
  2. thanks for the tutorial
    I am having a problem.
    The feature “Create SQL server database” isn’t available , I can’t select it.
    Can you help, please ?

    Post a Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

More from CodeSpread:

  • ASP.NET : Stick to the ContextASP.NET : Stick to the ContextWhat we are talking about? We are talking about HttpContext Class. It is a part of System.Web namespace/assembly and is usually referred by, [code] System.Object System.Web.HttpContext [...
  • 19 Dec: Must Read Codes [1-5]19 Dec: Must Read Codes [1-5]We are sharing few must read codes/concepts which are required now and then. Each of these codereads doesn't require a full length descriptive article so combining them into groups of five. CodeRe...
  • Custom error mode in ASP.NET web.configCustom error mode in ASP.NET web.config Dual Roles As a developer, I would love to see the error page that provides details of the error, status code and also the stack information. This information is useful to debug the application ...
  • How to create a MVC 2 Project in VS2010?How to create a MVC 2 Project in VS2010?How to create a MVC 2 Project in VS2010? 1. Open VS2010. 2. Select File -> New Project. 3. Select Visual C# -> Web -> ASP.NET MVC 2 Empty Web Application. Name it as MyMvcApplicat...
  • When ViewState is loaded?When ViewState is loaded?We know asp.net page life cycle and on subsequent request, each stage of life cycle is analyzed to find out, as and when viewstate is available for use.
  • Don’t Mess with App_OfflineDon’t Mess with App_OfflineOne of the most useful features of ASP.NET is the "App_Offline.htm" . It provides a much easy way to make the ASP.NET application offline while we do our modifications on the site. How we do it? ...
  • Error Handling at Page level or Application levelError Handling at Page level or Application levelA regular query of a developer as which is the best way to handle errors? at Page level or Application level. Best answer is why to chose one over the other? Lets have both. We will try some sam...
  • C#: My experience with const keywordC#: My experience with const keywordThere are numerous post on internet about 'what is const keyword in .net' or 'what is the difference between const keyword and read only' and I must say many might have already mugged it up like me...