javascript - 使用 'back' 按钮时 Div 的类不持久

Question

我有一个包含两个 div 的 ASP.NET 页面。两者都包含搜索字段和搜索按钮。当我第一次来到这个页面时，Div A 有类“SearchDiv”，而 Div B 有“SearchDivDisabled”。这些类会更改外观，以便用户知道他们当前启用了哪种搜索类型。

当 Div B 被点击时，JavaScript 将其类更改为“SearchDiv”，并​​将 Div A 更改为“SearchDivDisabled”。这一切就像一个魅力。我遇到的问题是，当用户更改为 Div B，单击 Div B 的搜索按钮(显然重定向到结果页面)，然后使用浏览器的后退按钮时。当他们返回到搜索页面时，Div A 再次启用，而 Div B 被禁用，即使他们上次使用的是 Div B。在搜索按钮事件处理程序中，我在重定向之前设置了 Div 的类属性，希望这会更新服务器上的页面，因此当用户返回时，他们最后启用的 Div 仍将启用(无论首次访问该页面时启用了哪个)。

我相信这涉及 ViewState，但我不确定为什么没有保存类属性，以便在用户返回页面时恢复它。有什么我在这里遗漏的东西，或者一些简单的方法来保证我想要的行为吗？谢谢!

编辑:这是按钮事件处理程序代码:

protected void RedirectToResults(int searchEnum, string resultPage)
{
    ShowContainer(searchEnum);
    Response.Redirect(resultPage + this.webParams.getAllVariablesString(null));
}

  protected void ShowContainer(int searchContainerToShow)
  {
     if (searchContainerToShow < 0 || searchContainerToShow > SearchContainers.Count || SearchContainers.Count == 0)
        return;

     //disable all search panels
     foreach (SearchContainer container in SearchContainers.Values)
     {
        container.searchDiv.Attributes.Add("class", "SearchDivDisabled");
     }

     //enable selected panel
     SearchContainers[searchContainerToShow].searchDiv.Attributes.Add("class", "SearchDiv");
  }

RedirectToResults() 是从实际的按钮事件处理程序调用的，其中包含代表所选搜索面板的枚举和结果页面 url。 SearchContainers 是一个将整数映射到搜索 Div 的字典。重要的代码是最后一行，我在其中使用“事件”搜索类更新选定的搜索容器，而不是禁用的搜索容器(我将其分配给其他 div(s))

其他更新:过去几天我一直在与这个问题作斗争。我能够使以下代码正常工作(在 page_load 中):

        Response.AppendHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // HTTP 1.1.
        Response.AppendHeader("Pragma", "no-cache"); // HTTP 1.0.
        Response.AppendHeader("Expires", "0"); // Proxies.

但这确实不是解决方案，因为正确缓存的所有其他内容都丢失了，这让我比刚开始时更糟。其他一切似乎都很好，只是导致我挣扎的 div 类。

编辑:只是想为遇到此问题的任何其他人更新此内容。虽然我相信这里有一个解决方案，可以设置页面的可缓存性以强制浏览器回发，但我无法让它在所有浏览器上 100% 工作(主要是 Firefox 让我适应，这是一个记录在案的错误)。我确实相信 cookie 解决方案会起作用，但我觉得这可能比仅仅尝试存储几个 div 的状态所需要的要复杂一些。

我最后做的是将 div 的类与其相关单选按钮的状态相关联(div 旁边有单选按钮，允许用户以更直观的方式启用搜索面板)。我注意到这些单选按钮在使用后退按钮时保留了正确的选中值，因此我可以保证它们会指示要启用的正确 div。因此，在 JavaScript 的 onload 中，我检查启用了哪个单选按钮，然后相应地调整搜索 div 的类。这是一个相当大的 hack，但在所有浏览器上 100% 有效，并且只用了大约 10 行 JavaScript。

Answer 1

因为您没有回发来更改 div 的样式，所以当用户点击后退按钮时，它会将页面返回到最初发布页面的方式。解决这个问题的简单方法是让按钮引起一个切换样式的回发。