当使用"后退"按钮时,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的class属性,希望这会更新服务器上的页面,所以当用户返回时,它们的最后启用的Div仍然会被启用(无论在第一次访问该页面时启用了哪一个).

我相信这涉及到ViewState,但我不确定为什么没有保存class属性,因此当用户返回到页面时它将被恢复.有没有我在这里缺少的东西,或者一些简单的方法来保证我想要的行为？谢谢!

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

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)

补充更新:过去几天我一直在与这个问题作斗争.我有点能够使用以下代码(在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的类.这是一个相当大的黑客,但在所有浏览器中100%工作,只需要大约10行JavaScript.

Answer 1

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