How can I turn the output of asp:SiteMapPath into a list?

Question

I'm extremely unfamiliar with both .NET and VB.NET and can't quite figure out how to do this. Say I have code like this:

<div class="breadcrumb">
    <asp:SiteMapPath ID="SiteMapPath1" runat="server"></asp:SiteMapPath>
</div>

It outputs a bunch of <span>s with > as separators, something like this:

<div class="breadcrumb">
  <span id="ctl00_SiteMapPath1">
    <a href="#ctl00_SiteMapPath1_SkipLink">
      <img alt="Skip Navigation Links" height="0" width="0" src="/Bonfield/WebResource.axd?d=PEpmmIw6qvhaEC3hEwXGjgvJKlzc3DOMu_e-zW-n6pfl6YR-iYjwmlvrYPb689EslKxysA7aoh_x_ALjLs5QXiz7NG41&amp;t=634245478914809245" style="border-width:0px;" />
    </a>
    <span>
      <a href="/Bonfield/Default.aspx">Home</a>
    </span>
    <span> &#187; </span>
    <span>Showcase</span><a id="ctl00_SiteMapPath1_SkipLink"></a></span>
</div>

How can I turn that into a list like:

<ul>
  <li>Home</li>
  <li>Showcase</li>
</ul>

Answer 1

You may have solved this by now but you could use this function to loop through all the items in the rootnode of a sitemap and their descendants and build up a nested list.

You can remove If item.HasChildNodes Then sb.Append(ListChildNodes(item)) if you are only interested in the top level

 Public Function SiteMap() As String
        Return ListChildNodes(System.Web.SiteMap.RootNode)
    End Function

    Private Function ListChildNodes(ByVal node As System.Web.SiteMapNode) As String
        Dim sb As New System.Text.StringBuilder

        sb.Append("<ul>")
        For Each item As SiteMapNode In node.ChildNodes
            sb.Append(String.Concat("<li><a href=""", item.Url, """>", item.Title, "</a></li>"))
            If item.HasChildNodes Then sb.Append(ListChildNodes(item))
        Next
        sb.Append("</ul>")

        Return sb.ToString
    End Function

For those who would like the C# version:

public string SiteMap()
        {
            return ListChildNodes(System.Web.SiteMap.RootNode);
        }
        private string ListChildNodes(System.Web.SiteMapNode node)
        {
            System.Text.StringBuilder sb = new System.Text.StringBuilder();

            sb.Append("<ul>");
            foreach (SiteMapNode item in node.ChildNodes)
            {
                sb.Append(string.Concat("<li><a href=\"", item.Url, "\">", item.Title, "</a></li>"));
                if (item.HasChildNodes)
                    sb.Append(ListChildNodes(item));
            }
            sb.Append("</ul>");

            return sb.ToString();
        }

Then in your code you can just call to output the string to the page.

<h1>Site Map</h1>
    <%=SiteMap()%>
</div>

Answer 2

While you can't get rid of the span tags, you CAN accomplish what you want. I ran into this same issue because I was using a purchased CSS/HTML site template the client wanted, but the entire thing was based on <ul>'s and <li>'s. Refactoring the CSS would have been too painful, so I found this solution that worked well without any changes to the CSS code.

You'll do two things:

1. Override the default Node template with one that uses <li> tags
2. Wrap the whole thing in a <ul> tag

Here's an example:

<ul style="list-style-type: none;">
  <asp:SiteMapPath ID="SiteMapPath1" runat="server" >
    <NodeTemplate>
      <li>
        <a href='<%# Eval("url") %>' title='<%# Eval("description") %>'><%# Eval("title") %></a>
      </li>
    </NodeTemplate>
  </asp:SiteMapPath>
</ul>