c# - 使用 Bootstrap 回发后恢复选定的选项卡

Question

我在 Bootstrap 上使用选项卡:在这个例子中，我有 4 个选项卡并在其中使用了一些 ASP.NET WebControls，比如 DropdownLists、Buttons 和 TextBoxes。 当我选择下拉列表项或单击按钮时，以前和实际选择的选项卡状态丢失并且无法恢复。

<script src="/Scripts/bootstrap-tabs.js" type="text/javascript"></script>
<script>
   $(function(){
      $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
      // Get the name of active tab
      var activeTab = $(e.target).text(); 
      // Get the name of previous tab
      var previousTab = $(e.relatedTarget).text(); 
      $(".active-tab span").html(activeTab);
      $(".previous-tab span").html(previousTab);
   });
});
</script>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
        <asp:Panel ID="Panel1" runat="server" GroupingText="Selección Fecha">    
        <ul id="profileTabs2" class="nav nav-tabs">
                  <li><a href="#detallepagosactividad" data-toggle="tab">uno</a></li>
                  <li><a href="#detallefacturacion" data-toggle="tab">dos</a></li>
                  <li><a href="#detallefacturacion2" data-toggle="tab">tres</a></li>
                  <li><a href="#detallefacturacion3" data-toggle="tab">cuatro</a></li>
        </ul> 
        <div class="tab-content" id="myTabContent2">
              <div id="detallepagosactividad" class="tab-pane fade">
                  some text
              </div>
              <div id="detallefacturacion" class="tab-pane fade">
                  other text
              </div>
              <div id="detallefacturacion2" class="tab-pane fade">
                  <asp:Button ID="Button1" runat="server" Text="Button" />
              </div>
              <div id="detallefacturacion3" class="tab-pane fade">
                   <asp:Button ID="Button2" runat="server" Text="Button" />
              </div>
              </div>
              <hr>
                    <p class="active-tab"><strong>Active Tab</strong>: <span></span></p>
                     <p class="previous-tab"><strong>Previous Tab</strong>: <span></span></p>
              <hr>
        </asp:Panel>
        </ContentTemplate>
        </asp:UpdatePanel>

Answer 1

Bootstrap TabContainer 是一个 html 控件，而不是 asp.net web 控件。因此，不会为选项卡容器维护任何状态。但是在回发时，整个更新面板的内容都被替换为来自服务器的新内容。这就是重置您的选项卡设置的原因(实际上，CSS 类“active”已从先前选择的选项卡中删除)

您必须重新考虑您的更新面板安排。与其将整个 Bootstrap 选项卡容器包装到更新面板中，不如将更新面板分解为多个较小的面板。像这样:

    <asp:Panel ID="Panel1" runat="server" GroupingText="Selección Fecha">    
    <ul id="profileTabs2" class="nav nav-tabs">
              <li><a href="#detallepagosactividad" data-toggle="tab">uno</a></li>
              <li><a href="#detallefacturacion" data-toggle="tab">dos</a></li>
              <li><a href="#detallefacturacion2" data-toggle="tab">tres</a></li>
              <li><a href="#detallefacturacion3" data-toggle="tab">cuatro</a></li>
    </ul> 
    <div class="tab-content" id="myTabContent2">
          <div id="detallepagosactividad" class="tab-pane fade">
              <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                  some text
                </ContentTemplate>
              </asp:UpdatePanel>
          </div>
          <div id="detallefacturacion" class="tab-pane fade">
              <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                <ContentTemplate>
                  some text
                </ContentTemplate>
              </asp:UpdatePanel>
          </div>
          <div id="detallefacturacion2" class="tab-pane fade">
              <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                  <asp:Button ID="Button1" runat="server" Text="Button" />
                </ContentTemplate>
              </asp:UpdatePanel>
          </div>
          <div id="detallefacturacion3" class="tab-pane fade">
               <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                  <asp:Button ID="Button2" runat="server" Text="Button" />
                </ContentTemplate>
              </asp:UpdatePanel>
            </div>
          </div>
          <hr>
                <p class="active-tab"><strong>Active Tab</strong>: <span></span></p>
                 <p class="previous-tab"><strong>Previous Tab</strong>: <span></span></p>
          <hr>
    </asp:Panel>

通过这种方式，您可以更好地控制要更新的内容。此外，在回发时，您的选项卡和标签面板不会重置为初始状态