Enabling History Within UpdatePanels

Overview

UpdatePanels allow your application to smoothly respond to user interaction by changing the state of the screen. For instance in the Grid-Edit pattern a single page switches from a grid of items to a single item edit without a full page re-load. One side-effect of this pattern though is that the browser's back button does not work as the user intends. When the user clicks on a grid row and reaches the edit screen they expect pressing the back button to take them back to the grid. Instead it takes them to the previous page.

Using the steps below you can enable proper history navigation in your blocks.

Implementation Details

Follow the steps below to add history navigation to your blocks that use UpdatePanels to change their state.

1. When you switch states in an UpdatePanel post-back, say from view to edit, note the state change in the ScriptManger's history using the code below:

    this.AddHistory("state-index", "state-data", "state-title");

Where:
* state-index: An index key to denote the state
* state-data: A string of data that will be passed back to you on the state change.  This is often used in wizard like applications to pass back to you the state index of the wizard.
* state-title: This string will become the page's title in the browser.

2. After adding the history events you will need to wire-up an event listener to respond to navigation changes. Do this will the following code:

RockPage page = Page as RockPage;
if (page != null)
{
    page.PageNavigate += page_PageNavigate;
}

3. Finally, add your logic on navigate events:

void page_PageNavigate(object sender, HistoryEventArgs e)
{
    string stateData = e.State["state-index"];
    // add your logic
}