Site Navigation in ASP.NET 2.0
Pages: 1, 2

TreeView control

One control that is not grouped under the Navigation tab in the Toolbox but which is useful for site navigation is the TreeView control. The TreeView control displays a tree similar to the MSDN site (see Figure 8).

Figure 8. The MSDN treeview navigation

Let's modify the master page so that every page on our site will display a hierarchical view of the site. Insert a 2-by-1 table (Layout -> Insert table). Drag the ContentPlaceHolder control into the right cell of the table and drag and drop the TreeView control (under the Standard tab in the Toolbox) into the left cell of the table (see Figure 9).

Figure 9. Using the TreeView control

To make the TreeView control look like MSDN's, set the BackColor property of the TreeView control to gray (#E0E0E0). Then click Auto Format... and select the MSDN scheme.

To ensure that both the TreeView and ContentPlaceHolder controls are aligned to the top of their cells, switch to Source view and add in the valign attribute in the two elements:

...
<td style="width: 100px; height: 221px" valign="top">
    <asp:TreeView ID="TreeView2" Runat="server" BackColor="#E0E0E0" 
          DataSourceID="SiteMapDataSource1"
          NodeIndent="10" ImageSet="Msdn" Height="140px" Width="269px">
       <SelectedNodeStyle BackColor="White" VerticalPadding="1" 
            BorderColor="#888888" BorderStyle="Solid"
            BorderWidth="1px" 
            HorizontalPadding="3"></SelectedNodeStyle>
       <NodeStyle VerticalPadding="2" Font-Names="Verdana" 
            Font-Size="8pt" NodeSpacing="1"
            HorizontalPadding="5" ForeColor="Black"></NodeStyle>
       <HoverNodeStyle BackColor="#CCCCCC" BorderColor="#888888" 
            BorderStyle="Solid" BorderWidth="1px"
            Font-Underline="True"></HoverNodeStyle>
    </asp:TreeView>
</td>

<td style="width: 486px; height: 221px" valign="top">
    <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
    </asp:contentplaceholder>
</td>
...

Now, add some content to the ASPNET.aspx page (see Figure 10) and to the Cookbooks.aspx page (see Figure 11).

Figure 10. Populating the ASPNET.aspx page

Figure 11. Populating the Cookbooks.aspx page

You can now navigate the pages by clicking on the items in the TreeView control (see Figure 12).

Figure 12. Loading Cookbooks.aspx using the TreeView control

Notice that the TreeView control is synchronized with the page that is loaded (see Figure 13, where the ASP.NET Cookbook item is highlighted).

Figure 13. The TreeView control is synchronized with the page that is loaded

Summary

The new navigational controls in ASP.NET make creating site navigation a much simpler task. This article presents an overview of what the various controls can do; they are actually highly customizable. Check out the new controls if you have Visual Studio 2005 Beta 1.

Wei-Meng Lee (Microsoft MVP) http://weimenglee.blogspot.com is a technologist and founder of Developer Learning Solutions http://www.developerlearningsolutions.com, a technology company specializing in hands-on training on the latest Microsoft technologies.

---

Return to ONDotnet.com