Maintaining browser history in ASP.NET AJAX

SheoNarayan
Posted by in ASP.NET AJAX category on for Advance level | Points: 250 | Views : 18454 red flag
Rating: 5 out of 5  
 2 vote(s)

In this article, I am going to show how to maintain browser history in ASP.NET AJAX page while performing asynchronous postback (partial postback).


 Download source code for 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

Page copy protected against web site content infringement by Copyscape

About the Author

SheoNarayan
Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan http://www.dotnetfunda.com
http://www.snarayan.com
Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan

Login to vote for this post.

Comments or Responses

Posted by: Chvrsri on: 12/29/2010 | Points: 25
Hi Sheo,

Nice Article !!!!
Posted by: SheoNarayan on: 12/29/2010 | Points: 25
Thanks Chvsri, keep learning and sharing!

Login to post response

Comment using Facebook(Author doesn't get notification)