Веб-формы asp.net и jquery: как сохранить/восстановить состояние jquery между обратными передачами?

Обычно я сохраняю такие вещи, как состояние меню или фильтр (набор входных данных в div), видимость и т. д. на стороне сервера в сеансе через AJAX. Когда меню раскрывается или отображается фильтр, обработчик кликов запускает событие AJAX для веб-службы, которая записывает состояние меню или фильтрует видимость в сеансе пользователя. При обратной передаче я использую переменные сеанса, соответствующие каждому меню/фильтру, чтобы установить его начальное состояние с помощью CSS. Я считаю, что это удобнее для пользователя, поскольку страница не мигает при обновлении с помощью javascript после загрузки, если вы вносите изменения на стороне клиента.

Пример - пока я в дороге, это не настоящий код из проекта и может быть неполным. Использует jQuery. URL-адрес веб-службы будет зависеть от того, как вы реализуете веб-службы. Я использую ASP.NET MVC (в основном), поэтому у меня будет действие контроллера.

<script type='text/javascript'>
    $(document).ready( function() {
       $('#searchFilter').click( function()  {
           var filter = $(this);
           var filterName = filter.attr('id');
           var nowVisible = filter.css('display') === 'none';
           if (nowVisible) {
              filter.show();
           }
           else {
              filter.hide();
           }
           $.post('/controller/SetFilterVisibility',
                  { name: filterName, visibility: nowVisible } );
       });
    });
</script>


<div id='searchFilter' <%= ViewData["searchFilterVisibility"] %> >
    ...
</div>

Серверный код

[AcceptVerbs( HttpVerbs.POST )]
[Authorization]
public ActionResult SetFilterVisibility( string name, bool visible )
{
    Session[name] = visible;
    return Content( string.Empty );  // not used... 
}

[AcceptVerbs( HttpVerbs.GET )]
[Authorization]
public ActionResult SomeAction( int id )
{
    ...
    ViewData["searchFilterVisibility"] = Session["searchFilter"];
    ...
    return View();
}

Я думаю, вы имеете в виду сохранение состояния виджетов пользовательского интерфейса между обратными передачами (а не сохранение пользовательских настроек).

Многое из этого состояния применимо только к конкретному виджету, для конкретного пользователя, после определенной серии взаимодействий (например, развернуть этот узел дерева, щелкнуть эту строку сетки и т. д.). Этот материал не должен попадать в базу данных или даже в сеанс, если только для вас не важно восстановление состояния при загрузке страницы.

Все это я склонен помещать в объект или два, например:

treeState.expandedNodeId = 'foo';
gridState.selectedRowIndex = 3;

Затем я периодически сохраняю его в скрытом поле:

$('.treeState').val(Sys.Serialization.JavaScriptSerializer.serialize(treeState));

и т. д.

Значение отправляется обратно с результатом обратной передачи, и я просто deserialize его и восстанавливаю свои виджеты из сохраненных значений. Раздражает, но работает хорошо.

У вас есть два варианта:

• Файл cookie на стороне клиента
• Хранить настройки пользовательского интерфейса на стороне сервера с помощью обратной передачи или вызовов веб-методов.

Второй вариант потребует гораздо больше усилий, но позволит вам предоставить «переносимые» настройки пользовательского интерфейса, которые могут применяться для пользователя независимо от клиентской машины. Если настройки «одноразовые», я бы выбрал файлы cookie на стороне клиента.

Как работать с javascript и cookies:

http://techpatterns.com/downloads/javascript_cookies.php

Обычно я храню настройки пользовательского интерфейса на стороне сервера в базе данных с помощью обратных передач, однако, если пользователи меняют свой пользовательский интерфейс с помощью jQuery, и вы хотите сохранить эти изменения, я бы, вероятно, поступил примерно так:

• добавьте диспетчер сценариев на свою страницу aspx
• установить EnablePageMethods="true"
• создайте WebMethod в отделенном коде
• в ваших методах jQuery, которые обновляют пользовательский интерфейс, добавьте вызов к вашему WebMethod и верните настройку пользовательского интерфейса
• хранить любые настройки, переданные в WebMethod, в базе данных
• затем, когда пользователь посещает страницу в следующий раз, либо извлеките настройки и заполните как можно больше элементов управления на стороне сервера, либо используйте готовый метод jQuery для вызова другого веб-метода, который извлекает настройки пользовательского интерфейса из базы данных, передает их вернуться к jQuery, позволяющему заполнить элементы управления.

Вот достойная статья о вызовах jQuery и WebMethod:

http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/

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

Я использую хранилище HTML5, вы можете выбрать способ сохранения (локальное хранилище или сеанс браузера). Если вас беспокоит не HTML5, вы можете использовать Amplify.Storage. Недостатком является то, что вам нужно написать код для вызова сохранения/чтения. Я ищу способ автоматизировать это, если у кого-то есть какие-либо идеи, пожалуйста, скажите. Спасибо.