如何使用转发器在列中显示多条记录？答案

【问题标题】：How to show multiple records in columns with repeater?如何使用转发器在列中显示多条记录？
【发布时间】：2017-06-22 12:42:00
【问题描述】：

我正在进行一个项目。我在 sql server 数据库中有一个选项卡菜单表，我附上了它的图像。我的标签菜单的样式如下：

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

我想通过中继器或任何有用的控件将此选项卡菜单连接到数据库。我该怎么做？

【问题讨论】：

标签： html css asp.net sql-server webforms

【解决方案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>

【讨论】：