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?
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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments