Перетаскиваемые строки с использованием MVC3 C #

Question

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

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

Опять же, в идеале мы не хотим, чтобы страница полностью обновлялась при перетаскивании строк.

Answer 1

Вы можете использовать плагин jQuery ui sortable, а затем подключиться к обратному вызову обработчика отбрасывания, чтобы получить новый порядок строк вашей таблицы, а затем выполнить jQuery ajax с .ajax(), чтобы вызвать действие на вашем сервере, чтобы сохранить новыйдля вашей базы данных

$( "table" ).sortable({
   update: function(event, ui) {
       //get all of your data from your rows into an array of objects something like:
       var data = $("table tr").map(function(i, e) {
           return {id: $(e).get(0).text(), name: $(e).get(1).text(), priority: i};
       });

       $.ajax({
          url: //your controller action url,
          type: "POST",
          data: data,
          dataType: "json"
       });
   }
});

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

Ваше действие контроллера должно принимать список TasksViewModels (то есть IList<Tasks>) с этими свойствами в данных ajax в качестве свойств вашей модели представления, поэтому работает привязка модели по умолчанию.