Navigating

Our app for cataloguing thingamabobs is coming along, but we can't yet navigate between the two pages. We need to move from the listing to the details when selecting a thingamabob. We need to return to the listing to select a different thingamabob. And, with our thingamabob collection numbered in the thousands, we need the ability to page through the list.

Navigation
These three different types of navigation are forward, back and refresh. Navigation for ASP.NET provides a different method for each one. Each method comes in two flavours, one performs a redirect and the other returns a Url.

To navigate forward from the Listing to Details state we pass the 'key' attribute of the transition.

StateController.Navigate("Select"); //Redirect
var link = StateController.GetNavigationLink("Select"); //Url

To navigate back from the Details to the Listing state we pass the number of steps to go back.

StateController.NavigateBack(1); //Redirect
var link = StateController.GetNavigationBackLink(1); //Url

To refresh the Listing state we don't need any parameters.

StateController.Refresh(); //Redirect
var link = StateController.RefreshLink; //Url

There are some bespoke classes for MVC and Web Forms that make navigating even easier.

MVC

For each of the three navigation types there's an ActionResult class we can return from a Controller.

new NavigateResult("Select");
new NavigateBackResult(1);
new RefreshResult();

We can build links for each navigation type using HtmlHelper extension methods.

@Html.NavigationLink("text", "Select")
@Html.NavigationBackLink("text", 1)
@Html.RefreshLink("text")

Web Forms

In .NET 4.5 we can build links for each navigation type using ASP.NET HyperLink Controls.

<asp:HyperLink runat="server" NavigateUrl="{NavigationLink Select}"/>
<asp:HyperLink runat="server" NavigateUrl="{NavigationBackLink 1}"/>
<asp:HyperLink runat="server" NavigateUrl="{RefreshLink}"/>

Before .NET 4.5 we can use NavigationHyperLink Controls.

<nav:NavigationHyperLink runat="server" Action="Select"/>
<nav:NavigationHyperLink runat="server" Direction="Back" Distance="1" />
<nav:NavigationHyperLink runat="server" Direction="Refresh"/>

Last edited Jul 11, 2014 at 1:19 PM by GrahamMendick, version 3