How to bind a site map to the TreeView and Menu navigation controls in ASP.NET

If you have a Web.sitemap file you’re ready to use it in a page.   Note: How to define a site map in ASP.NET will teach you how to create it. The easiest way to implement your navigation is to use master pages. You can define the navigation controls as a part of a template and reuse them with every page. You can use the next markup to define a basic structure in your master page which puts navigation controls on the left and creates the SiteMapDataSource which provides navigational information to other controls:

<head runat=”server”>

<title></title>

<asp:ContentPlaceHolder ID=”head” runat=”server”>

</asp:ContentPlaceHolder>

</head>

<body>

<form id=”form1″ runat=”server”>

<table>

<tr>

<td style=”width: 230px; vertical-align: top;”>

<!– Navigation controls go here. –>

</td>

<td style=”vertical-align: top;”>

<asp:ContentPlaceHolder ID=”ContentPlaceHolder1″ runat=”server” />

</td>

</tr>

</table>

<asp:SiteMapDataSource ID=”SiteMapDataSource1″ runat=”server” />

</form>

</body>

 

Now you can create a child page with some simple static content:

<asp:Content ID=”Content1″ ContentPlaceHolderID=”head” runat=”server”>

</asp:Content>

<asp:Content ID=”Content2″ ContentPlaceHolderID=”ContentPlaceHolder1″ runat=”server”>

<br />

<br />

Default.aspx page (home).

</asp:Content>

 

You should choose the controls you want to use to display the site map data. In the first scenario you the TreeView is used which is bound to SiteMapDataSource in the master page using the DataSourceID. The next picture shows the result:

 

Child web page with TreeView navigation
Child web page with TreeView navigation

 

The second scenario the Menu control is used, and the next picture shows the result in this case:

<asp:Menu ID=”Menu1″ runat=”server” DataSourceID=”SiteMapDataSource1″ />

 

Child web page with Menu navigation

Child web page with Menu navigation