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

【问题标题】：Maintain Bootstrap tab on postback from gridview sorting event C#从 gridview 排序事件 C# 在回发时维护 Bootstrap 选项卡
【发布时间】：2015-04-21 10:46:51
【问题描述】：

在排序网格视图时发生的回发期间，我在让 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>

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

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

谢谢。

【问题讨论】：

标签： c# jquery asp.net twitter-bootstrap gridview

【解决方案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 之后设置选项卡名称。

【讨论】：

【解决方案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') 作为选择器。

【讨论】：

感谢@Ben 为什么我没有想到更新面板！我遇到的一个问题是我有一个母版页，它在主要内容占位符周围有一个更新面板，这是为了停止在每个回发事件上刷新 twitter 提要脚本，有没有办法使用嵌套更新面板或将我最好有一个单独的母版页来继承这个页面？
据我所知，嵌套的 UpdatePanel 应该没有任何问题，触发回发的控件将使用它最近的父级。为了增加控制，您还可以使用 UpdatePanel 的触发器。推特提要没有在它自己的更新面板中，而不是在更新面板中包含整个内容，是否有任何理由？
推特提要在母版页上，因此它在所有从它继承的页面上都可用，我尝试将它放在它自己的更新面板中，但因为它是由推特的小部件 JS 生成的，所以它会刷新在页面上的任何事件上。在更新面板中包装我的内容占位符（仅限于网格视图和每个页面上的一些过滤控件）解决了这个刷新问题。我可以做的是将更新面板放在需要它们的每个页面上，因为该站点只有大约 10 页。尽管使用更新面板，但我现在确实可以在引导选项卡中使用网格视图。

【解决方案3】：

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

我已在Remain bootstrap tab after postback c# 上添加了我对 OP 问题的解决方案（为简单起见，不包括我的更新面板）上面的链接，这是在 OP 说他们尝试了该帖子中的其他答案之后。

【讨论】：