Класс Div не сохраняется при использовании кнопки «назад» - PullRequest
Новая
       6

Класс Div не сохраняется при использовании кнопки «назад»

6 голосов
/ 18 августа 2010

У меня есть страница 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 перед перенаправлением, надеясь, что это обновит страница на сервере, поэтому, когда пользователь вернется, его последний включенный 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. Важным кодом является последняя строка, в которой я обновляю выбранный поисковый контейнер с помощью «активного» класса поиска, а не отключенного (который я назначаю другим элементам)

Дополнительное обновление: Я боролся с этой проблемой последние пару дней. Я был в состоянии заставить следующий код работать (в 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 я проверяю, какая радио-кнопка включена, и затем корректирую классы поисковых элементов соответственно. Это довольно большой взлом, но он работает на 100% во всех браузерах и занимает всего около 10 строк JavaScript.

Ответы [ 6 ]

4 голосов
/ 18 августа 2010

Поскольку вы не отправляете сообщение назад, чтобы изменить стиль div, когда пользователь нажимает кнопку «Назад», он возвращает его к тому, как была первоначально размещена страница.Самый простой способ исправить это - заставить кнопку вызывать обратную передачу, которая переключает стиль.

3 голосов
/ 20 августа 2010

Сохраните настройку в файле cookie на стороне клиента, затем проверьте файл cookie с помощью JavaScript при загрузке страницы и измените класс CSS. Другие способы исправления могут не работать, поскольку страница не всегда запрашивается с сервера, когда пользователь нажимает кнопку Back.

с помощью плагина jQuery cookie 

// 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();}):
1 голос
/ 26 августа 2010

Это можно решить одним из двух способов.

Если каждая форма поиска отправляет свой URL-адрес, то для каждого URL-адреса должна быть установлена ​​переменная сеанса, называемая, например, «LastSearchMethd», либо «A», либо «B». Если они оба публикуют по одному и тому же URL-адресу, просто включите скрытое поле, содержащее «A» или «B» для каждой формы соответственно, и сохраните переданное значение в переменной сеанса.

В любом случае, вам необходимо отобразить стиль каждого DIV, в зависимости от значения переменной сеанса.

Как упоминалось другими авторами, правильное кэширование также будет рассматриваться.

1 голос
/ 20 августа 2010

Как уже упоминалось в моем предыдущем ответе, вы можете получить все, что вам нужно, используя переменные сеанса.Поскольку вы упомянули о сохранении выбора 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);

в вашей Page_load и получить те же функции

Я знаю, есть ли у вас какие-либо особые опасения по поводу реализации этого.

1 голос
/ 18 августа 2010

Я не думаю, что ViewState является проблемой здесь; это может быть чем-то, что требует управления в коде JavaScript на стороне клиента, поскольку переключение состояний на клиенте не отражается автоматически на сервере ...

Что вы хотите посмотреть потенциально, это управление историей браузера через функцию точек истории: http://msdn.microsoft.com/en-us/library/cc488548.aspx

НТН.

0 голосов
/ 18 августа 2010

Вы можете сохранить идентификатор div, для которого в настоящее время задан класс 'SearchDiv', в переменной SESSION перед выполнением перенаправления в кнопке поиска, во время загрузки страницы поиска получите div и установите для него соответствующий класс.Таким образом, вы можете продолжать использовать свой javascript для переключения классов на div и сохранять только данные перед перенаправлением на другую страницу и избегать ненужных постов

...