ASP.NET MVC & JQuery UI Drag Drop - Кто-нибудь знает, как сохранить / восстановить состояние панели?

Question

Я использовал Telerik RadDock в прошлом, и, хотя он довольно хорош, он немного неуклюжий и раздутый. Приятной особенностью является возможность сохранять состояние страницы (все места для док-станции и т. Д.) В базе данных и восстанавливать их позднее.

Мне интересно, есть ли способ в MVC и jQuery сохранить состояние панелей jQuery UI Drag Drop . По сути, каждый пользователь сможет редактировать свою собственную «панель мониторинга» и размещать элементы там, где они хотят, а состояние сохраняется в SQL Server под своим профилем для дальнейшего повторного использования.

Заранее спасибо

Answer 1

Я думаю, что Peol в целом правильно.Единственный способ смоделировать поведение Telerik RadControls в этом случае - вручную отслеживать и сохранять изменения в макете Panel.В частности, для панелей вам, вероятно, понадобится:

1. Обработка события dragStop
2. . В этом событии получить информацию о текущей позиции / размере / смещении для текущей панели
3. Сохранение нового местоположения - локально в скрытом вводе или через веб-службу

Если вы сохраняете локально в скрытом поле, вы можете сохранить его на следующей странице POSTили с помощью одного сервисного вызова, когда (например) пользователь нажимает кнопку «Сохранить».

Telerik RadDock упрощает процесс, сериализуя его состояние в XML, что облегчает сохранение и загрузку, но я неНе думаю, что панели JQuery обеспечивают ту же функциональность.Возможно, это будет добавлено к Telerik Extensions для MVC в будущем ...

Answer 2

Недавно мы решили аналогичную проблему (хотя и в проекте, отличном от MVC), просто добавив атрибут данных HTML5 с идентификатором виджета, просматривая все лики, извлекая их идентификатор и передавая их в массив.Например:

Структура HTML:

<ul>
    <li data-id="1"></li>
    <li data-id="2"></li>
    <li data-id="3"></li>
    <li data-id="4"></li>
    <li data-id="5"></li>
    <li data-id="6"></li>
</ul>

jQuery (внутри обратного вызова stop):

var widgets = [];

$('li')​​​​.each(function() {
    widgets.push( this.getAttribute("data-id") );
});

WebService.UpdatePositions(widgets);

Мы сделали это при обратном вызове stop на sortable, но также должно быть применимо и здесь.

Затем WebService получает int[], который, как вы знаете, будет содержать идентификаторы в их новых позициях, используя индекс int[], в котором они находятся.