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

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?

From stackoverflow

• 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.

  Zack Peterson : I check that there are more than zero children: <% If Model.Children.Count > 0 Then%>

  dhulk : @Zack That's good, all that's left then I'd say would be indentation. If you match the code with the HTML tags indentation-wise it should help with readability so you can easily tell which block goes with which markup.

• 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