THE PROBLEM
We all know that when a user navigates through a website, each page s/he visits is logged by the browser in their history. An inherent problem with an Ajaxified application is browser navigation, as AJAX pages don’t postback while making request,they cant remember their previous states. The problem that arises here is that when a user clicks the browser’s back button s/he is returned to the previous page.
Technically this behaviour is OK but to make our page more user friendly we need to tackle this problem.
THE SOLUTION
ASP.NET provides a very simple solution to tackle this problem, i.e. ASP.NET AJAX History Feature(the history feature become a part of AJAX Framework in ASP.NET 3.5, SP1). The history feature allows a page developer to create states in the life cycle of an Ajax enabled web page, once defined these states are accessible from browser’s back button. This feature is included as a property in script manager which is a part of Ajax extensions in ASP.NET we have to set its value to true in order to make it functional.
For Example:
We as developers have to decide what actions are cause for a history point to be created.These actions can be Client side actions like clicking on an HTML button or any server side action.
Then we have to add these as a history points.For Example:
ScriptManager1.AddHistoryPoint("value", YourValue, StateTitle); // Code behind part
This AddHistoryPoint()method takes two string parameter “Key & Value pair” key is used to separate a history point from other it can also hold an optional third string parameter i.e title of state.
Finally we need to create an Event handler for the script manager’s Navigate event.This event fires when user clicks the browser’s back button.This Event handler is responsible for restoring the history state.
For Reference I am including an example in which I have used 4 link buttons and a label on the click of each button the text of label changes.
The aspx part
LinkButton LinkButton LinkButton LinkButton
Code behind Part
protected void Page_Load(object sender, EventArgs e)
{
}
protected void LinkButton1_Click(object sender, EventArgs e)
{
Label1.Text = "first";
ScriptManager1.AddHistoryPoint("value", Label1.Text); // Adding history points
}
protected void LinkButton2_Click(object sender, EventArgs e)
{
Label1.Text = "second";
ScriptManager1.AddHistoryPoint("value", Label1.Text);
}
protected void LinkButton3_Click(object sender, EventArgs e)
{
Label1.Text = "third";
ScriptManager1.AddHistoryPoint("value", Label1.Text);
}
protected void LinkButton4_Click(object sender, EventArgs e)
{
Label1.Text = "fourth";
ScriptManager1.AddHistoryPoint("value", Label1.Text);
}
protected void ScriptManager1_Navigate(object sender, HistoryEventArgs e) // Event handler for restoring state
{
Label1.Text = e.State["value"];
}
First try to run this code by setting script manager EnableHistory=”false” and Commenting all the Lines where a history point is added and also the ScriptManager1_Navigate Method and observe the browsers back button is disabled and then set EnableHistory=”true” and uncomment all the commented lines and observe the back button is functioning properly. Observe the change in url, it contain a long value followed by a “#” if EnableSecureHistoryState is set to true actually this is the hash value of the state encoded due to security reason if EnableSecureHistoryState is set to false then you will observe the actual value of the state.
NB: if script manager is included in master page then add a scriptmanagerproxy to your page for adding history points do something like this
ScriptManager.GetCurrent(this.Page).AddHistoryPoint("value", YourValue);
add the event handler part in ScriptManagerProxy Navigate Event.