Build a Menu from the web.sitemap file in ASP.NET

I have started a new ASP.NET 4 WebForm application. By default, the Site.Master file contains the following menu:

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"   IncludeStyleBlock="false" Orientation="Horizontal">
  <Items>
    <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
    <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
  </Items>
</asp:Menu>

This menu contains two blocks: "Home" and "About". I like this structure. However, I want to populate the NavigationMenu based upon the contents of my Web.sitemap file. At this time, this file looks like this:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode>
    <siteMapNode url="/Default.aspx" title="Home"  description=""></siteMapNode>
    <siteMapNode url="/Products/List.aspx" title="Products" description=""></siteMapNode>
  </siteMapNode>
</siteMap>

I changed the NavigationMenu code to look like the following:

<asp:SiteMapDataSource ID="mySiteMapDataSource" runat="server" />
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" DataSourceID="mySiteMapDataSource" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal" />

My problem is, this approach creates a small block that represents the menu. When the user hovers over this, two sub-menu items appear "Home" and "Products". Oddly, the web.sitemap file only alows for one siteMapNode as the child of the siteMap element. How do I make it such that "Home" and "Products" appear in the same way that "Home" and "Abou开发者_Go百科t" did, while giving me the flexibility of using the sitemap?

Thank you!

For me ShowStartingNode="false" worked better.

You can use the StartingNodeOffset property of SitemapDataSource control to tune what part of the sitemap hierarchy is exposed. In your case, if you set it to 1, all should be fine.

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.sitemapdatasource.startingnodeoffset.aspx

You should ditch the asp:Menu and iterate through the sitemap using a ListView and generate your own menu. I would use the standard ul tag. Then tie the "li", "ul", and "a" to css for styling.

<asp:ListView ID="lvMenuList" DataSourceID="SiteMapDataSource1" runat="server">
         <LayoutTemplate>
              <li runat="server" />
         </LayoutTemplate> 
         <ItemTemplate>
              <li> <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# Eval("Url") %>'><span><%# Eval("Title") %></span></asp:HyperLink>                           
          <asp:ListView ID="ListView2" runat="server"  DataSource='<%# ((SiteMapNode) Container.DataItem).ChildNodes %>' >
         <LayoutTemplate>
               <ul><li runat="server" /></ul> 
         </LayoutTemplate>
         <ItemTemplate>
               <li>  <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl='<%# Eval("Url") %>'><span><%# Eval("Title") %></span></asp:HyperLink> </li>
         </ItemTemplate>
</asp:ListView> 

                        </li>
                    </ItemTemplate>
                    </asp:ListView>

This will handle a sitemap file that is two levels, you will have to add an additional listview if you have 3 levels.

Also, you can have more than 2 levels, here is a link to msdn that shows an exapmle using 3 levels:https://msdn.microsoft.com/en-us/library/yy2ykkab%28v=vs.140%29.aspx