Using Bootstrap tabs with ASP NET repeater

Question

I have an aspx page which uses a repeater to show a number of panels like so:

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

It looks something like this:

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

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

So by clicking on different tabs you'll see different information in the panels.

You can change the information in Panel 1 by clicking on Panel 1's different tabs but when you click on Panel 2's tabs it's not Panel 2's info that change but Panel 1's!

What should I do to make Panel 1's tabs change the info in Panel 1 and Panel 2's tabs change the info in Panel 2?

Answer 1

The issue here is that the id is repeated the same on each line, and you need to change that to different id on each line.

To do that I use a public integer on code behind like that:

public int cLine = 0;

and use it on repeater to add it to the id, and increase it on each new line as:

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

At the rendered html part you see this code tab1<%=cLine%> to render as tab10, tab11, tab12 etc.