Screencast: how to enable server-side history management in an ASP.NET Ajax application

I've recently recorded a screencast showing how to enable server-side history management (in other words, handling the back button) in an ASP.NET Ajax application. The whole video is less than 15 minutes total and I build the whole application from scratch in there (in VB).

I hope it shows just how simple history management is made by ASP.NET Ajax and that it helps understanding the state model that it's built on.

The same video in a variety of formats and in a resolution where the code is actually readable can be found here:
http://www.asp.net/downloads/3.5-extensions/

For those people who find it difficult to cut and paste code from a video by doing a screen capture and then using OCR over it, here's the source code of the mini-app that's being built in the video:

Default.aspx:

<asp:ScriptManager ID="ScriptManager1" runat="server" 
    EnableHistory="True" EnableStateHash="False"/>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Wizard ID="Wizard1" runat="server">
            <WizardSteps>
                <asp:WizardStep runat="server" Title="Step 1">
                    <asp:TextBox ID="TextBox1" runat="server"/>
                </asp:WizardStep>
                <asp:WizardStep runat="server" Title="Step 2">
                    <asp:TextBox ID="TextBox2" runat="server"/>
                </asp:WizardStep>
                <asp:WizardStep runat="server" Title="Step 3">
                    <asp:TextBox ID="TextBox3" runat="server"/>
                </asp:WizardStep>
            </WizardSteps>
        </asp:Wizard>
    </ContentTemplate>
</asp:UpdatePanel>

Default.aspx.vb:

Partial Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Wizard1_ActiveStepChanged(_
        ByVal sender As Object, ByVal e As System.EventArgs) _
        Handles Wizard1.ActiveStepChanged

        If ScriptManager1.IsInAsyncPostBack And _
           Not ScriptManager1.IsNavigating Then

            ScriptManager1.AddHistoryPoint("index", _
                Wizard1.ActiveStepIndex, _
                "Wizard step " & Wizard1.ActiveStepIndex)
        End If
    End Sub

    Protected Sub ScriptManager1_Navigate(_
        ByVal sender As Object, ByVal e As HistoryEventArgs) _
        Handles ScriptManager1.Navigate

        Dim indexString As String = e.State("index")
        If String.IsNullOrEmpty(indexString) Then
            Wizard1.ActiveStepIndex = 0
        Else
            Dim index As Integer = Convert.ToInt32(indexString)
            Wizard1.ActiveStepIndex = index
        End If
        Page.Title = "Wizard step " & indexString
    End Sub
End Class

http://www.asp.net/downloads/3.5-extensions/

8 Comments

  • Zahi: there is a link right under the embedded video that leads to the same video in a larger size.

  • what if the scriptmanager is in a masterpage and the wizard is in a contentpalceholder in a page that uses the masterpage. i have been having an issue with this situation. i am using ScriptManager.GetCurrent(this) in the page to get the scriptmanager in the masterpage and set the properties to enable it to support history, but when i click the back button to go all the way back to the first step of the wizard it thinks there is still one more step backwards and if i click back it throws an event validation error. how can i fix this.

  • Yes, Alex, I saw your other post on the DNS article. Please send me your code (bleroy at microsoft) and I'll look at it.

  • does the "enable history" on script manager exist in asp.net 2.0??

  • No.

  • Nice. I learned a great thing today.

    Thanx

  • So you had to manually change the active step of the wizard. What state gets restored? For example, if in one of your wizard steps you had a button that when clicked updated a label's text property. Then you go forward then clicked back, will the label's text be updated or would it have its original state before the async postback from button?

  • @Tim: you should include in the state any information that you need to rebuild the page's state. In your example, you'd probably store the fact that the button was clicked in addition to the wizard step.

Comments have been disabled for this content.