在ASP.Net MVC 5中使用DataTables行重新排序来更新值

本文关键字：新排序 排序 更新 MVC Net ASP DataTables | 更新日期: 2023-09-27 18:20:12

我需要通过datatables（www.datatables.net）中的行重新排序功能更新数据库内的OrderIndex值。

我已经在谷歌上搜索过了，我找到了这篇文章。我遵循了所有的步骤，但无济于事。

如果你需要更多信息，请告诉我。谢谢

ViewModel

public class GenderDDUpdateOrderIndexViewModel
    {
      public int Id { get; set; }
      public int OrderIndex { get; set; }
    }

控制器

public async Task<ActionResult> UpdateRowIndex(GenderDDUpdateOrderIndexViewModel model, int? Id, int? fromPosition, int toPosition, string direction)
 {
   using (var ctx = new ApplicationIdentityDbContext())
      {                         
        if (direction == "back")
          {
            var GenderList = ctx.GenderDD
                       .Where(c => (toPosition <= c.OrderIndex && c.OrderIndex <= fromPosition))
                       .ToList();
              foreach (var gender in GenderList)
                  {
                   gender.OrderIndex++;
                  }
                }
                else
                {
            var GenderList = ctx.GenderDD
                       .Where(c => (fromPosition <= c.OrderIndex && c.OrderIndex <= toPosition))
                       .ToList();
               foreach (var gender in GenderList)
                  {
                   gender.OrderIndex--;
                  }
                }
         ctx.GenderDD.First(c => c.Id == Id).OrderIndex = toPosition;
         await ctx.SaveChangesAsync();
     }
         return View();
     }

数据表初始化

 <script>
        $(document).ready(function() {
            var table = $('#GenderIndex').DataTable({
                "paging": true,
                "pagingType": "full_numbers",
                rowReorder: {
                 snapX: 10  
                }
            });         
       });
</script>

在ASP.Net MVC 5中使用DataTables行重新排序来更新值

上面提到的插件不会工作，因为它非常旧。您可以方便地使用DataTables RowReorder扩展。您不需要编写这么长的操作方法，因为最新版本的DataTables不支持其中的许多参数。

控制器

public void UpdateRow(GenderDDUpdateOrderIndexViewModel model, int Id, int fromPosition, int toPosition)
        {
            using (var ctx = new ApplicationIdentityDbContext())
            {
               var GenderList = ctx.GenderDD.ToList();
               ctx.GenderDD.First(c => c.OrderIndex == Id).OrderIndex = toPosition;
               ctx.SaveChanges();
            }
        }

jQuery

<script type="text/javascript">
        var table = $('#GenderIndex').DataTable({
            rowReorder: true,
              "paging": true,
              "pagingType": "full_numbers",
              fixedHeader: true,
              select: false,
              "order": [[0, "asc"]],
              "info": true,
              "processing": false,
              "responsive": true,
              "searching": true,
              "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
              "language": {
                  "lengthMenu": "_MENU_",
                  "zeroRecords": "No records found",
                  "infoEmpty": "No records found",
                  "infoFiltered": "(filtered from _MAX_ total records)"
              },
              "columnDefs": [
                  { "orderable": false, "targets": 8 }
              ]
        });
        $('#GenderIndex').on('row-reorder.dt', function (dragEvent, data, nodes) {
            for (var i = 0, ien = data.length ; i < ien ; i++) {
                var rowData = table.row(data[i].node).data();
                $.ajax({
                    type: "GET",
                    cache: false,
                    contentType: "application/json; charset=utf-8",
                    url: '/GenderDD/UpdateRow',
                    data: { Id: rowData[0], fromPosition: data[i].oldData, toPosition: data[i].newData },
                    dataType: "json"
                });
                }
        });
   </script>
相关文章：