Question

我正在使用本机引导程序选项卡，并尝试在页面刷新后保留当前选项卡的状态。这是带有标签的表单引导程序3：

<form runat="server" id="mainForm">


<div class="Tabs">


    <ul class="nav nav-tabs">
        <li runat="server" id="liSectionContractPayments" onclick="return makeActiveTab('sectionA');">
            <a data-toggle="tab" href="#sectionA">
                Heading 1
        </li>
        <li runat="server" id="liSectionTracking" onclick="return makeActiveTab('sectionB');">
            <a data-toggle="tab" href="#sectionB">
                Heading 2
        </li>
        <li runat="server" id="liSectionNotes>
            <a data-toggle="tab" href="#sectionC" onclick="return makeActiveTab('sectionC');">
                Heading 3</li>
        </ul>


        <div class="tab-content">
            <div id="sectionContractPayments" class="tab-pane fade">
                <h4>Heading 1</h4>
                Content for heading 1  
            </div>
            <div id="sectionTracking" class="tab-pane fade">                             
                <h4>Heading 2</h4>
                Content for heading 2     
            </div>
            <div id="sectionNotes" class="tab-pane fade">                             
                <h4>Heading 3</h4>     
                Content for heading 3
            </div>


        </div>    
    </div>


    <%-- This is to keep the state of current tab. --%>
    <asp:HiddenField ID="SetActiveNavTab" runat="server" />


</form>

我使用隐藏字段SetActiveNavTab来保持当前标签的状态，为此我有以下脚本：

<script>

/* Not working ... */
function activaTab2(tab) {
    $('.nav-tabs a[href="#' + tab + '"]').tab('show');
};
function makeActiveTab(activeTabName) {
    $('#<%=SetActiveNavTab.ClientID%>').val(activeTabName);
    activaTab2($('#<%=SetActiveNavTab.ClientID%>').val(activeTabName));
    alert(activeTabName + "AND" + activaTab2($('#<%=SetActiveNavTab.ClientID%>').val()););
}
/* Not working ... */


$(document).ready(function() {


    function activaTab(tab) {
        $('.nav-tabs a[href="#' + tab + '"]').tab('show');
    };

    activaTab($('#<%=SetActiveNavTab.ClientID%>').val()); 


});
</script>

不工作的部分标有注释。我似乎无法将单击的选项卡保存到SetActiveNavTab隐藏字段。脚本出了什么问题？

还不确定是否有更好的方法可以做到这一点？

Answer 1

您需要发布页面的某些部分而不是整页回发。 i-e AJAX

AJAX允许通过在幕后与服务器交换少量数据来异步更新网页。这意味着可以更新网页的各个部分，而无需重新加载整个页面。

如何运作

Working Source

ASP.NET WEB FORMS中的AJAX

在asp.net网络表单中，您需要放置更新面板

Introduction to the UpdatePanel Control

Understanding ASP.NET AJAX UpdatePanel Triggers

.NET中的Bootstrap选项卡在页面刷新后具有持久状态

1 个答案: