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

Question

我在Bootstrap上使用了标签:在这个例子中,我有4个标签,并在其中使用一些ASP.NET WebControl,如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 webcontrol.因此,没有为标签容器维护状态.但在回发中,整个更新面板内容将替换为来自服务器的新内容.这就是重置选项卡设置的内容(实际上,css类"active"已从之前选择的选项卡中删除)

您必须重新考虑更新面板的安排.您应该将更新面板拆分为多个较小的更新面板,而不是将整个引导程序tabcontainer包装到更新面板中.像这样:

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

通过这种方式,您可以更好地控制要更新的内容.此外,在回发时,您的标签和tabpanes不会重置为初始状态