Here describing a new features introduced as a part of asp.net Ajax 3.5 SP1. With introduction of this feature, we are getting out of a long lasting problem which has been there from the beginning of AJAX. Whenever you are doing a post back using an update panel i.e. asynch postback, your browser back button is not enabled. Technically speaking, asynch postbacks were not registering to browser history. So user can't visit the previous page state using back button. Back button always navigate the user to the synch post states i.e. postbacks happened not using AJAX. Here I have explained how this to tackle this in latest version.
The issue mentioned above is tackled using a terminology, Ajax history.
Like its name reveals it's enabling the history during Ajax post backs. The source code attached here contains 2 sections, one for Ajax history and anther for without Ajax history. Once you download the source code and run the application, you will get a screen like below.
Just notice the 2 sections I mentioned. Both using same controls and once you select a value from the dropdown, the selected text will be displayed on its left side. So you will select various items of the dropdown list. Then try to use back button for seeing previous selected value. Below describing the result you would, on trying with both sections.
AJAX HISTORY DISABLED CONTOLS SECTION
1. You selected "One" from the dropdown list of Ajax history disabled section and the selected text will be displayed on left side
2. Now you selected second item "two" and value again displayed on left side
Once you check the code behind file, Default.aspx.cs, I am handling all these activities in code behind to fire the post back. All control is residing under udatepanel. So asynch post back is firing. But once you check the browser back button after above mentioned activities, it hasn't enabled even though post back fired by your dropdown selection. So what you will do to go to previous age state?
I think now you got the issue I am talking about. Just try the same scenario in 2nd section
AJAX HISTORY ENABLED CONTOLS SECTION
1. Do the same dropdown selections for this section too and check the back button status
2. You will get back button enabled like below screen shot.
3. Now click the back button. You will get screen with what you expected in side Ajax history enabled controls section. i.e. dropdownlist with a selected item of "One". Also notice that Ajax history disabled section hasn't changed anything.
Now you got idea about where we can use this new feature with this very simple example. Let's go through technical side that how we are doing this. Following are the steps.
1. Set the EnableHistory="true"> inside ScriptManager. This is a mandatory setting.
2. You need to write the page flow to Ajax history once you think, that flow needs to be revisited using back button. This writing is doing with a method AddHistoryPoint, like here, AddHistoryPoint("Index", index.ToString());. Writing are in key value format. You can see in downloaded code I am calling this method inside "OnSelectedItemChanged" event handler of dropdown list, which is under Ajax history enabled section. I am just storing the selected index value to Ajax history. This action making your back button enabled. Now only pending thing is that handling the back button click.
protected void
cacheDropDownList_SelectedIndexChanged(object
sender, EventArgs e)
{
int index = cacheDropDownList.SelectedIndex;
ScriptManager.GetCurrent(Page).AddHistoryPoint("Index", index.ToString());
SetCacheLabel(index);
}
3. The values stored in Ajax history need to be restored, when somebody clicked back button. How we will identify the back button click? We have one event, Navigate, in ScriptManager which will be fired for back button click. I added an event handler for this. Also inside this handler, I am retaining the values from Ajax history.
protected override void OnInit(EventArgs
e)
{
ScriptManager.GetCurrent(Page).Navigate
+= new EventHandler<HistoryEventArgs>(_Default_Navigate);
base.OnInit(e);
}
void _Default_Navigate(object
sender, HistoryEventArgs e)
{
string index = e.State["Index"];
if (!string.IsNullOrEmpty(index))
{
SetCacheLabel(int.Parse(index));
}
}
Who ever got idea about Ajax history should also try the same scenario in JavaScript side too. i.e. we have Sys.Application.addHistoryPoint for writing to Ajax history. This is normally known as client side history and what we saw already is server side history. I am assigning to you to implement the same example using JavaScript and its corresponding functions.