Navigation Controls

Navigation Controls

The treeView and SiteMapPath controls, introduced in ASP.NET v2.0, are fantastic additions to the built-in controls. As with the other controls mentioned in this chapter, they can be programmatically manipulated, but they can also be programmed declaratively.

treeView has been around for a long time; it was originally offered in a somewhat less robust form as part of a control package downloadable from Microsoft. Listing 13.4 demonstrates the simple declaration of a TReeView to create the navigation shown in Figure.

Listing 13.4. treeView declaration
<asp:TreeView ID="MyTree" Runat="Server" ShowLines="true" Font-Names="Verdana, Arial">
    <asp:TreeNode Text="Home" NavigateUrl="~/Default.aspx" Expanded="true">
      <asp:TreeNode Text="Page 1" NavigateUrl="~/Page1.aspx" />
      <asp:TreeNode Text="Page 2" NavigateUrl="~/Page2.aspx" />

Figure. The treeView rendered in the browser

What's the deal with the tilde (~) in the navigation path? Using the tilde references the root of an application. If you have a subfolder in the site acting as an application, the tilde points to that root, not the site root. In Listing 13.4, an application residing in would resolve the above path to

If you prefer to separate the data from the control, you can bind an external XML file to the TReeView and an XmlDataSource control. Just as you used a SqlDataSource control to bind to various data controls, a SiteMapDataSource control can be used to bind hierarchical data to a treeView. Listing 13.5 shows the web.sitemap file, where SiteMapDataSource gets its data. This functionally produces the same output shown in Figure

Listing 13.5. Using SiteMapDataSource with treeView and web.sitemap

Code from an .aspx page

<asp:TreeView ID="MyTree" Runat="Server" ShowLines="true" Font-Names="Verdana, Arial"
 DataSourceID="MapSource" />

<asp:SiteMapDataSource id="MapSource" runat="server" />


<?xml version="1.0" encoding="utf-8" ?>
  <siteMapNode title="Home" url="~/Default.aspx">
    <siteMapNode title="Page 1" url="~/Page1.aspx" />
    <siteMapNode title="Page 2" url="~/Page2.aspx" />

The SiteMapPath control creates a breadcrumb trail of links through the site, based on the web.sitemap file. All it requires is declaration in the page like this: <asp:SiteMapPath ID="SiteMapPath1" Runat="server" />. If you were on Page1.aspx described in the web.sitemap file from Listing 13.5, and it contained this control, you'd get the output shown in Figure. This is another great example of how little work is required on your part with some declarative controls.

Figure. The SiteMapPath control rendered in the browser

     Python   SQL   Java   php   Perl 
     game development   web development   internet   *nix   graphics   hardware 
     telecommunications   C++ 
     Flash   Active Directory   Windows