navigation Wiki Rss Feed

Updated Wiki: Getting Started

GrahamMendick — Fri, 29 Mar 2013 13:09:56 GMT

Getting Started

The most straightforward way to add the Navigation framewok to a new or existing ASP.NET Web Site or Application is to install it using NuGet by running the command Install-Package Navigation from within the Package Manager Console.

If NuGet is unavailable (prior to VS 2010) the set up can be performed manually. The first stage of this manual set up is to add reference to the Navigation.dll, which can be downloaded from http://navigation.codeplex.com/. After (unblocking and) unzipping the download the Navigation.dll should be obtained from the folder (beneath the bin folder) that corresponds to the version of .NET in use.

The next state requires the registration of the StateAdapter class as an adapter for the Page control*. The steps to follow are:

Add an App_Browsers folder – right click the Web Project and select Add ASP.NET Folder -> App_Browsers
Add a .browser file to the App_Browsers folder – right click the App_Browsers folder and select Add New Item, select Browser File and give it a name
Configure the StateAdapter class as the Page’s control adapter – paste the configuration below into the .browser file

<browsers>
	<browser refID="Default">
		<controlAdapters>
			<adapter controlType="System.Web.UI.Page" adapterType="Navigation.StateAdapter, Navigation" />
		</controlAdapters>
	</browser>
</browsers>

The final stage of the manual is to create a StateInfo.config file, which will be used in the next section to hold the details of the pages and navigation between these pages:

Add a new Text File called StateInfo.config file to the Web Project
Point the Navigation framework as this file by adding the configuration below into the Web.config file

<configuration>
	<configSections>
		<sectionGroup name="Navigation">
			<section name="StateInfo" type="Navigation.StateInfoSectionHandler, Navigation"/>
	</configSections>
	<!-- other config elided -->
	<Navigation>
		<StateInfo configSource="StateInfo.config"/>
	</Navigation>
</configuration>

There is a small difference between the NuGet and manual installations which will be covered in the Navigation Hyperlink and Data Expression section.

*In VS 2005 adding an adapter for a Page causes the XhtmlConformance setting to be ignored, for more information see http://connect.microsoft.com/VisualStudio/feedback/details/179365/using-a-page-adapter-causes-the-xhtmlconformance-mode-setting-to-be-ignored

Sample Web Site

Create a new Web Application project called NavigationSample, by selecting File -> New -> Project and the ASP.NET Empty Web Application option. Set it up to start using the Navigation framework by running the command Install-Package Navigation from within the Package Manager Console.

Updated Wiki: Progressive Enhancement

GrahamMendick — Fri, 21 Dec 2012 21:16:57 GMT

Progressive Enhancement

Progressive enhancement is a web design strategy that allows everyone to access the basic content whilst providing an enhanced experience for supporting clients.

ASP.NET Ajax is a form of progressive enhancement since, if the browser supports Ajax then partial page rendering is used, otherwise it defaults to the full page post back model. However, ASP.NET Ajax only operates on posts and so only Buttons and ImageButtons can be used (LinkButtons are not suitable for progressive enhancement as they require javascript).

The Navigation Framework does not care whether a PostBack or refresh Navigation occurred as long as the StateContext Data is the same, illustrated in the following image.

PostBack or Refresh Navigation

So the Pager, Sorter and NavigationHyperLink controls can be configured so that they render both as Hyperlinks (javascript disabled) and as javascript PostBacks, as detailed in the table below. They use a technique know as Hijax whereby they render as normal Hyperlinks but, with javascript enabled, the default behavior is hijacked and turned into a PostBack:

<a href=”URL” onclick=”doPostBack();return false”/>

Configuration for dual Hyperlink and PostBack behavior

Control	Configuration
Pager	QueryStringField must be populated and PostBackHyperLink set to true
Sorter	Navigate and PostBackHyperLink must both be true
NavigationHyperLink	Direction must be set to Refresh and PostBack to true

With javascript disabled these controls behave as Hyperlinks and so bookmarking and browser history work as usual. Also, it works seamlessly with SEO (Search Engine Optimization) as Web Crawlers can follow the Hyperlink.

With javascript enabled, these controls behave as PostBack links and so, by wrapping them inside an UpdatePanel, ASP.NET Ajax can be used to provide partial page rendering*. In the ASP.NET Ajax History section, bookmarking and browser history suppport will be added for true progressive enhancement.

Similarly to the Navigation framework's integration with DataBinding, where data bound controls automatically refresh when there is a change to their StateContext Data, there is a NavigationDataTrigger that allows UpdatePanels to do the same.

*Suggest setting ClientIDMode to Auto on Pager, Sorter and NavigationHyperLink controls when used inside an UpdatePanel, for more information see http://connectppe.microsoft.com/VisualStudio/feedback/details/596088/asp-4-0-clientidmode-predictable-causes-problems-with-updatepanel-when-using-ajax-control-toolkits-toolkitscriptmanager

Sample Web Site

Change the Pager by setting the QueryStringField and PostBackHyperLink properties as shown below.

<cc1:Pager ID="Pager1" runat="server" QueryStringField="q" PostBackHyperLink="true">
	<Fields>
		<asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" ShowLastPageButton="True" />
	</Fields>
</cc1:Pager>

Pressing F5 and clicking the paging links will cause POST requests. Turning off javascript and clicking the paging links will cause GET requests. Both provide a fully functioning back button, but only the javascript disabled scenario provides the ability to bookmark, because with javascript enabled the URL never changes when the links are clicked (this will be rectified in the ASP.NET Ajax History section).

The same can be done for the Sorter, by setting its Navigate and PostBackHyperLink properties (see below)

<cc1:Sorter ID="Sorter1" runat="server" Text="Name" SortBy="Name" Navigate="true" PostBackHyperLink="true" />

and the NavigationHyperLink, by setting its PostBack property (see below)

<cc1:NavigationHyperLink ID="HyperLink1" runat="server" Direction="Refresh" ToData="<%$ NavigationData: maximumRows?int=5 %>" Text="5" IncludeCurrentData="true" PostBack="true" />
<cc1:NavigationHyperLink ID="HyperLink2" runat="server" Direction="Refresh" ToData="<%$ NavigationData: maximumRows?int=10 %>" Text="10" IncludeCurrentData="true" PostBack="true" />

To the Listing.aspx add ASP.NET Ajax functionality by including a ScriptManager and wrap an UpdatePanel around all the controls as shown in below.

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
	<ContentTemplate>
		<asp:FormView ID="FormView1" runat="server" DataSourceID="NavigationDataSource1" DefaultMode="Edit">
		<%--other controls elided--%>
		</asp:ObjectDataSource>
	</ContentTemplate>
</asp:UpdatePanel>

Pressing F5 and filtering, sorting and paging the Person List illustrates the Ajax PartialPageRequests in action. However, the browser back button remains disabled (this will be rectified in the ASP.NET Ajax History section).

Currently the UpdatePanel is set to always Update, as would be expected with this being the only UpdatePanel on the Page. However, to show how the NavigationDataTrigger works, change the UpdateMode to Conditional and set the ChildrenAsTriggers to false as shown below.

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">

Pressing F5 and sorting, for example, will not update the Person List. To fix this, add NavigationDataTriggers, one for each piece of StateContext Data that requires the UpdatePanel to refresh, as shown below.

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
	<ContentTemplate>
		<%--controls elided--%>
	</ContentTemplate>
	<Triggers>
		<cc1:NavigationDataTrigger Key="name" />
		<cc1:NavigationDataTrigger Key="minDateOfBirth" />
		<cc1:NavigationDataTrigger Key="sortExpression" />
		<cc1:NavigationDataTrigger Key="startRowIndex" />
		<cc1:NavigationDataTrigger Key="maximumRows" />
		<cc1:NavigationDataTrigger Key="dateFilterVisible" />
	</Triggers>
</asp:UpdatePanel>

Pressing F5 and filtering, sorting and paging the Person List all result in a refresh of the UpdatePanel.

However, there is one difference between the javascript on and javascript off scenarios. This can be seen by entering a value in one of the search Text Boxes (without pressing the Search Button) in between clicking the paging, page resizing and sorting links. With javascript on the Text Box value is retained, whereas with javascript off it is lost.

For consistent behaviour the search criteria must be restored when paging, page resizing or sorting with javascript on. Adding the startRowIndex, maximumRows and sortExpression to the SelectParameters of the NavigationDataSource, as shown below, will cause the Text Boxes to rebind when paging, page resizing or sorting occurs respectively.

<cc1:NavigationDataSource ID="NavigationDataSource1" runat="server">
	<SelectParameters>
		<cc1:NavigationDataParameter Name="startRowIndex" />
		<cc1:NavigationDataParameter Name="maximumRows" />
		<cc1:NavigationDataParameter Name="sortExpression" />
	</SelectParameters>
	<UpdateParameters>
		<cc1:NavigationDataParameter Name="sortExpression" Reset="true"/>
		<cc1:NavigationDataParameter Name="startRowIndex" Reset="true"/>
	</UpdateParameters>
</cc1:NavigationDataSource>

Updated Wiki: Mobile

GrahamMendick — Fri, 21 Dec 2012 21:12:43 GMT

Mobile

A web site designed for a desktop browser is unlikely to work so well on a mobile device due to the latter's reduced screen size and touch input method, for example. Sometimes it can be enough just to add media-specific css or change the master page layout, but at other times mobile specific versions of pages will also be needed.

ASP.NET MVC 4 introduced a simple mechanism to override a view for mobile browsers. Providing a mobile-specific view just consists of copying the existing view file and adding '.Mobile' to the file name. In VS 2012 The Navigation framework introduces this functionality into Web Forms.

This feature only works for States that have a route configured. Taking the State Information configuration in State Information, to provide a mobile-specific view for State S1 first a route must be added as detailed in ASP.NET Routing and shown below.

<state key="S1" page="~/P1.aspx" route="R/{P}">
	<transition key="T1" to="S2"/>
</state>

Next create a page called P1.Mobile.aspx. Then whenever the State S1 is navigated to in a mobile browser the P1.Mobile.aspx page will be displayed instead of the P1.aspx page.

This feature also applies to master pages and themes. For example, delete the page P1.Mobile.aspx and instead assign a master page called M1.Master to page P1.aspx (either directly in the page itself or through the masters attribute of the State Information configuration). Next create a master page called M1.Mobile.Master. Then whenever the State S1 is navigated to in a mobile browser the page P1.aspx will be displayed but with the M1.Mobile.Master master page.

The Navigation framework's mobile support uses the Display Modes functionality introduced in ASP.NET MVC 4. So it's possible to create views for any individual browser. For example, an iPhone Display Mode can be created by adding the code shown below to the Application_Start method of the Global.asax file (making sure to add a using to the System.Web.WebPages namespace).

DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone")
{
	ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf
		("iPhone", StringComparison.OrdinalIgnoreCase) >= 0)
});

Then a master page called M1.iPhone.Master will be displayed whenever state S1 is navigated to in an iPhone.

If using VS 2012 is not an option the Navigation framework provides mobile support by allowing any or all of the page, route, theme and masters to be overridden by specifying the mobilePage, mobileRoute, mobileTheme and mobileMasters attributes respectively.

Taking the State Information configuration in State Information the State S1 can be assigned a mobile specific page as shown below.

<dialog key="D1" initial="S1" path="~/Default.aspx">
	<state key="S1" page="~/P1.aspx" mobilePage="~/P1.Mobile.aspx">
		<transition key="T1" to="S2"/>
	</state>
	<state key="S2" page="~/P2.aspx">
		<transition key="T2" to="S3"/>
	</state>
	<state key="S3" page="~/P3.aspx">
	</state>
</dialog>

To be clear, these two approaches to providing mobile-specific views are conflicting and the latter should only be used if VS 2012 is unavailable.

Browser overriding was introduced in VS 2012, allowing a request to be treated as if it originated from a different browser (user agent). The Navigation framework's ViewSwitcher control uses browser overriding to enable toggling between mobile and desktop views (similar to the view switcher functionality introduced into MVC 4).

Sample Web Site

The Details State already has a route attribute configured, so add a Web Form called Details.Mobile.aspx to the Web Site with a heading signifying it as a mobile-specific page as shown below.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Details.Mobile.aspx.cs" Inherits="NavigationSample.Details_Mobile" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
	<title></title>
</head>
<body>
	<form id="form1" runat="server">
		<h1>Mobile Page</h1>
	</form>
</body>
</html>

Pressing F5 and selecting a person will show the Details.aspx page. One way to see the Details.Mobile.aspx page would be to use a browser that allows the switching of the user agent string to simulate browser acces (e.g., chrome dev tools).

Another way is to use the ViewSwitcher control. Add a ViewSwitcher control to Listing.aspx, before the FormView, as shown below.

<cc1:ViewSwitcher runat="server" DesktopSwitchText="Deskop view" MobileSwitchText="Mobile view"/>

Pressing F5 and clicking the Mobile view Hyperlink will redisplay the page with a Desktop view Hyperlink visible to enable the switch back. Notice that the search criteria, sorting and paging information are all retained when switching between views. Now selecting a person from the list will display the Details.Mobile.aspx page.

To demonstrate mobile-specific development prior to VS 2012 set the mobilePage attribute as shown below.

<state key="Details" page="~/Details.aspx" mobilePage="~/Details.Mobile.aspx" title="Person Details" route="Person/{id}" defaultTypes="id=int">

Updated Wiki: ASP.NET Routing

GrahamMendick — Fri, 21 Dec 2012 21:00:35 GMT

ASP.NET Routing

In VS 2010 ASP.NET Routing was introduced to Web Forms, which enables the use of URLs that do not have to map to specific files.

Route URLs can be configured for a State by setting the ‘route’ attribute. The configuration can contain a mixture of routed and non-routed States. Taking the State Information configuration in State Information the State S1 can be assigned a route with one parameter as shown below.

<dialog key="D1" initial="S1" path="~/Default.aspx">
	<state key="S1" page="~/P1.aspx" route="R/{P}">
		<transition key="T1" to="S2"/>
	</state>
	<state key="S2" page="~/P2.aspx">
		<transition key="T2" to="S3"/>
	</state>
	<state key="S3" page="~/P3.aspx">
	</state>
</dialog>

This example route, R/{P}, will not be matched if its mandatory parameter P is not provided. Although this parameter can be specified as optional by marking it with an asterisk e.g. R/{*P}, this techique does not work for more than one parameter. To solve this the Navigation framework allows defaults to be configured. The syntax for assigning defaults is Key1?type1=Value1, Key2?type2=Value2, where the valid type values are string, bool, int, long, float, double, decimal, datetime, byte and char, with the default being string. An example for specifying string and int defaults for a route with two parameters is shown below.

<state key="S2" page="~/P2.aspx" route="R/{P}/{Q}" defaults="P=s,Q?int=0">
	<transition key="T2" to="S3"/>
</state>

Although defaults are associated with supplying values for route parameters, they also supply default StateContext Data values and are relevant even if a route is not specified. Any value specified in defaults will be added to the StateContext Data unless a non-default value is already present (i.e. not null and not empty string).

ASP.NET Routing is associated with human-readable URLs. However, there are two currently two impediments to achieving this in the Navigation framework, to see what these are consider a routed URL produced on navigating from P1 to P2 and passing values of 'a' and '1' for the NavigationData items P and Q respecitively:

R/a/12_3?c1=0-0

But the intended URL is R/a/1, so what are the extra bits and how can they be removed?

Objects other than strings stored in NavigationData will have characters appended, identifying their type, when they appear in URLs. That's why the '1' appears as 12_3 in the above example. To remedy this the Navigation framework allows defaultTypes to be configured. The syntax for assigning defaultTypes is Key1=type1, Key2=type2, where the valid type values are string, bool, int, long, float, double, decimal, datetime, byte and char. In the example, the configuration below shows how to define the default type of the Q NavigationData item as an int. Notice, the type is no longer required when specifying Q's default value.

<state key="S2" page="~/P2.aspx" route="R/{P}/{Q}" defaults="P=s,Q=0" defaultTypes="Q=int">
	<transition key="T2" to="S3"/>
</state>

By using default values the URL has become R/a/1?c1=0-0. The query string element is the information needed to maintain the Crumb Trail. This can be turned off by setting trackCrumbTrail to false as shown below. However, turning it off does come at the expense of back navigation.

<state key="S2" page="~/P2.aspx" route="R/{P}/{Q}" defaults="P=s,Q=0" defaultTypes="Q=int" trackCrumbTrail="false">
	<transition key="T2" to="S3"/>
</state>

As with defaults, default values are relevant even if a route is not specified. The example URL is now R/a/1, as initially intended.

URLs look slightly different in Navigation 1.5 when compared with Navigation 1.4 (with _ used as a separator instead of !). This is due to the change to the UrlEncode method introduced in VS 2012. To revert back to the original URL format add the configuration shown below (but be aware that this will cause longer URLs when the AntiXssEncoder is configured, as it is by default in VS 2012).

<configuration>
	<configSections>
		<sectionGroup name="Navigation">
			<section name="StateInfo" type="Navigation.StateInfoSectionHandler, Navigation"/>
			<section name="Settings" type="Navigation.NavigationSettings, Navigation"/>
		</sectionGroup>
	</configSections>
	<!-- other config elided -->
	<Navigation>
		<StateInfo configSource="StateInfo.config"/>
		<Settings originalUrlSeparators="true"/>
	</Navigation>
</configuration>

Sample Web Site

Configure the Listing State to have a route with the sortExpression as a parameter as shown below.

<StateInfo>
	<dialog key="Person" initial="Listing" path="~/Listing.aspx">
		<state key="Listing" page="~/Listing.aspx" title="Person Search" route="List/{sortExpression}">
			<transition key="Select" to="Details"/>
		</state>
		<state key="Details" page="~/Details.aspx" title="Person Details">
		</state>
	</dialog>
</StateInfo>

Pressing F5 will throw an exception as no default value is supplied for this parameter. Rather than mark the parameter as optional i.e. List/{*sortExpression}, a default sort expression will be supplied instead as shown below.

<state key="Listing" page="~/Listing.aspx" title="Person Search" route="List/{sortExpression}" defaults="sortExpression=Name">
	<transition key="Select" to="Details"/>
</state>

Since this default value is added to StateContext Data it works with the Sorter Control and a default sort order is applied when F5 is pressed. To show that defaults work independently of routing try firstly removing the parameter from the route attribute and secondly removing the route attribute entirely. In both scenarios the default sort order is still applied when F5 is pressed.

Configure the Details State to have a route with the id as a parameter as shown below. Pressing F5 and selecting a Person will show the Details page as normal but now the URL matches the pattern specified in the configuration.

<state key="Details" page="~/Details.aspx" title="Person Details" route="Person/{id}">
</state>

However, the because the id route parameter is an integer it has has the characters 2_3 appended in the URL. This can be fixed by configuring its default type as shown below.

<state key="Details" page="~/Details.aspx" title="Person Details" route="Person/{id}" defaultTypes="id=int">
</state>

The URL has query string variables appended which is used by the Navigation Framework to manage the crumb trail information. To remove this set the trackCrumbTrail attribute of the Details State to false as shown below. Pressing F5 and selecting a Person will throw an Exception. This is because the NavigationHyperLink on the Details.aspx uses back navigation to return to the Person Search. Setting trackCrumbTrail to false for the Details State prevents crumbs from being remembered and so the back navigation does not work.

<state key="Details" page="~/Details.aspx" title="Person Details" route="Person/{id}" defaultTypes="id=int" trackCrumbTrail="false">
</state>

Change this NavigationHyperLink on Details.aspx to use forward navigation instead as shown below. This time pressing F5 and selecting a Person will successfully show the Person Details and this time the URL has no query string variables.

<cc1:NavigationHyperLink ID="HyperLink1" runat="server" Action="Person" Text="Person Search" />

This clean URL has come at the cost of the link back to the Person Search no longer retaining the search, sort and paging information. This information is only retained by the Navigation Framework when crumb trail tracking is turned on and is then restored during a back navigation.

Defaults can be used to make the paging parameters of the Search method non-nullable. First, define integer defaults for the startRowIndex and maximumRows, as shown below.

<state key="Listing" page="~/Listing.aspx" title="Person Search" route="List/{sortExpression}" defaults="sortExpression=Name,startRowIndex?int=0,maximumRows?int=10">
	<transition key="Select" to="Details"/>
</state>

Then, change the Search method so these parameter are no longer nullable, as shown below.

public IEnumerable<Person> Search(
	[NavigationData] string name, 
	[NavigationData] string minDateOfBirth, 
	[NavigationData] string sortExpression,
	[NavigationData] int startRowIndex,
	[NavigationData] int maximumRows)
{
	var q = from p in _People
			where (name == null || p.Name.ToUpperInvariant().Contains(name.ToUpperInvariant()))
			&& (minDateOfBirth == null || p.DateOfBirth >= DateTime.Parse(minDateOfBirth))
			select p;
	if (sortExpression != null)
		q = !sortExpression.EndsWith("DESC") ? q.OrderBy(p => p.Name) : q.OrderByDescending(p => p.Name);
	StateContext.Data["totalRowCount"] = q.Count();
	return q.Skip(startRowIndex).Take(maximumRows);
}

Defaults can also be used to initialise the dateFilterVisible StateContext Data item rather than using the codebehind as currently. So remove the Page_Load method containing this initialisation and instead add a bool default of false for the dateFilterVisible as shown below.

<state key="Listing" page="~/Listing.aspx" title="Person Search" route="List/{sortExpression}" defaults="sortExpression=Name,startRowIndex?int=0,maximumRows?int=10,dateFilterVisible?bool=false">
	<transition key="Select" to="Details"/>
</state>

Updated Wiki: ASP.NET Ajax History

GrahamMendick — Fri, 21 Dec 2012 20:57:28 GMT

ASP.NET Ajax History

As seen in the Crumb Trail Data section, StateContext Data should be populated with the data required to recreate the current State. This is so that when it is Navigated back to via a Crumb all this data will be passed in and the screen can be presented to the user as it was the last time they visited it e.g. in the Data Sorting and Paging section, storing the sort order in StateContext Data means when they Navigate back the sort order is retained. The image below illustrates the way StateContext Data can be updated as PostBacks occur and since StateContext Data is stored in ControlState the browser back button causes no problems.

Browser Back and StateContext

ASP.NET Ajax and the UpdatePanel automatically add Ajax functionality to any Page, converting traditional PostBacks into PartialPageRequests. Consequently the browser back button no longer inserts history in the ‘usual’ manner. To circumvent this, the ScriptManager Control exposes the AddHistoryPoint method which allows the programmatic addition of history to the back button. This method takes a parameter which should contain all the data needed to recreate the Page. When the back button is pressed the ScriptManager raises an event passing back this data so the Page can be recreated. So, passing the StateContext Data to the AddHistoryPoint method means the image above remains the same except PostBacks are now replaced with partial PartialPageRequests and Browser Backs with ScriptManager events.

The StateController class has an AddHistoryPoint method which accepts a NavigationData parameter, that calls the ScriptManager AddHistoryPoint method passing this data, and a NavigateHistory method, that sets back this NavigationData into StateContext Data as a result of a ScriptManager history event. The latter is considered as history Navigation. A history Navigation does not result in a change to the PreviousState stored in StateContext as this is only changed during a non-PostBack scenario i.e. forward, backward and refresh Navigation.

Be aware of the following:

History Navigation is not available in VS 2005 since ASP.NET Ajax AddHistoryPoint is not available
In VS 2008 ASP.NET Ajax AddHistoryPoint functionality throws errors if reserved HTML/URL characters are contained in the state data. To avoid this set EnableSecureHistoryState on the ScriptManager to true
History Navigation does not work in Opera prior to version 11 since ASP.NET Ajax AddHistoryPoint produces very strange query strings in this browser

Rather than performing history Navigation programmatically, there is a HistoryNavigator control that, by detecting changes to StateContext Data, handles it automatically. This control should be added towards the bottom of the Page, after any data bound controls, because the change detection runs in the PreRender event and expects all StateContext Data updates to have taken place by then.

The HistoryNavigator allows customisation of when history points are added and how they're subsequently navigated. By default a history point is added whenever a change is detected to any StateContext Data item. By populating HistoryNavigator's HistoryKeys property with a comma delimited list of keys the change detection will only run against this subset of StateContext Data. By default when a history Navigation occurs all StateContext Data is first cleared before adding the incoming NavigationData. By populating HistoryNavigator's StateKeys property with a comma delimited list of keys these items will retain their original values during a history Navigation.

ASP.NET Ajax manages history by storing state in the hash fragment of a URL, following the && separator, for example:

Default.aspx#&&key=value

Prior to HTML5 modifying the hash fragment was the best option. However, the advent of HTML5 introduced the History API which allows custom URLs to be used, eradicating the hash fragment for modern browsers.

Although ASP.NET has not updated its Ajax History implementation to use HTML5 History, support has been added directly into the Navigation framework. To make use of this add the ScriptReference below to the ScriptManager's Scripts list.

<asp:ScriptReference Name="Navigation.HTML5History.js" Assembly="Navigation" />

If the browser does not support the new HTML5 History API it will fall back to the default ASP.NET Ajax History behavior. HTML5 History support will really pay dividends in the ASP.NET Routing section because it will mean all URLs, including history, can be made user-friendly. It also results in faster loading of bookmarked links because there is no longer the delay of waiting for the javascript to run.

There are a few provisos to be aware of when adding this ScriptReference:

History points must be added using the StateController
The page must not have been navigated to using NavigationMode.Server
Cross page posting is not supported from a page with route parameters

Sample Web Site

Start by enabling ASP.NET Ajax History on the ScriptManager, ensuring Secure History is disabled, as shown below.

<asp:ScriptManager ID="ScriptManager1" runat="server" EnableHistory="True" EnableSecureHistoryState="false" />

To enable the browser back button the AddHistoryPoint method on the StateController class must be called. Add a handler to the GridView’s DataBound event and call the AddHistoryPoint method passing a copy of the current StateContext Data (see below). This DataBound method is ideal as it is only called when the NavigationDataParameters change i.e. when the StateContext Data changes.

protected void GridView1_DataBound(object sender, EventArgs e)
{
	if (!ScriptManager1.IsInAsyncPostBack || ScriptManager1.IsNavigating)
		return;
	StateController.AddHistoryPoint(Page, new NavigationData(true), null);
}

Now each time the Person List is (validly) filtered, sorted or paged the browser back button gets a new history page added. Pressing the Search Button multiple times without changing the search criteria does not add a history point. This is because it is only on a change of NavigationDataParameter that the GridView gets DataBound. However, the browser back button does not ‘work’ as the search criteria and the Person List are not restored.

To restore the Person List, add a handler to the ScriptManager’s Navigate event and call the NavigateHistory method on StateController as shown below.

protected void ScriptManager1_Navigate(object sender, HistoryEventArgs e)
{
	if (ScriptManager1.IsInAsyncPostBack)
		StateController.NavigateHistory(e.State);
}

Press F5 and filter, page and sort the Person List a few times. Pressing the back button successfully cycles the Person List back through its previous incarnations. This is because the NavigateHistory replaces the StateContext Data with that associated with the HistoryPoint, which causes the GridView to rebind.

To restore the search criteria, the FormView must be rebound. This can be done by adding name and midDateOfBirth SelectParameters to the NavigationDataSource as shown below. This causes the Text Boxes to rebind their Text properties against their associated StateContext Data whenever a change is detected. Now pressing the back button cycles the Text Boxes back through their previous values.

<cc1:NavigationDataSource ID="NavigationDataSource1" runat="server">
	<SelectParameters>
		<cc1:NavigationDataParameter Name="name"/> 
		<cc1:NavigationDataParameter Name="minDateOfBirth"/> 
		<cc1:NavigationDataParameter Name="startRowIndex" />
		<cc1:NavigationDataParameter Name="maximumRows" />
		<cc1:NavigationDataParameter Name="sortExpression" />
	</SelectParameters>
	<UpdateParameters>
		<cc1:NavigationDataParameter Name="sortExpression" Reset="true"/>
		<cc1:NavigationDataParameter Name="startRowIndex" Reset="true"/>
	</UpdateParameters>
</cc1:NavigationDataSource>

An alternative approach to history management is to use the HistoryNavigator control. So, delete the DataBound and Navigate event listeners from the codebehind and their corresponding attributes in the Design view; and instead add a HistoryNavigator after the Pager control, as shown below.

<cc1:HistoryNavigator runat="server" />

Press F5 to see the history working as before, but now without any codebehind.

However, one nagging problem remains with the history Navigation if javascript is enabled. If the 'Show Date of Birth Filter' button is clicked when the page first loads and then the back button is pressed the total row count display value disappears. This problem would not occur if the search criteria changed during the history Navigation because this would cause the GridView to rebind and the totalRowCount to be calculated afresh. Nor would the problem occur if this was not the very first history point because the totalRowCount would appear in the url and hence would be set from the NavigationData during a history Navigation.

A possible fix would be to prevent a history point being added when the 'Show Date of Birth Filter' button is clicked, i.e., when the dateFilterVisible StateContext item changes. This can be achieved by excluding the dateFilterVisible key when specifying the keys the HistoryNavigator should monitor as shown below.

<cc1:HistoryNavigator runat="server" HistoryKeys="name,minDateOfBirth,sortExpression,startRowIndex,maximumRows,totalRowCount" />

But this means the javascript enabled/disabled experiences are different. So a better fix is to specify that the totalRowCount StateContext item is retained during a history Navigation by setting the StateKeys property as shown below.

<cc1:HistoryNavigator runat="server" StateKeys="totalRowCount" />

Now that history Navigation is working as desired, the final stage is to get it to use HTML5 History. By adding the ScriptReference shown below, the history URLs no longer use the hash fragment. In fact, they're identical to the URLs produced when javascript is disabled.

<asp:ScriptManager ID="ScriptManager1" runat="server" EnableHistory="True" EnableSecureHistoryState="false">
	<Scripts>
		<asp:ScriptReference Name="Navigation.HTML5History.js" Assembly="Navigation" />
	</Scripts>
</asp:ScriptManager>

Updated Wiki: ASP.NET Ajax History

GrahamMendick — Fri, 21 Dec 2012 20:52:37 GMT

ASP.NET Ajax History

Browser Back and StateContext

History Navigation is not available in VS 2005 since ASP.NET Ajax AddHistoryPoint is not available
In VS 2008 ASP.NET Ajax AddHistoryPoint functionality throws errors if reserved HTML/URL characters are contained in the state data. To avoid this set EnableSecureHistoryState on the ScriptManager to true
History Navigation does not work in Opera prior to version 11 since ASP.NET Ajax AddHistoryPoint produces very strange query strings in this browser

Default.aspx#&&key=value

<asp:ScriptReference Name="Navigation.HTML5History.js" Assembly="Navigation" />

History points must be added using the StateController
The page must not have been navigated to using NavigationMode.Server
Cross page posting is not supported from a page with route parameters

Sample Web Site

Start by enabling ASP.NET Ajax History on the ScriptManager, ensuring Secure History is disabled, as shown below.

<asp:ScriptManager ID="ScriptManager1" runat="server" EnableHistory="True" EnableSecureHistoryState="false" />

protected void GridView1_DataBound(object sender, EventArgs e)
{
	if (!ScriptManager1.IsInAsyncPostBack || ScriptManager1.IsNavigating)
		return;
	StateController.AddHistoryPoint(Page, new NavigationData(true), null);
}

protected void ScriptManager1_Navigate(object sender, HistoryEventArgs e)
{
	if (ScriptManager1.IsInAsyncPostBack)
		StateController.NavigateHistory(e.State);
}

<cc1:NavigationDataSource ID="NavigationDataSource1" runat="server">
	<SelectParameters>
		<cc1:NavigationDataParameter Name="name"/> 
		<cc1:NavigationDataParameter Name="minDateOfBirth"/> 
		<cc1:NavigationDataParameter Name="startRowIndex" />
		<cc1:NavigationDataParameter Name="maximumRows" />
		<cc1:NavigationDataParameter Name="sortExpression" />
	</SelectParameters>
	<UpdateParameters>
		<cc1:NavigationDataParameter Name="sortExpression" Reset="true"/>
		<cc1:NavigationDataParameter Name="startRowIndex" Reset="true"/>
	</UpdateParameters>
</cc1:NavigationDataSource>

<cc1:HistoryNavigator runat="server" />

Press F5 to see the history working as before, but now without any codebehind.

The final stage is to start it using HTML5 History. By adding the ScriptReference shown below, the history URLs no longer use the hash fragment. In fact, they're identical to the URLs produced for when javascript is disabled.

<asp:ScriptManager ID="ScriptManager1" runat="server" EnableHistory="True" EnableSecureHistoryState="false">
	<Scripts>
		<asp:ScriptReference Name="Navigation.HTML5History.js" Assembly="Navigation" />
	</Scripts>
</asp:ScriptManager>

Updated Wiki: Documentation

GrahamMendick — Fri, 21 Dec 2012 20:48:37 GMT

The documentation below is available to download, Navigation for ASP.NET Web Forms.pdf, as is the sample built from this documentation, Navigation Sample for VS 2012.zip or Navigation Sample for VS 2010.zip (make sure to unblock the zip file prior to extraction and set Listing.aspx as the start page).

Updated Wiki: Navigation Data Markup

GrahamMendick — Fri, 21 Dec 2012 20:47:05 GMT

Navigation Data Markup

There are currently two approaches to setting Control properties from StateContext Data:

Programmatically in the codebehind
Data binding to a NavigationDataSource

However, the former approach should be avoided because codebehinds should be as lean as possible and the latter can be cumbersome if only one way data binding is required.

In VS 2012 Control properties can be set from StateContext Data in markup using the syntax {NavigationData key}. For example, to set a Literal's Text property to the StateContext item with key 'name' see below.

<asp:Literal ID="Literal1" runat="server" Text="{NavigationData name}" />

Before using this feature the NavigationControlBuilderInterceptor must be registered in the Web.config as shown below.

<compilation debug="true" targetFramework="4.5" controlBuilderInterceptorType="Navigation.NavigationDataControlBuilderInterceptor, Navigation">
	<!-- other config elided -->
</compilation>

The StateContext Data item does not have to be a string, any convertible Type is valid. Format strings are also supported using the syntax {NavigationData key,format}. For example, if the 'date' key maps to a DateTime in StateContext then to use its short date representation see below.

<asp:Literal ID="Literal1" runat="server" Text="{NavigationData date,{0:d}}" />

The syntax is not limited to string Control properties. For example, if there's a bool object in StateContext Data with key 'show' then it can be used to determine a Control's visibility (see below).

<asp:Button ID="Button1" runat="server" Visible="{NavigationData show}" />

Setting a bool Control property from the negation of a StateContext Data item is supported using the syntax {NavigationData !key}. For example, for a bool stored in StateContext Data with key 'hide' its negation can be used as shown below.

<asp:Button ID="Button1" runat="server" Visible="{NavigationData !hide}" />

This NavigationData markup syntax can also be used against Control events. However, this requires the StateContext Data item to be a bool because when the associated event fires this item is toggled, i.e., if false it will be set to true and vice versa (see below for example usage).

<asp:Button ID="Button1" runat="server" OnClick="{NavigationData show}" />

Sample Web Site

A common requirement, unsupported by the Pager Control, is display the total count of rows. This value is already stored in StateContext Data as totalRowCount, because it's needed by the Pager to determine whether there's a next page, so the NavigationData markup syntax can be used to display it on the page by adding a new Literal Control after the Pager as show below.

<asp:Literal ID="Literal1" runat="server" Text="{NavigationData totalRowCount}" />

To make this number meaningful a bit of descriptive text is necessary, so the string formatting capabilities of the syntax can be used to provide this context as shown below.

<asp:Literal ID="Literal1" runat="server" Text="{NavigationData totalRowCount,Total Count {0}}" />

Rather than show both the name and date filters when the page first loads, it makes sense to show just the name filter and hide the lesser-used date of birth filter away, with a button provided to access it if required. To this end the date of birth Label and TextBox will be wrapped in a PlaceHolder with its Visible property set using the NavigationData markup syntax as show below*.

<asp:PlaceHolder runat="server" Visible="{NavigationData dateFilterVisible}" >
	<asp:Label ID="Label2" runat="server" Text="Min Date of Birth" AssociatedControlID="TextBox2" />
	<asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("[minDateOfBirth]") %>' />
</asp:PlaceHolder>

Pressing F5 will throw an exception becaue the dateFilterVisible StateContext Data item is null. It needs to be initialised to false. For now this can be done in the Page_Load method as shown below, but this will be removed in the ASP.NET Routing section when an easier method of setting default values is discussed.

protected void Page_Load(object sender, EventArgs e)
{
	if (!IsPostBack)
		StateContext.Data["dateFilterVisible"] = false;
}

This time pressing F5 is successful but the date of birth filter is always invisible. To address this a Button can be added with its OnClick event set using NavigationData markup syntax as shown below.

<asp:Button ID="Button2" runat="server" Text="Show Date of Birth Filter" OnClick="{NavigationData dateFilterVisible}" />

Clicking the Button causes the dateFilterVisible StateContext Data item to be set to true which in turn sets the PlaceHolder to be visible. Finally, to hide the Button after it's been clicked the NavigationData negation markup syntax can be used against its Visible property as shown below.

<asp:Button ID="Button2" runat="server" Text="Show Date of Birth Filter" Visible="{NavigationData !dateFilterVisible}" OnClick="{NavigationData dateFilterVisible}" />

*The validation warning flagged against the Visible property's NavigationData markup can be ignored

Updated Wiki: Navigation Data Markup

GrahamMendick — Fri, 21 Dec 2012 20:42:00 GMT

Navigation Data Markup

There are currently two approaches to setting Control properties from StateContext Data:

Programmatically in the codebehind
Data binding to a NavigationDataSource

<asp:Literal ID="Literal1" runat="server" Text="{NavigationData name}" />

Before using this feature the NavigationControlBuilderInterceptor must be registered in the Web.config as shown below.

<compilation debug="true" targetFramework="4.5" controlBuilderInterceptorType="Navigation.NavigationDataControlBuilderInterceptor, Navigation">
	<!-- other config elided -->
</compilation>

<asp:Literal ID="Literal1" runat="server" Text="{NavigationData date,{0:d}}" />

The syntax is not limited to string Control properties. For example, if there's a bool object in StateContext Data with key 'show' then it can be used to determine a Control's visibility (see below).

<asp:Button ID="Button1" runat="server" Visible="{NavigationData show}" />

<asp:Button ID="Button1" runat="server" Visible="{NavigationData !hide}" />

<asp:Button ID="Button1" runat="server" OnClick="{NavigationData show}" />

Sample Web Site

<asp:Literal ID="Literal1" runat="server" Text="{NavigationData totalRowCount}" />

To make this number meaningful a bit of descriptive text is necessary, so the string formatting capabilities of the syntax can be used to provide this context as shown below.

<asp:Literal ID="Literal1" runat="server" Text="{NavigationData totalRowCount,Total Count {0}}" />

<asp:PlaceHolder runat="server" Visible="{NavigationData dateFilterVisible}" >
	<asp:Label ID="Label2" runat="server" Text="Min Date of Birth" AssociatedControlID="TextBox2" />
	<asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("[minDateOfBirth]") %>' />
</asp:PlaceHolder>

protected void Page_Load(object sender, EventArgs e)
{
	if (!IsPostBack)
		StateContext.Data["dateFilterVisible"] = false;
}

<asp:Button ID="Button2" runat="server" Text="Show Date of Birth Filter" OnClick="{NavigationData dateFilterVisible}" />

<asp:Button ID="Button2" runat="server" Text="Show Date of Birth Filter" Visible="{NavigationData !dateFilterVisible}" OnClick="{NavigationData dateFilterVisible}" />

Updated Wiki: Documentation

GrahamMendick — Fri, 21 Dec 2012 20:18:06 GMT

Updated Wiki: Home

GrahamMendick — Fri, 21 Dec 2012 20:16:10 GMT

Project Description

Navigation for ASP.NET Web Forms manages movement and data passing between ASPX pages in a unit-testable manner. There is no client-side logic, so it works in all browsers, and no server-side cache, so it works with the browser back button.

Comprehensive documentation and sample code can be found under the Documentation tab

A sample project built using this framework can be found at Navigation NerdDinner. It is a conversion of the ASP.NET MVC NerdDinner application to ASP.NET Web Forms and is accompanied by a 150-page PDF walkthrough.

Features

Loosely coupled pages
Typed data passing
Empty code-behinds
Unit-testability
Secure applications
Problem-free browser back button
Context-sensitive bread crumb trail
ASP.NET data binding integration
Automatic ASP.NET Ajax history navigation
ASP.NET routing integration
Progressive enhancement
Single page applications
Mobile and Display Modes support

For explanation and examples of all these features and more see the Documentation

New Comment on "Navigation Data"

ZedRoth — Mon, 10 Sep 2012 15:54:35 GMT

It happens, when I use GetNavigationLink method in .NET 4.0

New Comment on "Navigation Data"

ZedRoth — Sat, 08 Sep 2012 19:10:01 GMT

Hello! I have keys with "amp;" prefix in StateContext.Data collection. What reasons can be? (Thank you: it's very suitable library)

Updated Wiki: Documentation

GrahamMendick — Thu, 02 Aug 2012 19:18:56 GMT

New Comment on "Documentation"

anilbabum — Thu, 02 Aug 2012 11:29:47 GMT

What is URL REDIRECTION?How can i use this concept in my .net? my task is i have generated one url like this "http://example.com/" I am passing one pearameter like "http://example.com/Empno=1" I want to display Ename in Database table that corresponding "Empno" plz Help me Give me one simple example I am new this concepts plz Help me send source code to my mailID:mandla.anilbabu@gmail.com

Updated Wiki: Documentation

GrahamMendick — Tue, 03 Jul 2012 16:31:19 GMT

The documentation below is available to download, Navigation for ASP.NET Web Forms.pdf, as is the sample built from this documentation, Navigation Sample.zip (make sure to unblock the zip file prior to extraction and set Listing.aspx as the start page).

Updated Wiki: Documentation

GrahamMendick — Tue, 03 Jul 2012 16:17:05 GMT

Documentation for Navigation for ASP.NET Web Forms

The documentation details the key concepts of the Navigation framework. Each concept is demonstrated through the construction of a sample Web Site. All the code to build the sample is included in the document, however should there be any problems the finished sample is available (make sure to unblock all zip files prior to extraction).

Navigation for ASP.NET Web Forms.pdf
Navigation Sample.zip (make sure to set Listing.aspx as the start page)

Updated Wiki: Documentation

GrahamMendick — Fri, 29 Jun 2012 12:27:09 GMT

Navigation for ASP.NET Web Forms.pdf
Navigation Sample.zip (make sure to set Listing.aspx as the start page)

Updated Wiki: Home

GrahamMendick — Fri, 29 Jun 2012 11:00:26 GMT

Loosely coupled pages
Typed data passing
Empty code-behinds
Unit-testability
Secure applications
Problem-free browser back button
Context-sensitive bread crumb trail
ASP.NET data binding integration
Automatic ASP.NET Ajax history navigation
ASP.NET routing integration
Progressive enhancement
Single page applications
Mobile support

For explanation and examples of all these features and more see the Documentation

Updated Wiki: Data Binding

GrahamMendick — Fri, 29 Jun 2012 10:58:11 GMT

Data Binding

Thus far, getting and setting of values in StateContext Data has been done programmatically, as has the formation of the Crumb Trail. Examples of some problems this approach can cause are:

Bloated codebehinds – from maintenance, unit testability and reusability perspectives, the smaller the codebehind class the better
Tight coupling – A business method might access StateContext Data which could make it dependent on a particular Navigation route

To remedy this the Navigation Framework has classes that extend the ASP.NET DataBinding Framework and allow almost all NavigationUI code to be removed from the codebehind and business methods (see table below). The only bit that cannot be removed relates to Hyperlink consctruction and will be tackled in the Navigation Hyperlink and Data Expression section.

Navigation DataBinding Support

Navigation Class	ASP.NET Base Class	Purpose
NavigationDataAttribute	ValueProviderSourceAttribute	Binds a StateContext Data item to a method parameter. The method parameter name identifies the item to bind to, but a custom Key can be used instead
NavigationDataParameter	Parameter	Binds a StateContext Data item to a Parameter object. The Key property identifies the item to bind to, if it is not provided the Name property will be used instead
NavigationDataSource	DataSourceControl	Supports 2-way DataBinding with StateContext Data as the DataSource. Used to bind Control properties to StateContext Data items. Use the square bracket (e.g. key) binding syntax
CrumbTrailDataSource	DataSourceControl	Supports 1-way DataBinding with StateController Crumbs as the DataSource. The Crumb class is the data item, so can bind to the NavigationLink and Title properties. Can also bind to the Crumb data items using the square bracket (e.g. key) binding syntax

The classes that allow code to be cleared from the codebehind and moved into the Design tab are the NavigationDataSource and CrumbTrailDataSource. They allow DataBinding to StateContext and CrumbTrail Data respectively.

The classes that relate to the removal of StateContext Data access from the busines methods are NavigationDataAttribute and NavigationDataParameter. The former is for use in the value provider DataBinding framework provided by VS 2012; and the latter is for use in the DataSource binding mechanism prior to VS 2012.

Sample Web Site

The NavigationDataSource will allow the codebehind of Listing.aspx to be cleared, the CrumbTrailDataSource will allow the codebehind of Details.aspx to be cleared and the NavigationDataAttribute (NavigationDataParameter prior to VS 2012) will remove StateContext Data access from the methods in the PersonSearch class.

To begin, remove all the methods apart from the GridView1_CallingDataMethods event listener from the codebehind of Listing.aspx (and the associated OnClick attribute). Turn to the Design view and register the Navigation assembly at the top by adding the code below.

<%@ Register assembly="Navigation" namespace="Navigation" tagprefix="cc1" %>

The setting of StateContext Data from the TextBox values and vice versa will be handled by 2-way DataBinding with a NavigationDataSource control. So, wrap the search criteria (including the Search Button and CompareValidator) of Listing.aspx inside a FormView attached to a NavigationDataSource and an EditItemTemplate as shown below.

<asp:FormView ID="FormView1" runat="server" DataSourceID="NavigationDataSource1" DefaultMode="Edit">
	<EditItemTemplate>
		<asp:Label ID="Label1" runat="server" Text="Name" AssociatedControlID="TextBox1" />
		<asp:TextBox ID="TextBox1" runat="server" />
		<asp:Label ID="Label2" runat="server" Text="Min Date of Birth" AssociatedControlID="TextBox2" />
		<asp:TextBox ID="TextBox2" runat="server" />
		<asp:Button ID="Button1" runat="server" Text="Search" />
		<asp:CompareValidator ID="CompareValidator1" runat="server" ControlToValidate="TextBox2" EnableClientScript="False" ErrorMessage="date error" Operator="DataTypeCheck" Type="Date" />
	</EditItemTemplate>
</asp:FormView>
<cc1:NavigationDataSource ID="NavigationDataSource1" runat="server">
</cc1:NavigationDataSource>

Pressing F5 will display the Person List although the search criteria no longer filter the list. So, set the Text properties of the two TextBoxes via the two-way DataBinding expression, using the keys that were previously assigned to the StateContext Data as shown below.

<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("[name]") %>' />
<asp:Label ID="Label2" runat="server" Text="Min Date of Birth" AssociatedControlID="TextBox2" />
<asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("[minDateOfBirth]") %>' />

Pressing F5 will display the Person List but the search criteria still do not filter the list. Set the Search Button’s CommandName attribute to ‘Update’ (see below). This will update the NavigationDataSource and the Text Box Text strings will be set into StateContext Data.

<asp:Button ID="Button1" runat="server" Text="Search" CommandName="Update" />

However, this still does not allow the Person List to be filtered because the GridView has not been refreshed. The NavigationDataAttribute will get around this problem. Adding name and minDateOfBirth parameters, adorned with NavigationDataAttributes, to the Search method will cause the latter to be called whenever there is a change in either of these parameters and to rebind the GridView accordingly. This means the StateContext Data access can be removed from the method body, using the method parameters instead, as shown below.

public IEnumerable Search([NavigationData] string name, [NavigationData] string minDateOfBirth)
{
	return from p in _People
			where (name == null || p.Name.ToUpperInvariant().Contains(name.ToUpperInvariant()))
			&& (minDateOfBirth == null || p.DateOfBirth >= DateTime.Parse(minDateOfBirth))
			select new
			{
				p.Name,
				p.DateOfBirth,
				Link = StateController.GetNavigationLink("Select", new NavigationData() { { "id", p.Id } })
			};
}

This time Pressing F5 will display the Person List with fully functioning search criteria. Searching on an invalid date works without adding any code as this is a by-product of using DataBinding since the NavigationDataSource will only be updated if the Page is valid.

The same treatment can be done to the Details.aspx Page. First, remove the Page_Load method from its codebehind. This has stopped the Hyperlink from the details back to the Listing from working, but the CrumbTrailDataSource will be used to restore this functionality. Register the Navigation assembly at the top of the Design view. Delete the Hyperlink and replace it with a ListView, DataBound to the CrumbTrailDataSource, containing a Hyperlink with its NavigateUrl property one-way bound to the NavigationLink Property of the Crumb class (see below).

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

Add an id parameter, adorned with a NavigationDataAttribute, to the GetDetails method and remove the StateContext Data access from the method body, as shown below.

public Person GetDetails([NavigationData] int id)
{
	return (from p in _People
			where p.Id == id
			select p).First();
}

Pressing F5 will display fully functioning Listing and Details Pages.