Веб-формы asp.net и jquery: как сохранить / восстановить состояние jquery между постбэками? - PullRequest
4 голосов
/ 01 февраля 2009

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

Итак, мой вопрос: каковы наилучшие практики для сохранения и восстановления состояния jquery / UI между постбеками?

Спасибо, Эгиль.

Обновление: Большое спасибо, ребята, отличный вклад, плохому я не могу пометить более одного ответа как "ответ".

Ответы [ 4 ]

5 голосов
/ 01 февраля 2009

Я обычно храню такие вещи, как состояние меню или видимость фильтра (набора входов в 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();
}
5 голосов
/ 01 февраля 2009

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

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

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

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

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

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

и т.д.

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

4 голосов
/ 01 февраля 2009

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

  • Клиентское печенье
  • Сохранение настроек сервера на стороне сервера с помощью обратной передачи или вызовов через веб-метод

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

Как работать с JavaScript и куки:

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

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

  • добавить менеджер сценариев на страницу aspx
  • set 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; у вас возникнут проблемы, если вы получите контрольные значения вне области жизненного цикла страницы, а затем собираетесь использовать эти параметры при обратной передаче. Например, добавление значений в раскрывающийся список через веб-метод вызовет ошибку при обратной передаче, если только эти значения не были добавлены в раскрывающийся список при создании страницы.

0 голосов
/ 24 августа 2011

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...