Persist JS пользователь контролирует состояние - PullRequest
Новая
       27

Persist JS пользователь контролирует состояние

2 голосов
/ 19 июля 2011

Мое RIA-приложение имеет множество элементов управления js UI (почти все их части - jQuery UI, такие как datepicker, dialog, jqgrid). Итак, пользователь работает с некоторыми элементами управления на одной странице, затем переходит на другую страницу и затем щелкает обратно, все компоненты страницы имеют начальное состояние (текстовые поля пусты, сетки пусты и т. Д.). Так как же сохранить состояние элементов управления пользовательского интерфейса и затем восстановить его между страницами? Кажется, мне нужны некоторые методы, такие как JS сериализация / десериализация, хранящая сериализованные данные в сеансе пользовательского сервера. Как я могу сделать это с минимальными затратами? Как вы, ребята, это в своих проектах? Любые люди, ссылки, посты будут очень благодарны. Заранее спасибо, ребята!

P.S. Мой проект ASP .NET MVC3

EDIT

Только сейчас я вспомнил про шаблон дизайна memnto. Может ли кто-нибудь из вас посоветовать мне что-нибудь, связанное с этой идеей? Еще раз спасибо!

Ответы [ 2 ]

0 голосов
/ 08 декабря 2011

Я бы сделал это с помощью Persist-JS ( Persist-JS на GitHub ), jQuery (который вы уже используете) и json.js ( JSON-js на GitHub ) , Как то так: 

var store;
//Restore form data
$(function() {
    store = new Persist.Store('My Page Store');
    var formDataStr = store.get('formdata');
    if (formDataStr !== null) {
        var formData = eval('(' + formDataStr + ')');
        if (formData.hasData) {
            $(':input').each(function() {
                if (this.name != undefined && this.name != "") {
                    if (formData[this.name] != undefined) {
                        $(this).val(formData[this.name].value);
                    }
                }
            });
        }
    }
});

и ... 

//Persist form data
$(window).unload(function() {
    var formData = {};
    $(':input').each(function() {
        if (this.name != undefined && this.name != "") {
            formData[this.name] = {};
            formData[this.name].value = $(this).val();
        }
    });
    formData.hasData = true;
    store.set('formdata', JSON.stringify(formData));
});

Другими словами, переберите все входные данные на странице, сохраните их значение ($.val()), создайте объект JSON и сохраните его для этих значений. При восстановлении формы просто сделайте обратное - переберите входные данные и получите свойства объекта JSON с именем formData[name]. Там есть кое-что защитное (например: проверить, что постоянный объект имеет значение null, именно так работает persist-js).

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

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

Использование Viewstate не имеет ничего общего с тем, используете ли вы JQuery UI «надстройки».Все, что вам нужно сделать, это использовать серверные элементы управления вместо этого.

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

$('#<%= MyDateTextbox.ClientID %>').datepicker();

Таким образом, вы можете применить JQuery UI к серверным элементам управления и воспользоваться преимуществамиViewstate восстанавливает значение элементов управления при навигации по кнопке назад.

...