在从 gridview 排序事件 C# 回发时维护 Bootstrap 选项卡

Question

我在排序网格视图时发生的回发期间让 Bootstrap 选项卡持续存在时遇到了一些麻烦。

我已经尝试了 Remain bootstrap tab after postback c# and 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>

我检查了回发时隐藏字段的值，它似乎只设置为“试验”选项卡，并且页面始终默认返回到“证据库”选项卡。我也尝试删除 "active" class 但这除了在初始页面加载时不显示选项卡之外没有任何区别。

由于我的 jQuery 知识非常有限，因此我们将不胜感激。

谢谢。

Answer 1

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>

            ...

这将允许 Gridview post 返回而不刷新整个页面。这意味着 active class 将不会重新设置为初始面板。

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

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

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

Answer 2

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 3

我发现 UpdatePanels 对我编写的后端系统很有用，每个 bootstrap 3 选项卡使用一个，并使用我在下面 linked post 中描述的方法它非常适合我的网站。希望也能帮助到其他人。

我已经在 Remain bootstrap tab after postback c# 上添加了我对 OP 问题的解决方案（为简单起见不包括我的更新面板） link 上面，这是在 OP 说他们尝试了 post.

中的其他答案之后

在从 gridview 排序事件 C# 回发时维护 Bootstrap 选项卡

Maintain Bootstrap tab on postback from gridview sorting event C#

c#

asp.net

jquery

gridview

twitter-bootstrap