如何防止页面在页面索引更改时丢失选项卡选择？

Question

我正在使用 Bootstrap 来显示一些选项卡，并且在每个选项卡中我还使用了一个面板。在面板中，我放置了一个带有分页的 asp.net 4.5 GridView 控件。现在，有两件事，当我更改页面时，整个页面重绘，我失去了标签的当前位置，页面跳转到屏幕顶部。

当我访问上一个标签时，页面确实发生了变化。我已经看到很多使用 Jquery 捕获选项卡的示例，但到目前为止，还没有什么可以处理这个问题。

我的代码如下：

   <div id="tabContainer">
      <!-- Nav tabs -->
        <ul class="nav nav-tabs">
            <li class="active"><a href="#msgDate" data-toggle="tab">Message Date</a></li>
            <li><a href="#msgDateCurrency" data-toggle="tab">Message Date Currency</a></li>
        </ul>

      <!-- Tab panes -->
        <div class="tab-content">
            <div class="tab-pane active" id="msgDate">
                <div id="pnlMsgDateCurrency" class="panel panel-default">
                <!-- Default panel contents -->
                    <div class="panel-heading">
                        <div class="bs-callout bs-callout-warning"><p>select view to see more information, or search to narrow the table</p></div>                    
                    </div>
                    <div class="panel-body">
                        <div class="navbar-form navbar-right"><input type="text" class="form-control" placeholder="Search..." /></div>
                    </div>
                <!-- Table -->
                <div class="table"></div>
            </div>
            </div>

            <div class="tab-pane" id="msgDateCurrency">
                <div id="pnlDateCurrency" class="panel panel-default">
                <!-- Default panel contents -->
                    <div class="panel-heading">
                        <div class="bs-callout bs-callout-warning"><p>select view to see more information, or search to narrow the table</p></div>                    
                    </div>
                    <div class="panel-body">
                        <div class="navbar-form navbar-right"><input type="text" class="form-control" placeholder="Search..." /></div>
                    </div>
                <!-- Table -->
                <div class="table"></div>
            </div>
            </div>
          </div>
         </div>

为了清楚起见，我省略了网格，但它们位于表格部分。

那么，我如何保持在同一个选项卡上，并防止页面跳转到顶部、页面索引更改或任何回帖？

Answer 1

网格视图是跳跃的，因为当您更改页面时，它会导致回发并重新绘制整个页面。所以我认为这里需要什么。尝试使用 JavaScript 进行分页并发送 ajax 调用来检索页面数据以避免页面回发。