State Information

A typical Web application steers a user through a series of pages to complete a specific task. For example, to purchase car insurance online there would be a series of screens to collect customer then car details followed by a quote summary screen, a drill down into more details about the quote and finally an option to purchase. From the perspective of the Navigation Framework the tasks, the pages that make up a task and the movement between the pages are very important and are known as Dialogs, States and Transitions respectively. They are the elements that form the State Information configuration:

  1. Dialog – A logical grouping of States. These are the top level elements
  2. State – Maps to an aspx Page which is displayed whenever this State is reached. These are children of a Dialog
  3. Transition – The possible movements allowed from a given State. These are children of a State
This information is entered into the StateInfo.config file created in the previous section, an example of which, with all the mandatory attributes populated, is shown below. This shows two Dialogs, D1 and D2. D1 has child States S1, S2 and S3 and a Transition, T1, from S1 to S2 and another, T2, from S2 to S3. D2 has a single child State S1 with no Transitions. Both D1 and D2 have their ‘initial’ attribute pointing to their first child, S1. This example configuration will be referred to throughout the subsequent sections.

<StateInfo>
	<dialog key="D1" initial="S1">
		<state key="S1" page="~/P1.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>
	<dialog key="D2" initial="S1">
		<state key="S1" page="~/P1.aspx">
		</state>
	</dialog>
</StateInfo>
The Dialogs property of the StateInfoConfig class provides programmatic read-only access to this configuration information.

There are many more attributes than shown in this example configuration. In particular, to determine which initial State is shown when the Web Project is started the path attribute of one Dialog must be assigned the Web Project's start page (see below).

<dialog key="D1" initial="S1" path="~/P1.aspx">
The complete list of attributes (case-sensitive) associated with each element are outlined in the tables below. At this stage it is not important to go through them all in detail as they will be covered thoroughly in the subsequent sections.
Dialog Attributes
Attribute Name Description Status
key Unique Identifier for the Dialog Mandatory
initial Must match the key attribute of one of its child States Mandatory
path A valid URL. Must use the tilde (~) notation for the application root, e.g., ~/default.aspx. Any request matching this path will show the page of the initial State Optional
title Textual description of the Dialog Optional
resourceType The type of a Global Resource. Allows the Dialog title to be localized and used in conjunction with the resourceKey attribute Optional
resourceKey The key of the resource item. Allows the Dialog title to be localized and used in conjunction with the resourceType attribute Optional

State Attributes
Attribute Name Description Status
key Identifier for the State. Must be unique within its parent Dialog. Used in initial attribute of Dialogs and to attribute of Transitions. Mandatory
page The aspx Page to display when in this State. Must use the tilde (~) notation for the application root, e.g., ~/page.aspx Mandatory
title Textual description of the State. Applied to the Page’s Title property Optional
resourceType The type of the Global Resource. Allows the State title to be localized and used in conjunction with the resourceKey attribute Optional
resourceKey The key of the resource item. Allows the State title to be localized and used in conjunction with the resourceType attribute Optional
theme The Theme to apply to the Page Optional
masters A comma separated list of Master pages to apply to the Page Optional
route The name of the route. Only relevant when ASP.NET Routing is used Optional
trackCrumbTrail Indicates whether to maintain crumb trail information. Can be used in conjunction with route to produce user friendly URLs Optional
checkPhysicalUrlAccess Indicates whether to validate the physical page. Only relevant if route is set Optional
defaults Default StateContext data. Can be used in conjunction with route to supply default route parameter values Optional
defaultTypes Default types of StateContext data. Can be used in conjunction with route to produce user friendly URLs Optional
derived Derived StateContext data. Lists data that is calculated rather than passed in Optional
mobilePage The aspx Page to display for a mobile device when in this State. Must use the tilde (~) notation for the application root, e.g., ~/page.aspx Optional
mobileTheme The Theme to apply to the Page for a mobile device Optional
mobileMasters A comma separated list of Master pages to apply to the Page for a mobile device Optional
mobileRoute The name of the route for a mobile device. Only relevant when ASP.NET Routing is used Optional

Transition Attributes
Attribute Name Description Status
key Identifier for the Transition. Must be unique within its parent State Mandatory
to Must match the key attribute for one of the sibling States of its parent State Mandatory

Sample Web Site

The first page of the NavigationSample Web Site will display a list of people, so first add a Person class to the Web Project as shown below.

public class Person
{
	public string Name
	{
		get;
		set;
	}

	public DateTime DateOfBirth
	{
		get;
		set;
	}
}
Next add a PersonSearch class that returns the list of people, for simplicity it will also hold the data as shown below (make sure to add a using to the System.Collections namespace).

public class PersonSearch
{
	private static List<Person> _People = new List<Person>()
	{
		new Person() { Name = "Bob", DateOfBirth = new DateTime(1980, 12, 12) },
		new Person() { Name = "Brenda", DateOfBirth = new DateTime(1970, 6, 1) },
		new Person() { Name = "Barney", DateOfBirth = new DateTime(1960,10,25) },
	};

	public IEnumerable Search()
	{
		return _People;
	}
}
Add a Web Form called Listing.aspx and to this add a GridView with two Columns bound to the Name and DateOfBirth properties of the Person class (see below).

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Listing.aspx.cs" Inherits="NavigationSample.Listing" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
	<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" SelectMethod="Search" OnCallingDataMethods="GridView1_CallingDataMethods">
		<Columns>
			<asp:BoundField DataField="Name" HeaderText="Name" />
			<asp:BoundField DataField="DateOfBirth" DataFormatString="{0:d}" HeaderText="Date of Birth" />
		</Columns>
	</asp:GridView>
    </div>
    </form>
</body>
</html>
The aim is to have no logic in the codebehind because this will help when it comes to Unit Testing. Prior to VS 2012, ObjectDataSource Controls were the only option for achieving empty codebehinds. VS 2012 DataBinding has introduced the OnCallingDataMethods event on all databound controls, such as the GridView, allowing the PersonSearch class to be used as the data retrieval object rather than the codebehind as shown below.

protected void GridView1_CallingDataMethods(object sender, CallingDataMethodsEventArgs e)
{
	e.DataMethodsObject = new PersonSearch();
}
Currently, as there is only one aspx Page there will be only one State (and hence only one Dialog). There will be no Transitions as they are only relevant when a Dialog has more than one State as they describe the movements between States within a Dialog.

Adding the configuration shown below to the StateInfo.config file, setting Listing.aspx as the start page and pressing F5 should display a table of the three people. (Noicte that the URL in the browser has had a query string of c0=0-0 appended by the Navigation framework).

<StateInfo>
	<dialog key="Person" initial="Listing" path="~/Listing.aspx">
		<state key="Listing" page="~/Listing.aspx" title="Person Search">
		</state>
	</dialog>
</StateInfo>

Last edited Feb 15, 2014 at 3:18 PM by GrahamMendick, version 6