Question

假设我们有一个名为“任务”的数据库表，其中包含 [ID，Name，Priority] 。

我想知道在MVC3网站上显示网格的最佳和最顺畅的方式，允许用户拖动一行（上下）而不刷新整个页面< / strong> ...和自动更新数据库上的Tasks表优先级值。

同样，理想情况下，我们不希望在拖动行时完全刷新页面。

Answer 1

您可以使用jQuery ui sortable插件，然后绑定到drop handler回调以获取表行的新顺序，然后使用.ajax()执行jQuery 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上检查这一点，以确保它没有语法错误，但这应该让你很好地了解如何实现客户端。

您的控制器操作应该将一个TasksViewModel列表（即IList<Tasks>）与ajax数据中的这些属性一起作为您的viewmodel的属性，以便默认的模型绑定起作用。

使用MVC3 C＃可拖动ROWS

1 个答案: