记住刷新 ASPX 页面时的活动选项卡答案

【问题标题】：Remembering active tab on refresh of ASPX page记住刷新 ASPX 页面时的活动选项卡
【发布时间】：2011-02-27 15:04:03
【问题描述】：

我设置了一个 ASPX 页面，该页面可以加载和显示来自本地 SQLite 数据库的动态数据。由于数据是从单独的 C# 应用程序写入数据库的，因此我将 ASPX 页面设置为在数据库将自身标记为主动接收新数据时每 30 秒刷新一次。

在我的 ASPX 页面上，我有一个 TabContainer，其中包含几个不同的 TabPanel，每个 TabPanel 代表不同的数据视图。现在，当我的页面被刷新时，活动标签面板被重置为我的 ASPX 页面中设置的一个作为 ActiveTabIndex。

我想知道是否有一种简单的方法可以持久保存正在记住的选项卡。

谢谢！

编辑添加代码示例

MyPage.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPageFile.master" AutoEventWireup="true" CodeFile="MyPage.aspx.cs" Inherits="MyPage" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="content" Runat="Server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager" runat="server" />
    <asp:TabContainer ID="tabContainer" runat="server" ActiveTabIndex="1" CssClass="myTabStyle" Visible="true">
        <asp:TabPanel ID="tab1" runat="server" HeaderText="Tab 1">
            <ContentTemplate>
                <p>Hello</p>
            </ContentTemplate>
        </asp:TabPanel>
        <asp:TabPanel ID="tab2" runat="server" HeaderText="Tab 2">
            <ContentTemplate>
                <asp:PlaceHolder ID="tab2placeholder" runat="server" />
            </ContentTemplate>
        </asp:TabPanel>
        <asp:TabPanel ID="tab3" runat="server" HeaderText="Tab 3">
            <ContentTemplate>
                <asp:TabContainer ID="tab3content" runat="server" ActiveTabIndex="0" CssClass="myTabeStyle" />
            </ContentTemplate>
        </asp:TabPanel>
        <asp:TabPanel ID="tab4" runat="server" HeaderText="Tab 4">
            <ContentTemplate>
                <p>Blah.</p>
            </ContentTemplate>
        </asp:TabPanel>
    </asp:TabContainer>
</asp:Content>

MyPage.aspx.cs

public partial class MyPage : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        ...
        if (isInProgress)
        {
            Response.AddHeader("Refresh", "30");
        }

        LoadTab1();
        LoadTab2();
        LoadTab3();
        LoadTab4();
        ...
    }
}

【问题讨论】：

标签： asp.net ajaxcontroltoolkit refresh tabcontainer

【解决方案1】：

尝试将 UpdatePanels 放入 TabPanels 中。如果您发布 ASPX 的代码示例，它会更容易提供帮助。

【讨论】：

我添加了一些代码。我不确定更新面板如何对此有所帮助？ TabContainer 不是已经使用更新面板来实现选项卡功能了吗？或者您是否建议我应该在每个选项卡面板中放置一个 UpdatePanel 来定期检查新数据？我该怎么做呢？
我不确定它的选项卡功能是如何实现的，但我认为它不使用更新面板，因为选项卡更改不一定需要访问服务器，它可能只是用一些实现javascript函数。也就是说，我认为您的页面正在完全刷新而不是部分回发。尝试使用 ajax 计时器而不是刷新标头。您可能需要将 TabContainer 包装在 UpdatePanel 中以强制呈现数据。
太棒了，这很好用。我在每个 TabPanel 的 ContentTemplate 中创建了一个计时器和一个 UpdatePanel。现在唯一剩下的问题是在回发时，选项卡焦点切换到顶部（不是用户滚动的位置）。这可以很容易地解决吗？这不是一个大问题。
您可以尝试将整个 TabContainer 包装在 UpdatePanel 中，而不是每个 TabPanel 中。除此之外，我想不出任何办法。
将整个内容包装在 TabContainer 中会导致原始硬编码选项卡设置为活动状态，与 Response.Refresh 行为相同。

【解决方案2】：

如果您一直在执行完整的回发，请将其保存在您的 ASP.NET 会话中。例如

Session["ActiveTab"] = index;

然后检索它：

int? activeTab = Session["ActiveTab"] as int?;

根据我的经验，否则使用 jQuery ajax 刷新数据是比使用 UpdatePanels 更好的方法。但看起来您已经致力于 MS Ajax，所以请遵循 Mike 的建议，使用 ajax 计时器而不是刷新标头。

【讨论】：