Wie zeigen Sie mehrere Datensätze in Spalten mit Repeater?

Question

Ich bin mitten in einem Projekt. Ich habe eine Tabelle für Tab-Menü in der SQL-Server-Datenbank, die ich das Bild angehängt habe. mein Tab-Menü hat einen Stil wie unten:

<ul class="nav nav-tabs"> 
    <li class="active"><a data-toggle="tab" href="#home">Name1</a></li> 
    <li><a data-toggle="tab" href="#menu1">Name2</a></li> 
    <li><a data-toggle="tab" href="#menu2">Name3</a></li> 
    <li><a data-toggle="tab" href="#menu3">Name4</a></li> 
</ul> 

<div class="tab-content"> 
    <br /><br /> 
<div id="home" class="tab-pane fade in active"> 
    <div class="col-sm-4"> 
     <ul class="nav navbar-link navbar-right"> 

      <li><a href="#"><img src="images/list/tik.png" style="width:20px; height:20px;" />...</a></li> 
      <li><a href="#"><img src="imageslist/tik.png" style="width:20px; height:20px;" />...</a></li> 
      <li><a href="#"><img src="images/list/tik.png" style="width:20px; height:20px;" />...</a></li> 
      <li><a href="#"><img src="images/list/tik.png" style="width:20px; height:20px;" />...</a></li> 
     </ul> 
    </div> 
    <div class="col-sm-4"> 
     <ul class="nav navbar-link navbar-right"> 
      <li><a href="#"><img src="images/list/tik.png" style="width:20px; height:20px;" />...</a></li> 
      <li><a href="#"><img src="images/list/tik.png" style="width:20px; height:20px;" />...</a></li> 
      <li><a href="#"><img src="images/list/tik.png" style="width:20px; height:20px;" />...</a></li> 
      <li><a href="#"><img src="images/list/tik.png" style="width:20px; height:20px;" />...</a></li> 
     </ul> 
    </div> 
    <div class="col-sm-4"> 
     <ul class="nav navbar-link navbar-right"> 
      <li><a href="#"><img src="images/list/tik.png" style="width:20px; height:20px;" />...</a></li> 
      <li><a href="#"><img src="images/list/tik.png" style="width:20px; height:20px;" />...</a></li> 
      <li><a href="#"><img src="images/list/tik.png" style="width:20px; height:20px;" />...</a></li> 
      <li><a href="#"><img src="images/list/tik.png" style="width:20px; height:20px;" />...</a></li> 
     </ul> 
    </div> 
</div> 
<div id="menu1" class="tab-pane fade"> 
      <div class="col-sm-4"> 
     <ul class="nav navbar-link navbar-right"> 
      <li><a href="#"><img src="images/list/tik.png" style="width:20px; height:20px;" />...</a></li> 
      <li><a href="#"><img src="images/list/tik.png" style="width:20px; height:20px;" />...</a></li> 
      <li><a href="#"><img src="images/list/tik.png" style="width:20px; height:20px;" />...</a></li> 
      <li><a href="#"><img src="images/list/tik.png" style="width:20px; height:20px;" />...</a></li> 
      <li><a href="#"><img src="images/list/tik.png" style="width:20px; height:20px;" />...</a></li> 
      <li><a href="#"><img src="images/list/tik.png" style="width:20px; height:20px;" />...</a></li> 
     </ul> 
    </div> 
    <div class="col-sm-4"> 
     <ul class="nav navbar-link navbar-right"> 
      <li><a href="#"><img src="images/list/tik.png" style="width:20px; height:20px;" />...</a></li> 
      <li><a href="#"><img src="images/list/tik.png" style="width:20px; height:20px;" />...</a></li> 
      <li><a href="#"><img src="images/list/tik.png" style="width:20px; height:20px;" />...</a></li> 
      <li><a href="#"><img src="images/list/tik.png" style="width:20px; height:20px;" />...</a></li> 
      <li><a href="#"><img src="images/list/tik.png" style="width:20px; height:20px;" />...</a></li> 
      <li><a href="#"><img src="images/list/tik.png" style="width:20px; height:20px;" /> ...</a></li> 
     </ul> 
    </div> 
    <div class="col-sm-4"> 
     <ul class="nav navbar-link navbar-right"> 
      <li><a href="#"><img src="images/list/tik.png" style="width:20px; height:20px;" />...</a></li> 
      <li><a href="#"><img src="images/list/tik.png" style="width:20px; height:20px;" />...</a></li> 
      <li><a href="#"><img src="images/list/tik.png" style="width:20px; height:20px;" />...</a></li> 
      <li><a href="#"><img src="images/list/tik.png" style="width:20px; height:20px;" />...</a></li> 
      <li><a href="#"><img src="images/list/tik.png" style="width:20px; height:20px;" />...</a></li> 
      <li><a href="#"><img src="images/list/tik.png" style="width:20px; height:20px;" />...</a></li> 
     </ul> 
    </div> 
</div> 
<div id="menu2" class="tab-pane fade"> 

</div> 
<div id="menu3" class="tab-pane fade"> 

</div> 
</div>  
</div> 

Ich möchte mit Repeater oder eine nützliche Kontrolle dieser Registerkarte Menü Datenbank verbinden. Wie kann ich das machen?

Answer 1

<asp:Repeater ID="rep" runat="server"> 
     <ItemTemplate> 

      <div class="col-sm-4"> 
    <ul class="nav navbar-link navbar-right"> 

     <li><a href="#"><img src="images/list/tik.png" style="width:20px; height:20px;" /><%# Eval("FName") %></a></li> 
     <li><a href="#"><img src="imageslist/tik.png" style="width:20px; height:20px;" /><%# Eval("ParentID").ToString() %></a></li> 
     <li><a href="#"><img src="images/list/tik.png" style="width:20px; height:20px;" /><%# Eval("Active").ToString() %></a></li>    
    </ul> 
</div> 
</ItemTemplate> 
</asp:Repeater>