1
votes

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 ;)

1
Can you give me the idea how to display the second level navigation as horizontal. I hope you have a CSS file which displays the second level navigation in horizontal style.karthik k
There are a lot of examples out there on the web that cover "horizontal css navigation." Most use nested lists to create the parent child relationsihp. In my case, I simply used one layered on top on the other. Here is a link that should get you started: alvit.de/css-showcase/css-navigation-techniques-showcase.phpJosh
This is the real thing (Tutorial 3: Master Pages and Site Navigation by Scott Mitchell): msdn.microsoft.com/en-us/library/aa581782.aspx Please see 'Step 3: Displaying a Menu Based on the Site Map'. Just Beautiful! :)user915845

1 Answers

1
votes

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" />