Click here to Skip to main content
Click here to Skip to main content

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

Introduction

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 http://quickstarts.asp.net/3-5-extensions/ and here http://www.asp.net/downloads/3.5-extensions/

Background

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 http://www.microsoft.com/downloads/details.aspx?FamilyId=A9C6BC06-B894-4B11-8300-35BD2F8FC908&displaylang=en

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 Increment After you click Increment
Postback - Before click Postback - 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" />
   <div>
      <asp:UpdatePanel ID="UpdatePanel1" runat="server">
         <ContentTemplate>
            <asp:Label ID="lblValue" runat="server"></asp:Label>
            <br />
            <asp:Button ID="btnIncrement" runat="server" onclick="btnIncrement_Click" Text="Increment" />
         </ContentTemplate>
      </asp:UpdatePanel>
   </div>
</form>

Now, run the application and notice what happens

Before you click Increment After you click Increment
UpdatePanel - Before UpdatePanel - 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

Conclusion

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.

License

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

Comments and Discussions

 
NewsAJAX History is now in Service Pack PinmemberMina Shawky12-May-08 20:01 
QuestionAnd when changing page? PinmembersaverioM1-May-08 4:17 
AnswerRe: And when changing page? PinmemberMina Shawky2-May-08 10:34 
GeneralRe: And when changing page? PinmembersaverioM6-May-08 4:19 
GeneralRe: And when changing page? PinmemberMina Shawky6-May-08 4:46 
GeneralRe: And when changing page? PinmembersaverioM6-May-08 6:56 
AnswerRe: And when changing page? Pinmemberchinh8013-Jun-08 6:07 
AnswerRe: And when changing page? PinmemberMina Shawky13-Jun-08 6:29 
GeneralRe: And when changing page? PinmemberMartin-026-Sep-08 3:48 
QuestionRe: And when changing page? PinmemberIain James Wyper9-Feb-10 21:41 
QuestionAnd HyperLinks ? Pinmemberrichamo18-Apr-08 6:22 
AnswerSorry it's working... but.... Pinmemberrichamo21-Apr-08 6:27 
GeneralRe: Sorry it's working... but.... PinmemberMina Shawky21-Apr-08 21:30 
QuestionNavigate event not fired PinmemberBill3616-Apr-08 15:07 
AnswerRe: Navigate event not fired PinmemberMina Shawky16-Apr-08 23:15 
GeneralRe: Navigate event not fired PinmemberBill3619-Apr-08 8:00 
GeneralRe: Navigate event not fired PinmemberMina Shawky20-Apr-08 22:40 
GeneralRe: Navigate event not fired PinmemberBill3621-Apr-08 8:37 
GeneralRe: Navigate event not fired [modified] PinmemberMarian Negru29-Jul-08 21:09 
QuestionScriptManager in master page Pinmemberalexgoodbox10-Apr-08 17:49 
AnswerRe: ScriptManager in master page [modified] PinmemberMina Shawky10-Apr-08 21:12 
GeneralThis is a good example. PinmemberDimitar Madjarov10-Apr-08 2:49 
GeneralRe: This is a good example. PinmemberMina Shawky10-Apr-08 2:54 
GeneralGood article PinmemberBernhard Elbl10-Apr-08 0:49 
GeneralRe: Good article PinmemberMina Shawky10-Apr-08 0:57 

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

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

| Advertise | Privacy | Mobile
Web04 | 2.8.140709.1 | Last Updated 17 Apr 2008
Article Copyright 2008 by Mina Shawky
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid