Using the TreeView Control for Navigation
Naturally, the TreeView control is predestined to show hierarchical site map navigation. To implement such navigation automatically in all pages, I recommend you use Master Pages, as described in the last chapter.
This is how it works:
-
Place a new TreeView control at the position of your choice within the page or the Master Page.
-
Choose the Connect To DataSource command from the task list and create a new source of type SiteMapDataSource.
-
Set the InitialExpandDepth property of the TreeView control to 2.
-
Start the web site by pressing F5.
The SiteMapDataSource control reads the data automatically out of the aforementioned XML file and makes it available for the TreeView control. Your browser should now look like Figure 5-1 if you didn't make any other changes.
Figure 5-1: You can use the TreeView control to display any kind of hierarchical site map.
The required HTML source code for this example is quite short and looks like this:
<asp:treeview runat="server" font-underline="False" datasource initialexpanddepth="2"> <parentnodestyle font-underline="False"> </parentnodestyle> <leafnodestyle font-underline="False"> </leafnodestyle> <nodestyle font-underline="False"> </nodestyle> <rootnodestyle font-underline="False"> </rootnodestyle> </asp:treeview> <asp:sitemapdatasource runat="server"> </asp:sitemapdatasource>
| Note | The page used in this section's example is called navigation1.aspx. This page has been applied as the destination for the site map entry Home Products Hardware. Some other entries comply with files used in later examples in this chapter. |
Creating a Split Navigation System
The SqlDataSource control offers several properties to adapt the site's navigation. You can specify, for example, that the entries should start from root, from the active element, or from the active element's parent. Alternatively, you can define the level to be shown directly (zero based).
The following example (see Listing 5-2) is an enhancement of the previous example. This time, however, the three main points are shown in a horizontal navigation bar. This is accomplished through a DataList control that has a separate SqlDataSource control assigned to it. Now the TreeView shows only the navigation points from the second level on, naturally depending on the actual position of the site.
Listing 5-2: A Different Way to Create a Real-World Navigation System
 |
<table cellspacing="1" cellpadding="1" width="100%" border="1"> <tr> <td colspan="2"> <h1>My Little Company</h1> </td> </tr> <tr> <td colspan="2"> <asp:datalist runat="server" repeatdirection="Horizontal" datasource> <itemtemplate> <asp:hyperlink runat="server" navigateurl='<%# Eval("url") %>' text='<%# Eval("title") %>'> </asp:hyperlink> </itemtemplate> </asp:datalist> <asp:sitemapdatasource runat="server" sitemapviewtype="Flat" flatdepth="2"> </asp:sitemapdatasource> </td> </tr> <tr> <td valign="top"> <asp:treeview runat="server" datasource initialexpanddepth="2" > </asp:treeview> <asp:sitemapdatasource runat="server" startingdepth="1"> </asp:sitemapdatasource> </td> <td> <asp:contentplaceholder runat="server"> </asp:contentplaceholder> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> |
Listing 5-2 shows the source code of the page and two SqlDataSource controls with different parameters. The properties in use are SiteMapViewType and FlatDepth for the main navigation, and StartingDepth for the area navigation. Figure 5-2 shows the result.
Figure 5-2: The main navigation and area navigation are split.
EAN: 2147483647
Pages: 133