Maintaining browser history in ASP.NET AJAX

Introduction

When we usually work with ASP.NET AJAX, we feel the lack of history in the browser (browser back and forward button doesn't work) when we perform any asynchronous operation. In this article, I am going to show how to maintain the browser history while performing ASP.NET AJAX asynchronous postback operation.

This is done by setting a property and specifying an event in the ScriptManager control.

Browser history created using ScriptManager control

I have written hundreds of .NET How to's solution (ebook + source code + video) series based on real time project problems, click here to get it.

Let's create an ASP.NET AJAX page that maintain the browser history

My sample page looks like below where I have a text box in which I write the step number and click on "Go to Next" button.

My source code of the .aspx page looks like below.

<form id="form1" runat="server">
<p>Write the number of step 1 to 4, click button. Now see the browser history.</p>
<div>
<asp:ScriptManager runat="server" ID="SM1" EnableHistory="true" OnNavigate="SM_Navigating" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Write Step: " />
<asp:TextBox ID="txtBox1" runat="server" /><br />
<asp:Button ID="btnSubmit" runat="server" Text="Go to Next" OnClick="SubmitData" />
 
<p><asp:Label ID="lblResult" runat="server" /></p>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>

In order to maintain the browser history, we need to set EnableHistory property of ScriptManager to true and specify the hanlder on OnNavigate event, I have specified the handler event name as "SM_Navigating" that fires when the end user try to navigate the page from browser history. On click on the "Go to Next", I have fired a server side method called SubmitData.

Now, let's see the code-behind of the above .aspx page

public partial class Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
 
protected void SubmitData(object sender, EventArgs e)
{
DoTheAjaxWork(txtBox1.Text);
}
 
private void DoTheAjaxWork(string step)
{
if (SM1.IsInAsyncPostBack && !SM1.IsNavigating)
{
// perform all your real work here and add the history point
 
SM1.AddHistoryPoint("historyPoint", step, "Step " + step);
}
else
{
txtBox1.Text = step;
this.Title = "Step " + step;
}
}
 
protected void SM_Navigating(object sender, HistoryEventArgs e)
{
string state = e.State["historyPoint"];
if (!string.IsNullOrEmpty(state))
{
DoTheAjaxWork(e.State["historyPoint"]);
}
}
}

The SubmitData method simply calls another private method called DoTheAjaxWork by passing the textbox value. In the DoTheAjaxWork method the real work related with maintaining the browser history is performed.

In the DoTheAjaxWork method, I have a condition that checks if the request is an Async postback and user is not navigating the page from browser then Add the history point using AddHistoryPoint method in ScriptManager. In this method I have passed 1st parameter as the key name (that will be used later on in the OnNavigate event), the 2nd parameter is the value of that key and the 3rd parameter is the title that appears in the history dropdown of the browser.

The SM_Navigating method that is attached with the OnNavigate event retrieves the current state of the browser by retrieving the value from the State object, if this value is not null then I am again calling the DoTheAjaxWork method that will set the necessary browser title and value to the textbox.

If you have followed the above procedure of creating this ASP.NET AJAX page, you should be ready to run this page. Press F5 and try to enter 1 in the textbox and click button; you will notice that a browser history is created. Now enter 2 in the textbox and click button and so on ( I have entered from 1 to 4 in the textbox so I will have 4 steps in the browser history). Once I am done till 4, my browser history dropdown looks like below image.

Notice that all the steps I have performed is stored in the browser. Now I can either click on the steps from the dropdown or click browser back and forward button to navigate through the history of the browser. 

You may notice that when you click back and forward button of the browser, some hashed string is attached to the url of the page, that hashsed do the magic of maintaining and bringing correct state of the page. By default this is hashed for security purpose, if you want your url to be neat and clean you can set EnableSecureHistoryState property of the ScriptManager to false and you will see a neat and clean url.

Conclusion

In this article, we learnt how to maintain the browser history when performing asynchornous operation in ASP.NET AJAX by using ScriptManager server control.

Hope you enjoyed this article, let me know if you have any comment or feedback.

Thanks for reading and keep reading!

Reference

http://www.asp.net/aspnet-in-net-35-sp1/videos/introduction-to-aspnet-ajax-history