在asp.net中继器中使用引导选项卡

本文关键字：选项 asp net 中继器 | 更新日期: 2023-09-27 18:11:28

我有一个aspx页面，它使用一个中继器来显示一些面板，如:

<asp:Repeater ID="myRepeater" runat="server">
    <ItemTemplate>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h1>
                    <asp:Label ID="lbHeader" runat="server"></asp:Label>
                </h1>
                <ul class="nav nav-tabs" role="tablist" id="myTab">
                    <li class="active"><a href="#tab1" role="tab" data-toggle="tab">Tab1</a></li>
                    <li               ><a href="#tab2" role="tab" data-toggle="tab">Tab2</a></li>
                    <li               ><a href="#tab3" role="tab" data-toggle="tab">Tab3</a></li>
                </ul>
            </div>
            <div class="panel-body">
                <div class="tab-content">
                    <div class="tab-pane fade in active" id="tab1">
                        <%--Tables and stuff--%>
                    </div>
                    <div class="tab-pane fade" id="tab2">
                        Some text
                    </div>
                    <div class="tab-pane fade" id="tab3">
                        Some other text
                    </div>
                </div>
            </div>
        </div>
    </ItemTemplate>
</asp:Repeater>

它看起来像这样:

+------------+--------+---------+---------+
| Panel 1    | *TAB1* |  Tab 2  |  Tab 3  |
+------------+--------+---------+---------+
|  Some text and tables                   |
|                                         |
+-----------------------------------------+
+------------+--------+---------+---------+
| Panel 2    | *TAB1* |  Tab 2  |  Tab 3  |
+------------+--------+---------+---------+
|  Some other text and tables             |
|                                         |
+-----------------------------------------+

通过点击不同的标签，你会在面板中看到不同的信息。

你可以通过点击面板1的不同选项卡来改变面板1中的信息，但是当你点击面板2的选项卡时，它不是面板2的信息改变，而是面板1的!

我该怎么做才能使面板1的选项卡改变面板1的信息和面板2的选项卡改变面板2的信息?

在asp.net中继器中使用引导选项卡

这里的问题是id在每行重复相同，您需要在每行更改为不同的id。

为了做到这一点，我在后面的代码中使用了一个公共整数: 
public int cLine = 0;

，并在repeater上使用它将其添加到id中，并在每一行增加它:

<asp:Repeater ID="myRepeater" runat="server">
    <ItemTemplate>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h1>
                    <asp:Label ID="lbHeader" runat="server"></asp:Label>
                </h1>
                <ul class="nav nav-tabs" role="tablist" id="myTab<%=cLine%>">
                    <li class="active"><a href="#tab1<%=cLine%>" role="tab" data-toggle="tab">Tab1</a></li>
                    <li               ><a href="#tab2<%=cLine%>" role="tab" data-toggle="tab">Tab2</a></li>
                    <li               ><a href="#tab3<%=cLine%>" role="tab" data-toggle="tab">Tab3</a></li>
                </ul>
            </div>
            <div class="panel-body">
                <div class="tab-content">
                    <div class="tab-pane fade in active" id="tab1<%=cLine%>">
                        <%--Tables and stuff--%>
                    </div>
                    <div class="tab-pane fade" id="tab2<%=cLine%>">
                        Some text
                    </div>
                    <div class="tab-pane fade" id="tab3<%=cLine%>">
                        Some other text
                    </div>
                </div>
            </div>
        </div>
        <%cLine++;%>
    </ItemTemplate>
</asp:Repeater>

在渲染的html部分，你看到这个代码tab1<%=cLine%>渲染为tab10, tab11, tab12等

相关文章：