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:
- Dialog – A logical grouping of States. These are the top level elements
- State – Maps to an aspx Page which is displayed whenever this State is reached. These are children of a Dialog
- 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 set with 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 |
| 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. DataBinding in VS 2012 helps with this aim by providing the OnCallingDataMethods event on all databound controls, such as the GridView. This allows 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();
}
Setting Listing.aspx as the start page and pressing F5 will throw a UrlException because the State Information has not been configured yet. 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 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>