Question

在排序网格视图时发生的回发期间，我遇到了一些问题，导致Bootstrap标签保持不变。

我已尝试Remain bootstrap tab after postback c#和http://www.aspsnippets.com/Articles/Bootstrap-Tabs-Maintain-Selected-Active-Tab-on-PostBack-in-ASPNet.aspx中列出的解决方案无效。

我目前的代码是：

<div role="tabpanel" id="Tabs">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist" id="pageTabs">
                <li role="presentation" class="active"><a href="#EvidenceBase" aria-controls="home" role="tab" data-toggle="tab">Evidence Base</a></li>
                <li role="presentation"><a href="#Trials" aria-controls="profile" role="tab" data-toggle="tab">Trials</a></li>
                <li role="presentation"><a href="#Resources" aria-controls="messages" role="tab" data-toggle="tab">Resources</a></li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="EvidenceBase">
                    <div class="col-md-12">
                        <asp:GridView ID="EvidenceBaseGridView" runat="server" AllowPaging="true" AllowSorting="true" OnSorting="EvidenceBaseGridView_Sorting" OnPageIndexChanging="EvidenceBaseGridView_PageIndexChanging">
                        </asp:GridView>
                    </div>
                </div>

                <div role="tabpanel" class="tab-pane" id="Trials">
                    <div class="col-md-12">
                        <asp:GridView ID="TrialsGridView" runat="server" AllowPaging="true" AllowSorting="true" OnSorting="TrialsGridView_Sorting" OnPageIndexChanging="TrialsGridView_PageIndexChanging">
                        </asp:GridView>
                    </div>
                </div>

                <div role="tabpanel" class="tab-pane" id="Resources">
                    <div class="col-md-12">
                        <asp:GridView ID="ResourcesGridView" runat="server" AllowPaging="true" AllowSorting="true" OnSorting="ResourcesGridView_Sorting" OnPageIndexChanging="ResourcesGridView_PageIndexChanging">
                        </asp:GridView>
                    </div>
                </div>
            </div>
        </div>
<asp:HiddenField ID="TabName" runat="server" ClientIDMode="Static" />

我曾经尝试在回发时设置正确的选项卡的jQuery是：

<script type="text/javascript">
    $('#pageTabs').on('click', 'li a', function (e) {
        var addressValue = $(this).attr('href').replace("#", "");
        $('#TabName').val(addressValue);
    });

    $(document).ready(function () {
        var tab = $('#TabName').val() != "" ? $('#TabName').val() : "EvidenceBase";
        $('#pageTabs a[href="' + tab + '"]').tab('show');
    });
</script>

我在回发时检查了隐藏字段的值，它似乎只设置为Trials选项卡，页面始终默认返回Evidence Base选项卡。我也尝试删除“活动”类，但除了在初始页面加载时不显示选项卡之外没有任何区别。

由于我的jQuery知识非常有限，所以对此的任何帮助都将非常感激。

感谢。

Answer 1

Do not use UpdatePanels除非绝对必要。您只需在服务器端设置asp:HiddenField的值，在回发后保持其状态。设置客户端不会工作，因为它将在回发时丢失。

您可以像这样在PageIndexChanging事件本身上设置它。

protected void EvidenceBaseGridView_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
    //page index changing logic here
    TabName.Value = "EvidenceBaseGridView";
}

您可以为每个GridView执行相同的操作。此外，在触发每个事件后重新绑定GridView时，可以在Databind之后设置选项卡名称。

Answer 2

ASP回答
我的直接建议是使用updatepanels。

<asp:ScriptManager runat="server></asp:ScriptManager>


        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="EvidenceBase">
                <asp:UpdatePanel runat="server">
                    <ContentTemplate>
                         <div class="col-md-12">
                              <asp:GridView ID="EvidenceBaseGridView" runat="server" AllowPaging="true" AllowSorting="true" OnSorting="EvidenceBaseGridView_Sorting" OnPageIndexChanging="EvidenceBaseGridView_PageIndexChanging">
                            </asp:GridView>
                        </div>
                    </ContentTemplate>
               </asp:UpdatePanel>
            </div>

            ...

这将允许Gridviews回发而不刷新整个页面。这意味着active类不会重新设置为初始面板。

请注意，由UpdatePanel外部的控件引起的任何回发都会刷新整个页面，从而在面板上重新设置活动类。

另请注意，不要忘记在第一个UpdatePanel之前将脚本管理器包含在某处。

<小时/> jQuery回答 ASP.NET可能会将隐藏字段的ID更改为：ctl00_TabName。，您可能希望尝试$('[id*=TabName]')而不是$('#TabName')作为选择器。

从gridview排序事件C＃回发维护Bootstrap选项卡

2 个答案: