May 07

The May bits have a new control which you can use to integrate the Back and Forward buttons in your AJAX pages. Using the control is really simple: you just need to save current state during a partial postback and then handle the Navigate event which is fired by the History control in response to a click on the back or forward button. Here”s a demo page:

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default2.aspx.cs”
               Inherits=”Default2″ %>
<%@ Register Assembly=”System.Web.Extensions, Version=, Culture=neutral,
                                       Namespace=”System.Web.UI” TagPrefix=”asp” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”>

<html xmlns=”” >
  <head runat=”server”>
       <title>Untitled Page</title>
   <form id=”form1″ runat=”server”>
     <asp:ScriptManager id=”ScriptManager1″ runat=”server” />
     <asp:UpdatePanel id=”UpdatePanel1″ runat=”server”>
                <asp:TextBox id=”TextBox1″ runat=”server” />
                <asp:Button id=”Button1″ runat=”server” Text=”Guardar” OnClick=”Button1_Click” />
      <asp:History ID=”History1″ runat=”server” OnNavigate=”OnNavigate” />
       <%=DateTime.Now.ToString() %>

And the codebehind file:

public partial class Default2 : System.Web.UI.Page
     protected void Button1_Click(object sender, EventArgs e)
          History1.AddHistoryPoint(DateTime.Now.ToString(), TextBox1.Text);
      protected void OnNavigate(object sender,
                        Microsoft.Web.Preview.UI.Controls.HistoryEventArgs args)
          IEnumerator myEnum = args.State.Values.GetEnumerator();
          TextBox1.Text = myEnum.Current.ToString();

And it just works :,,)

In the previous sample, each time the user clicks on the button, I add a new entry to the History control. Since i always wanted to add a new entry, I”ve limited myself to getting the current time and converting it to a string. Note that the current bits do let you change an existing entry (which is what happens when you call AddHistoryPoint and pass an existing key).

The OnNavigate event will be raised when the user clicks on the next or forward browser”s buttons. When that happens, you”ll receive a dictionary with only one entry: the correct key/value pair for the action specified by the user (well, this works in most cases, letting you even choose an item from the navigation list – do note that it doesn”t work for the 1st item on the list and if you choose that item, you”ll get an exception. Something that I expect to be solved on the next releases!).

And that”s all you need to know to use the control from an ASP.NET AJAX page.

But how does it work? well, basically, you”ll get a client object inserted on the page (_History class) that is responsible for performing some actions in response to some events. In IE, a hidden iframe is used to let you keep the “navigation list” (which really isn”t more than a list of states returned from the server side). This isn”t needed on firefox, where the window.location.hash is more than enough for adding the necessary entry to enable the back and forward buttons.

btw, if you have used Nikhil”s HistoryControl, then you should be right at home with this new control (even though I”ve just taken a quick glance at Nikhil”s control page, I”d say that the History control is just a newer (?) version of it).

Oh, and if you”re really into Javascript, then do take a look at this article (it”ll provide the basics for understanding how you can solve the back/forward button problem).

2 comments so far

  1. josh
    3:19 am - 8-7-2007

    I noticed Nikhil”s does not leave the address bar looking so ugly/scary , will microsoft address this?
    Cause if they dont I”m to horrified to use it.

  2. wnzqlctm
    6:15 pm - 1-26-2010

    11yxnz ssuonxqdoirv, [url=]bpmrcoonhjlr[/url], [link=]gxqvtczhvwds[/link],