Create a menu from a web.sitemap file in ASP.NET

Question

I launched 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 "O". I like this structure. However, I want to populate NavigationMenu based on the contents of my Web.sitemap file. 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 this:

 <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 that this approach creates a small block that represents the menu. When the user hangs over it, two submenu items are displayed "Home" and "Products". Oddly enough, the web.sitemap file for only one siteMapNode is a child of the siteMap . How do I make "Home" and "Products" appear just like "Home" and "About", giving me the flexibility to use a sitemap?

Thanks!

Answer 1

For me, ShowStartingNode = "false" worked better.

Answer 2

You can use the StartingNodeOffset property of the SitemapDataSource control to configure which part of the sitemap hierarchy is expanded. In your case, if you set it to 1, everything should be fine.

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

Answer 3

You have to cut out the asp: Menu and scroll through the site map using the ListView and generate your own menu. I would use the standard ul tag. Then bind "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 the sitemap, which is two levels, you will need to add an additional list if you have 3 levels.

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