Tip/Trick: Enabling Back/Forward-Button Support for ASP.NET AJAX UpdatePanel

Nikhil recently posted a nice blog post that includes a new ASP.NET AJAX-enabled control called "HistoryControl".  When added to a page it allows developers to programmatically add logical views into a browser's history list.  This enables you to make AJAX enabled sites much more useful, and to follow the standard back/forward navigation paradigm that traditional web apps follow.

For example, the below code could be written by a developer in response to a selection change within a list to to add the previous list selection to the browser's history via Nikhil's "HistoryControl":

private void ContentList_SelectedIndexChanged(object sender, EventArgs e) {
   history.AddEntry(contentList.SelectedIndex.ToString();
}

Once you add entries into the history control, the back/forward button will be enabled in the browser.  Nikhil's history control then exposes a "Navigate" event which fires when you press the forward or back button in the browser, and this event then exposes the identifier entry provided before when the view was added into the browser history.  You can then use this to restore the page to whatever state it should be in to match the previous history item and update the page:

private void HistoryControl_Navigate(object sender, HistoryEventArgs e) {

    int selectedIndex = 0;

    if (String.IsNullOrEmpty(e.Identifier) == false) {
        selectedIndex = Int32.Parse(e.Identifier);
    }

    // Update the content being displayed in the page
    contentList.SelectedIndex = selectedIndex;

    // Mark the update panels as needing an update
    mainUpdatePanel.Update();
}

And now your end-users get forward/back button history navigation working with AJAX.  You can download the code for Nikhil's history control and start using it here.

Hope this helps,

Scott

11 Comments

Comments have been disabled for this content.