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不会重置为初始状态

Answer 2

首先使用隐藏控件存储所选标签的索引：初始值应为（1），这是第一个选项卡：

用户onclick或OnClientClick在锚点或LinkButtons上设置隐藏字段值，例如：

<li><a href="#detallepagosactividad" data-toggle="tab" onclick="SelectTab('1')">uno</a></li>
<li><a href="#detallefacturacion" data-toggle="tab" onclick="SelectTab('2')">dos</a></li>


<script type="text/javascript">
    function SelectTab(tab) {
        document.getElementById('<%=hdnTab.ClientID %>').value = tab;
    }
</script>

将此javascript放在html的末尾和＆lt;之前/体＆GT;标签

   <script type="text/javascript">
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(function (s, e) {
            FixTabs();
        });
    </script>

现在将FixTabs javascript函数放在开头，并在每个完成的回发时运行。在这个函数中，只需获取选定的选项卡并将其类设置为“活动”。

 <script type="text/javascript">
        function FixTabs() {
            var tabIndex = document.getElementById('<%=hdnTab.ClientID%>').value;
            var t1 = document.getElementById("detallepagosactividad");
            var t2 = document.getElementById("detallefacturacion");
            //do same for the rest of tabs
            t1.setAttribute('class', '');
            t2.setAttribute('class', '');
            if (tabIndex == "1")
                t1.setAttribute('class', 'active');
            else if (tabIndex == "2")
                t2.setAttribute('class', 'active');
        }
    </script>

希望这会有所帮助..

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

2 个答案: