Hands-on Navigation for ASP.NET Web Forms: Part 3

• Download source code - 67.3 KB

Introduction

The Open Source Navigation for ASP.NET Web Forms project, located at http://navigation.codeplex.com, generates a context-sensitive crumb trail. This provides links (crumbs) that allow a user to navigate back to previously visited pages whilst retaining their data.

However, there may be pages a user should not be permitted to revisit, e.g., with a navigation resulting from the press of a Delete button, it is undesirable to provide a link back to the deleted item. So this article illustrates how to skip a crumb from the generated crumb trail.

Background

Navigation for ASP.NET Web Forms is an Open Source project, located at http://navigation.codeplex.com, that handles navigation and data passing between ASPX pages. This article goes straight into using this framework without explaining it, and so assumes a familiarity with the project's documentation.

Using the code

This article walks through the creation of three pages containing buttons that navigate forward through them and crumb trail links that navigate backward through them. The sample code is written in VS 2008, although the Navigation for ASP.NET Web Forms project works in VS 2005 or later - the relevant binary for the version of the .NET Framework in use can be downloaded from http://navigation.codeplex.com.

Start by creating a new Web Site called CrumbSkipNavigation, and set it up to use the Navigation for ASP.NET Web Forms framework by registering the StateAdapter class as an adapter for the Page control (see the Getting Started section of http://navigation.codeplex.com/documentation).

Next, the dialogs, states, and transitions that make up the state information configuration must be defined. There are three states, one for each page, and a transition from Page1 to Page2, and another from Page2 to Page3, so the pages can be visited in turn.

<dialog key="CrumbSkip" initial="Page1" path="~/Page1.aspx">
    <state key="Page1" page="~/Page1.aspx" title="Page 1">
        <transition key="Next" to="Page2"/>
    </state>
    <state key="Page2" page="~/Page2.aspx" title="Page 2">
        <transition key="Next" to="Page3"/>
    </state>
    <state key="Page3" page="~/Page3.aspx" title="Page 3">
    </state>
</dialog> 

To the Web Site, add pages called Page1.aspx, Page2.aspx, and Page3.aspx. To Page1.aspx and Page2.aspx, add a FormView bound to a NavigationDataSource (see the Data Binding section of http://navigation.codeplex.com/documentation) and containing an Update button. The code is shown below:

<asp:FormView ID="FormView1" runat="server" 
         DataSourceID="NavigationDataSource1" DefaultMode="Edit">
    <EditItemTemplate>
        <asp:Button ID="Button1" runat="server" 
            Text="Next" CommandName="Update"/>
    </EditItemTemplate>
</asp:FormView>
<cc1:NavigationDataSource ID="NavigationDataSource1" runat="server">
</cc1:NavigationDataSource>

To navigate between the pages along the transitions, add ItemUpdated listeners to the FormView controls in Page1.aspx and Page2.apsx, with the code shown below:

protected void FormView1_ItemUpdated(object sender, FormViewUpdatedEventArgs e)
{
    StateController.Navigate("Next");
}

Setting Page1.aspx as the start page and pressing F5 will allow forward navigation through these pages by pressing the Next buttons. In order to provide backward navigation to Page2.aspx and Page3.aspx, add a ListView control bound to a CrumbTrailDataSource (see the Data Binding section of http://navigation.codeplex.com/documentation). The code is shown below:

<asp:ListView ID="ListView1" runat="server" 
        DataSourceID="CrumbTrailDataSource1" 
        ItemPlaceholderID="PlaceHolder1">
    <LayoutTemplate>
        <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
    </LayoutTemplate>
    <ItemTemplate>
        <asp:HyperLink ID="HyperLink1" runat="server" 
           Text='<%# Eval("Title") %>' 
           NavigateUrl='<%# Eval("NavigationLink") %>'></asp:HyperLink>
    </ItemTemplate>
</asp:ListView>
<cc1:CrumbTrailDataSource ID="CrumbTrailDataSource1" runat="server">
</cc1:CrumbTrailDataSource>

This time, pressing F5 will allow forward navigation through the pages via the Next buttons, and backward navigation via the crumb trail links.

Page3 has two crumb trail links, one back to Page2 and the other back to Page1. The remainder of this article will demonstrate how to remove the crumb trail link back to Page2. To the NavigationDataSource control in Page1, add an UpdateParameter called 'show' with a value of true, as shown below:

<cc1:NavigationDataSource ID="NavigationDataSource1" runat="server">
    <UpdateParameters>
        <cc1:NavigationDataParameter Name="show" 
            DefaultValue="true" DbType="Boolean"/>
    </UpdateParameters>
</cc1:NavigationDataSource>

When clicking the Next vutton on Page1, the 'show' item will be persisted to StateContext data with a value of true. To the NavigationDataSource control in Page2, add the same UpdateParameter as above, except set it to false, as shown below:

<cc1:NavigationDataSource ID="NavigationDataSource1" runat="server">
    <UpdateParameters>
        <cc1:NavigationDataParameter Name="show" 
           DefaultValue="false" DbType="Boolean"/>
    </UpdateParameters>
</cc1:NavigationDataSource>

Pressing F5 will show no change to the crumb trail links on Page3. In order to skip the crumb trail link back to Page2, on Page3.aspx, bind the Visible property of the crumb trail hyperlink to the 'show' crumb trail data item, as shown below:

<asp:HyperLink ID="HyperLink1" runat="server" 
    Text='<%# Eval("Title") %>' NavigateUrl='<%# Eval("NavigationLink") %>' 
    Visible='<%# Eval("[show]") %>'></asp:HyperLink>

This time, pressing F5 will show only one crumb trail link on Page3 back to Page1, so the Page2 crumb has been successfully skipped.