Hi there,
The Bootstrap (V4.1.1) structure I am using is as follows:
<asp:UpdatePanel ID="UpdPnelTabs" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified" role="tablist">
<li class="nav-item">
<asp:LinkButton ID="lkTab01" runat="server" CssClass="nav-link active" role="tab" data-toggle="tab" href="#panel01" OnClientClick="document.getElementById('HDBtnTab01').click();">Obs.</asp:LinkButton>
</li>
<li class="nav-item">
<asp:LinkButton ID="lkTab02" runat="server" CssClass="nav-link" role="tab" data-toggle="tab" href="#panel02" OnClientClick="document.getElementById('HDBtnTab02').click();">Com</asp:LinkButton>
</li>
</ul>
</ContentTemplate>
</asp:UpdatePanel>
<!-- Tab panels -->
<asp:UpdatePanel ID="UpdPnelTabsContent" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<div class="tab-content" style="margin-top:-16px;">
<div class="tab-pane fade in show active" id="panel01" role="tabpanel">
<asp:Button ID="HDBtnTab01" runat="server" style="display:none;" OnClick="HDBtnTab01_Click"/>
<br>
<asp:UpdatePanel ID="UpdPnel01" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional" class="row">
<Triggers> <asp:AsyncPostBackTrigger ControlID="HDBtnTab01" EventName="Click" /> </Triggers>
<ContentTemplate>
<asp:TextBox ID="txObs" runat="server" CssClass="form-control" TextMode="MultiLine" Rows="4" style="resize:none;"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="tab-pane fade" id="panel02" role="tabpanel">
<asp:Button ID="HDBtnTab02" runat="server" style="display:none;" OnClick="HDBtnTab02_Click"/>
<br>
<asp:UpdatePanel ID="UpdPnel02" runat="server" UpdateMode="Conditional">
<Triggers> <asp:AsyncPostBackTrigger ControlID="HDBtnTab02" EventName="Click" /> </Triggers>
<ContentTemplate>
<asp:Label ID="LbCom" runat="server" CssClass="form-control"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
This set up allows me to apply bootstrap client-side behavior to handle tab navigation, while the hidden buttons enable me to invoke the required code behind.
Keep in mind:
That code example
is not server-side built; but I link tabs linkbuttons to tabcontent hidden buttons from code behind, i.e. assign their OnClientClick attributes.
Moreover, I also have to handled their active status from code behind by changing their class from "nav-link active" to "nav-link" as needed.
I must do this because in my case I decided to set ClientIdMode = "Static", which messes (in my case) with the natural behavior of bootstrap, ajax updatepanel, and so on.
If you work in automatic clientID mode, you should not need to worry about manually setting nav-items linkbuttons classes.
Hope this helps.
Cheers!