ASP.NET 3.5 Extensions Preview - AJAX History Management

• Download ASPAjaxHistory - 3.96 KB
• Download ASPAjaxHistory-Extra.zip - 7.55 KB

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.

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.

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

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

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.

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

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

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.