Please help me clean up my ASP.NET MVC tag soup

Question

I'm creating a menu for my web site. It's got a hierarchical structure.

Here's what I want:

• Great Grandparent
  • Grandparent
    • Parent
      • Sibling1
      • Sibling2
      • Sibling3
      • Self
        • Child1
        • Child2
        • Child3

HTML:

<ul>
    <li><a href="/389">Great Grandparent</a>
        <ul>
            <li><a href="/456">Grandparent</a>
                <ul>
                    <li><a href="/389">Parent</a>
                        <ul>
                            <li><a href="/986">Sibling1</a></li>
                            <li><a href="/983">Sibling2</a></li>
                            <li><a href="/418">Sibling3</a></li>
                            <li><strong>Self</strong>
                                <ul>
                                    <li><a href="/310">Child1</a></li>
                                    <li><a href="/953">Child2</a></li>
                                    <li><a href="/927">Child3</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Here's the code from my ASPX page. This works:

<% For Each Ancestor As Node In ViewData("Ancestors")%>
    <ul>
        <li><%=Html.RouteLink(Html.Encode(Ancestor.Name), "IdOnly", New With {.id = Ancestor.Id})%>
<% Next%>
            <ul>
<% For Each Sibling As Node In ViewData("Siblings")%>
                <li><%=Html.RouteLink(Html.Encode(Sibling.Name), "IdOnly", New With {.id = Sibling.Id})%></li>
<% Next%>
                <li><strong><%=Html.Encode(Model.Name)%></strong>
<% If Model.Children.Count > 0 Then%> 
                    <ul>
    <% For Each Child As Node In ViewData("Children")%>
                        <li><%=Html.RouteLink(Html.Encode(Child.Name), "IdOnly", New With {.id = Child.Id})%></li>
    <% Next%>
                    </ul>
<% End If%>
                </li>
            </ul>
<% For Each Ancestor As Node In ViewData("Ancestors")%>
        </li>
    </ul>
<% Next%>

That ASPX page seems pretty hard to read. How can I clean that up?

Answer 1

One thing I would recommend is checking the count of items supposed to be in "li" tags before you write the parent tags, other wise you could end up with empty "ul" tags which will not validate. If that doesn't make sense I'll elaborate later when I have some more time. As far as the formatting goes, perhaps some more indentation might make it easier to read.

Answer 2

The better solution would be to create a html helper if it doesn't already exist.

Take a look at this question to get ideas on how to do this

http://stackoverflow.com/questions/478927/asp-net-mvc-htmlhelper-extensions-for-yui-controls-yahoo-user-interfaces