Question

In Asp.net website i work with(on which i had no prior knowledge) there is repeater and html markup. The output i get is spaghetti code mixture of databinded code and also markup after the repeater. The Code Behind and Markup is given below

<ul>
    <li>
    <a name="products">  Products</a>
        <asp:Repeater ID="RT_Category" runat="server">
        <ItemTemplate>                                   
        <%# DataBinder.Eval(Container.DataItem, "Category")%>                          
        <asp:Repeater ID="RT_SubCategory" runat="server" DataSource='<%# DataBinder.Eval(Container.DataItem, "SubCat") %>'>
        <HeaderTemplate><ul class="test1"></HeaderTemplate>
        <ItemTemplate>
        <li><a href='<%# DataBinder.Eval(Container.DataItem, "LinkS") %>'><%# DataBinder.Eval(Container.DataItem, "SubcatName")%></a></li>
        </ItemTemplate>
        <FooterTemplate></FooterTemplate>
        </asp:Repeater>         
        </ItemTemplate>
        </asp:Repeater>
    </li>
</ul>

<ul id="mega">
    <li><a href="#">SCHOOLS</a>
        <div> 
            <h2>Classes</h2>
            <p><a href="#">Times</a><a href="#">Schedual</a><a href="#">Map</a></p>
            <p><a href="#">Names</a><a href="#">Study</a><a href="#">Directions</a></p>
            <p><a href="#">Health</a><a href="#">Dance</a><a href="#">Biology</a></p>
            <h2>Teachers</h2>
            <p><a href="#">Billy</a><a href="#">Madeleine</a><a href="#">Lauren</a></p>
            <p><a href="#">Paddington</a><a href="#">Stefan</a><a href="#">Michael</a></p>
            <p><a href="#">Shannon</a><a href="#">Mary</a><a href="#">Raffaello</a></p>
            <h2>Location</h2>
            <p><a href="#">Carlsbad</a><a href="#">Oceanside</a><a href="#">El Cajon</a></p>
            <p><a href="#">Vista</a><a href="#">La Costa</a><a href="#">Encinitas</a></p>
            <p><a href="#">San Diego</a><a href="#">Los Angles</a><a href="#">Cardiff</a></p>
            <h2>Months</h2>
            <p><a href="#">Janary</a><a href="#">February</a><a href="#">March</a><a href="#">April</a></p>
            <p><a href="#">May</a><a href="#">June</a><a href="#">July</a><a href="#">August</a></p>
            <p><a href="#">September</a><a href="#">October</a><a href="#">November</a><a href="#">December</a></p>
        </div>
    </li>

Heres whats being output to my browser…

<ul>
    <li class="">
      <a name="products" id="products">Products</a> Designer Corner Groupings

      <div class="test1" style="margin-left: 2em; visibility: hidden">
        Chairs

        <ul class="test1">
          <li><a href="/classicfurniture4u/s/Modern-chairs/PpAqk7vjo8c/s">Modern
          chairs</a></li>

          <li style="list-style: none">Tables

            <ul class="test1">
              <li><a href="/classicfurniture4u/s/Coffee-tables/j0DuY5817sM/s">Coffee
              tables</a></li>
            </ul>

            <ul id="mega">
              <li class="">
                <a href="#">SCHOOLS</a>

                <div style="z-index: 985;">
                  <h2>Classes</h2>

                  <p><a href="#">Times</a><a href="#">Schedual</a><a href="#">Map</a></p>

                  <p><a href="#">Names</a><a href="#">Study</a><a href=
                  "#">Directions</a></p>

                  <p><a href="#">Health</a><a href="#">Dance</a><a href=
                  "#">Biology</a></p>

                  <h2>Teachers</h2>

                  <p><a href="#">Billy</a><a href="#">Madeleine</a><a href=
                  "#">Lauren</a></p>

                  <p><a href="#">Paddington</a><a href="#">Stefan</a><a href=
                  "#">Michael</a></p>

                  <p><a href="#">Shannon</a><a href="#">Mary</a><a href=
                  "#">Raffaello</a></p>

                  <h2>Location</h2>

                  <p><a href="#">Carlsbad</a><a href="#">Oceanside</a><a href="#">El
                  Cajon</a></p>

                  <p><a href="#">Vista</a><a href="#">La Costa</a><a href=
                  "#">Encinitas</a></p>

                  <p><a href="#">San Diego</a><a href="#">Los Angles</a><a href=
                  "#">Cardiff</a></p>

                  <h2>Months</h2>

                  <p><a href="#">Janary</a><a href="#">February</a><a href=
                  "#">March</a><a href="#">April</a></p>

                  <p><a href="#">May</a><a href="#">June</a><a href="#">July</a><a href=
                  "#">August</a></p>

                  <p><a href="#">September</a><a href="#">October</a><a href=
                  "#">November</a><a href="#">December</a></p>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </li>
  </ul>

Answer 1

When you’re using a Repeater to build up lists, it’s generally easier to put the <ul> opening and closing tags in the repeater’s header and footer, respectively. So something like this:

<asp:Repeater ... runat="server">
    <HeaderTemplate>
        <ul>
    </HeaderTemplate>
    <ItemTemplate>
            <li><!-- data binding stuff --></li>
    </ItemTemplate>
    <FooterTemplate>
        </ul>
    </FooterTemplate>
</asp:Repeater>