Click here to Skip to main content
14,022,666 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


25 bookmarked
Posted 9 Apr 2008
Licenced CPOL

ASP.NET 3.5 Extensions Preview - AJAX History Management

, 16 Apr 2008
Rate this:
Please Sign up or sign in to vote.
Storing ajax history points and navigating using the browser's back and forward buttons


ASP.NET 3.5 Extensions Preview is now gaining more attention and a lot of articles are being submitted in order to discuss different enhancements and new additions to the ASP.NET API. One of the very good enhancements has to be with the ASP.NET AJAX and the ability to manage and record the history of AJAX events into the browser's history log.

You can check more on the ASP.NET 3.5 Extensions preview and all the new stuff here and here


Before the Extensions, developers spent tremendous amount of time to enable the browser to log the history of AJAX events, and to navigate these events using the browser's own back and forward button, and most probably failed to deliver this requirement.

But now, with the extensions, you can implement this functionality with a very few lines of code. This article will show you how.

ASP.NET 3.5 Extensions Preview

First of all you need to download the ASP.NET 3.5 Extensions Preview on you machine from here

After you successfully install the extensions, you will find many new project templates and controls added to you Visual Studio 2008 IDE...

Managing AJAX History

Start by opening your Visual Studio 2008 instance and create a new ASP.NET 3.5 Extensions website.

ASP.NET 3.5 Extensions new project templates

Notice the range of new controls that are added with the extensions, but for the scope of the article we will not use any of them.

New controls Toolbar

Start by adding a label and a button and call them "lblValue" and "btnIncrement" respectively.

Double click the button to handle the Click event. Copy and paste this code below

protected void btnIncrement_Click(object sender, EventArgs e)
    lblValue.Text = string.IsNullOrEmpty(lblValue.Text) ? "0": (Convert.ToInt32(lblValue.Text) + 1).ToString();

Basically when you run the web site and click the "Increment" button, the value of the label will be incremented. But I need you to notice something on the browser

Before you click IncrementAfter you click Increment
Postback - Before clickPostback - After click

Notice that when you click on the Increment button, the browser will keep track of you event, and whenever you click the browser's Back button, you will return to the previous state... Also notice that whenever you click the Increment button, the whole page will post back (which is not a good thing in terms of usability)

So, to make the page more usable, you should add an Update Panel and insert both the label and the button inside the panel like this.

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
      <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <asp:Label ID="lblValue" runat="server"></asp:Label>
            <br />
            <asp:Button ID="btnIncrement" runat="server" onclick="btnIncrement_Click" Text="Increment" />

Now, run the application and notice what happens

Before you click IncrementAfter you click Increment
UpdatePanel - BeforeUpdatePanel - After

The browser did not recognize what happened, as the event was fired asynchronously in the background without posting back the whole page.

So how can we fix this problem?

ASP.NET Extensions Preview provides us with an API for handling AJAX events and updating the browser history at the same time in two steps.

Step one, we need to handle the event that changes the state of the application (in our case the button Click event) and create a history point with every new change.

Step two, we need to handle the Browser navigation events, so when the user clicks the back or forward buttons the application will restore the latest history point.

Step 1

Inside the button's Click event handler we need to check this condition

if(ScriptManager1.IsInAsynchPostBack && !ScriptManager1.IsNavigating)
   ScriptManager1.AddHistoryPoint("index", lblValue.Text, string.Format("Step {0}", lblValue.Text));

This check is to ensure that

  1. We are in an Asynchronous Post Back
  2. This post back is not the result of the user clicking the browser's back or forward buttons

The AddHistoryPoint method takes three parameters (it also has 2 other overloads)

  • A Key: where you can store different keys for different AJAX parts in your page (i.e., if you have another AJAX panel that you need to store the history of events for, you can use another key so that they won't overlap)
  • The State: where you will store the value of the current history point (in our case the value of the label)
  • Title: A title that will appear in the browser's back and forward buttons

After you add this code, go back to the .aspx page, and add the EnableHistory property to your ScriptManager1 tag. Set it to true

<asp:ScriptManager ID="ScriptManager1" EnableHistory="true" runat="server" />

Step 2

We need to handle the browser navigation. To do so, add a handler to the Navigate event of the ScriptManager1 control.

Navigation event handler

This event is raised when the user clicks the back, or forward, button of the browser.

Next thing is to get the value of the new history point state and store it to the label.

protected boid ScriptManager1_Navigate(object sender, HistoryEventArgs e)
   lblValue.Text = e.State["index"];

Now notice the difference when you run the application

Solution 1

You can now use the browser's back and forward button in navigating with your application.

Solution 2


To wrap up this article, ASP.NET Extenstion Preview provides us with several new functionalities and enhancements and one of them is the ability for the developer to log AJAX events as history points and manage the browser's Navigation to restore these events.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Mina Shawky
Software Developer Link Development
Egypt Egypt
No Biography provided

You may also be interested in...

Comments and Discussions

NewsAJAX History is now in Service Pack Pin
Mina Shawky12-May-08 20:01
memberMina Shawky12-May-08 20:01 
QuestionAnd when changing page? Pin
saverioM1-May-08 4:17
membersaverioM1-May-08 4:17 
AnswerRe: And when changing page? Pin
Mina Shawky2-May-08 10:34
memberMina Shawky2-May-08 10:34 
GeneralRe: And when changing page? Pin
saverioM6-May-08 4:19
membersaverioM6-May-08 4:19 
GeneralRe: And when changing page? Pin
Mina Shawky6-May-08 4:46
memberMina Shawky6-May-08 4:46 
GeneralRe: And when changing page? Pin
saverioM6-May-08 6:56
membersaverioM6-May-08 6:56 
AnswerRe: And when changing page? Pin
cphan8013-Jun-08 6:07
membercphan8013-Jun-08 6:07 
AnswerRe: And when changing page? Pin
Mina Shawky13-Jun-08 6:29
memberMina Shawky13-Jun-08 6:29 
GeneralRe: And when changing page? Pin
Martin-026-Sep-08 3:48
memberMartin-026-Sep-08 3:48 
QuestionRe: And when changing page? Pin
Blawbag9-Feb-10 21:41
memberBlawbag9-Feb-10 21:41 
QuestionAnd HyperLinks ? Pin
richamo18-Apr-08 6:22
memberrichamo18-Apr-08 6:22 
AnswerSorry it's working... but.... Pin
richamo21-Apr-08 6:27
memberrichamo21-Apr-08 6:27 
GeneralRe: Sorry it's working... but.... Pin
Mina Shawky21-Apr-08 21:30
memberMina Shawky21-Apr-08 21:30 
QuestionNavigate event not fired Pin
Bill3616-Apr-08 15:07
memberBill3616-Apr-08 15:07 
AnswerRe: Navigate event not fired Pin
Mina Shawky16-Apr-08 23:15
memberMina Shawky16-Apr-08 23:15 
GeneralRe: Navigate event not fired Pin
Bill3619-Apr-08 8:00
memberBill3619-Apr-08 8:00 
GeneralRe: Navigate event not fired Pin
Mina Shawky20-Apr-08 22:40
memberMina Shawky20-Apr-08 22:40 
GeneralRe: Navigate event not fired Pin
Bill3621-Apr-08 8:37
memberBill3621-Apr-08 8:37 
GeneralRe: Navigate event not fired [modified] Pin
Marian Negru29-Jul-08 21:09
memberMarian Negru29-Jul-08 21:09 
QuestionScriptManager in master page Pin
alexgoodbox10-Apr-08 17:49
memberalexgoodbox10-Apr-08 17:49 
AnswerRe: ScriptManager in master page [modified] Pin
Mina Shawky10-Apr-08 21:12
memberMina Shawky10-Apr-08 21:12 
GeneralThis is a good example. Pin
Dimitar Madjarov10-Apr-08 2:49
memberDimitar Madjarov10-Apr-08 2:49 
GeneralRe: This is a good example. Pin
Mina Shawky10-Apr-08 2:54
memberMina Shawky10-Apr-08 2:54 
GeneralGood article Pin
Bernhard Elbl10-Apr-08 0:49
memberBernhard Elbl10-Apr-08 0:49 
GeneralRe: Good article Pin
Mina Shawky10-Apr-08 0:57
memberMina Shawky10-Apr-08 0:57 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web01 | 2.8.190417.4 | Last Updated 17 Apr 2008
Article Copyright 2008 by Mina Shawky
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid