|
|
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.
The required HTML source code for this example is quite short and looks like this:
<asp:treeview id="TreeView1" runat="server"
font-underline="False"
datasourceid="SiteMapDataSource1"
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 id="SiteMapDataSource1" 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. |
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.
 |
<table id="Table1" 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 id="DataList1" runat="server"
repeatdirection="Horizontal"
datasourceid="SiteMapDataSource2">
<itemtemplate>
<asp:hyperlink
id="HyperLink1"
runat="server"
navigateurl='<%# Eval("url") %>'
text='<%# Eval("title") %>'>
</asp:hyperlink>
</itemtemplate>
</asp:datalist>
<asp:sitemapdatasource id="SiteMapDataSource2"
runat="server"
sitemapviewtype="Flat"
flatdepth="2">
</asp:sitemapdatasource>
</td>
</tr>
<tr>
<td valign="top">
<asp:treeview id="TreeView1" runat="server"
datasourceid="SiteMapDataSource1"
initialexpanddepth="2" >
</asp:treeview>
<asp:sitemapdatasource id="SiteMapDataSource1"
runat="server"
startingdepth="1">
</asp:sitemapdatasource>
</td>
<td>
<asp:contentplaceholder id="ContentPlaceHolder1" 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.
|
|
