Javascript 分区'；当'；背面'；按钮被使用

我有一个ASP.NET页面，其中包含两个div。两者都有搜索字段，每个字段中都包含一个搜索按钮。当我第一次来到这个页面时，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");
  }

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

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

---

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

我不认为ViewState是这里的问题；它可能需要在客户端JavaScript代码中进行管理，因为客户端上的切换状态不会自动反映在服务器上

您可能希望看到的是通过历史记录点功能管理浏览器历史记录：

---

HTH.

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

您可以将当前设置为“SearchDiv”类的div的id存储在SES中SION变量在搜索按钮中执行重定向之前，在加载搜索页面期间，获取div并在其上设置适当的类。

---

通过这种方式，您可以继续使用javascript在div上切换类，并且只在重定向到其他页面之前保存数据，并避免不必要的post

，正如我在前面的回答中所提到的，您可以使用会话变量实现所需的所有功能。 既然您提到了持久化DIV选择，我就要求您将其包含在会话变量中。 如果您希望持久化其他表单数据，也可以将它们全部转储到会话变量中（请确保在处理完它们时将它们清理干净）

这将是满足您需求的最简单方法

您也正在使用

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.

你可以简单地使用

Response.Cache.SetCacheability(HttpCacheability.Private);

在您的页面中，加载并实现相同的功能

---

如果您在实现此功能时有任何特殊问题，请告诉我。

将设置存储在客户端的cookie中，然后在加载页面时通过JavaScript检查cookie并更改CSS类。其他解决此问题的方法可能不起作用，因为当用户点击

返回时，并不总是从服务器请求页面开

使用jQuery

这可以通过两种方式解决

如果每个搜索表单都发布到不同的URL，那么每个URL都应该将一个名为“LastSearchMethd”的会话变量设置为“a”或“B”。
如果它们都发布到同一个URL，那么只需包含一个隐藏字段，分别包含每个表单的“a”或“B”，并将提交的值保存在会话变量中

无论哪种方式，都需要根据会话变量的值呈现每个DIV的样式

正如其他海报所提到的，获得正确的缓存也是一个考虑因素。
当您使用Chrome中的“后退”按钮返回页面时，对DOM的大多数更改不会持续。（我相信这在其他浏览器中可能有所不同，因为它们实现了BFcache（back forward cache），目前正在为Chrome开发。）

然而，持久化的是输入值，如单选按钮和隐藏输入。

因此，如果您将更改存储在（隐藏的）输入中，您可以在上恢复DOM。（如果您检查Mozilla页面，对事件的支持似乎是如此，但CanIUse.com更乐观：）
正如我上面提到的，“在搜索按钮事件处理程序中，我在重定向之前设置了div的class属性，希望这会更新服务器上的页面，以便
Response.Cache.SetCacheability(HttpCacheability.Private);

// this function will update the style of the divs based on the cookie's settings
function updateClass(){
    var val = $.cookie('myCookieName');

    // set your div's class
    if (!val || val=='divA')
    {
        $('#divA').removeClass('SearchDivDisabled');
        $('#divA').addClass('SearchDiv');
        $('#divB').removeClass('SearchDiv');
        $('#divB').addClass('SearchDivDisabled');
    }else{
        $('#divB').removeClass('SearchDivDisabled');
        $('#divB').addClass('SearchDiv');
        $('#divA').removeClass('SearchDiv');
        $('#divA').addClass('SearchDivDisabled');
    }
}

// call this passing in 'divA' or 'divB' depending on which is selected
function updatePage(selectedDiv){
    $.cookie('myCookieName', selectedDiv, { path: '/', expires: 10 });
    updateClass();
}

// change the class of the divs when the page is finished rendering
$(document).ready(function(){updateClass();}):