ASP.Net Menu Control with .sitemap file

Question

I don't have tons of experience with binding sitemap files to the menu control in ASP.Net and wanted to see if this was possible (without a lot custom plumbing).

I am using the CSS Friendly Adapters to get clean markup. I have the CSS already prepared to create horizontal navigation, where the top bar represents the main navigation, and the lower bar represents sub-navigation.

Essentially I want to transform this sitemap file:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="~/Default.aspx" title="Home" description="">
        <siteMapNode url="~/Page1.aspx" title="Page1" description="">
            <siteMapNode url="~/SubPage1_1.aspx" title="Sub Page 1.1"  description="" />
            <siteMapNode url="~/SubPage1_2.aspx" title="Sub Page 1.2"  description="" />
        </siteMapNode>
        <siteMapNode url="~/Page2.aspx" title="Page2"  description="">
            <siteMapNode url="~/SubPage2_1.aspx" title="Sub Page 2.1"  description="" />
            <siteMapNode url="~/SubPage2_2.aspx" title="Sub Page 2.2"  description="" />
        </siteMapNode>
    </siteMapNode>
</siteMap>

Into this markup:

<div class="nav" >
    <ul class="fixed">
      <li><a href="Page1.aspx" class="active">Page 1</a></li>
      <li><a href="Page2.aspx">Page 2</a></li>
    </ul>
</div><!-- end .nav -->

<div class="subnav" >
    <ul class="fixed">
      <li><a href="SubPage1_1.aspx" class="active">Page 1.1</a></li>
      <li><a href="SubPage1_2.aspx">Page 1.2</a></li>
    </ul>
</div><!-- end .subnav -->

Where the sub-navigation is bound to the child nodes of the main navigation node in the sitemap.

Is it wrong of me to expect this will be simple ;)

Answer 1

So it turns out that the solution is in fact very simple.

By using two SiteMapDataSourceControls, and setting the second one's StartingNodeOffset = 1, then you can effectively achieve the two layered navigation approach by using two repeaters.

<ul>
    <asp:Repeater ID="rptMainNavigation" runat="server" DataSourceID="SiteMapDataSourceMainNavigation">
        <ItemTemplate>
            <li><a href="<%# ((SiteMapNode)Container.DataItem).Url %>"><%# ((SiteMapNode)Container.DataItem).Title %></a></li>
        </ItemTemplate>
    </asp:Repeater>
</ul>

<ul>
    <asp:Repeater ID="rptSubNavigation" runat="server" DataSourceID="SiteMapDataSourceSubNavigation">
        <ItemTemplate>
            <li><a href="<%# ((SiteMapNode)Container.DataItem).Url %>"><%# ((SiteMapNode)Container.DataItem).Title %></a></li>
        </ItemTemplate>
    </asp:Repeater>
</ul>

<asp:SiteMapDataSource ID="SiteMapDataSourceMainNavigation" runat="server" ShowStartingNode="False" />
<asp:SiteMapDataSource ID="SiteMapDataSourceSubNavigation" runat="server" ShowStartingNode="False" StartingNodeOffset="1" />