ASP.NET menus and CSS?

Question

Hi

I have the feeling that using Sitemap in ASP.NET is not conducive to CSS. Where do I format a menu to look like CSS can make it look. Where are mu ul and li's?

...Beginner, so forgive me if there right under my nose.

Answer 1

For complete control over a menu you could use a Repeater and bind it to your Web.SiteMap.

<asp:Repeater ID="MenuRepeater" DataSourceID="SiteMapDataSource1" runat="server">
  <ItemTemplate>
    <li>
      <a href='<%#Eval("url")%>'><%#Eval("Title")%></a>
    </li>
  </ItemTemplate>
</asp:Repeater>

If you're looking to do CSS dropdown menus then simply add in a nested Repeater.

<asp:Repeater ID="MenuRepeater" DataSourceID="SiteMapDataSource1" runat="server" EnableViewState="false">
  <ItemTemplate>
    <li>
      <a href='<%#Eval("url")%>'><%#Eval("Title")%></a>
      <ul>
        <asp:Repeater ID="DropDownRepeater" DataSource='<%#Container.DataItem.ChildNodes()%>' runat="server">
          <ItemTemplate>
            <li>
              <a href='<%#Eval("url")%>'><%#Eval("Title")%></a>
            </li>
          </ItemTemplate>
        </asp:Repeater>
      </ul>
    </li>
  </ItemTemplate>
</asp:Repeater>

So you'll get the CSS menus you want and still be using your Web.SiteMap.

Answer 2

Why not just use a CSS menu with ul's and li's ? There is nothing in ASP.NET that says you have to use web controls, normal HTML works just as well (probably better).

Answer 3

You can combine the SiteMapDataSource with a Repeater tu produce a standard <ul><li> menu list. You can even add your own attributes to the web.sitemap file, e.g. to specify an image for the menu item...

Answer 4

Using a SiteMap is extremily useful when using it to show Menus and Breadcrums.

You can read some tutorials on how to accomplish this like this. If you want to generate pure UL / LI I suggest you read this post

There is always the ASP.NET Video tutorial on How Do I: Implement Site Navigation in ASP.NET?

Try, as well use the CSS Friendly Adapters (that's what they were build for) - there's a video tutorial as well.

Hope it helps

Answer 5

teknohippy's advice on using a repeater is great!

However, the line

    <asp:Repeater ID="DropDownRepeater" DataSource='<%#Container.DataItem.ChildNodes()%>' runat="server">

is incorrect. It needs to be

    <asp:Repeater ID="Repeater1" runat="server" DataSource='<%# ((SiteMapNode) Container.DataItem).ChildNodes %>'>

in order to work.

Details are available in this excellent tutorial:

http://msdn.microsoft.com/en-us/library/aa581781.aspx