Drag and Drop table rows in mvc .net core , sample project with database update function

 

---------- index.chtml

@model IEnumerable<WebMvcPlusJqueryDragDropTableRows.Models.tbMvcDragDropTableRows>

@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" 
        integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" 
        crossorigin="anonymous"></script>
<script>
    $(document).ready(function () {
        $("#sortable").sortable({

        });

        @*$("#sortable").sortable({
            updatefunction (event, ui) {
                var ItemidS = ""
                $("#sortable").find(".taskSingleInLine").each(function () {
                    var itemId = $(this).attr("data-taskId");
                    ItemidS = ItemidS + itemId + ",";

                    console.log(ItemidS);

                    //alert('ItemidS -0 : ' + ItemidS);
                });
                //alert('ItemidS -1 : ' + ItemidS);
                $.ajax(
                    {


                        url: '@Url.Action("KaydetDragDrop","DragDrop")',
                        data: { ItemIDs : ItemidS },
                        type: 'POST',
                        successfunction(data)
                        {
                            //alert('1');
                        },
                        errorfunction (xhr,status,error) {
                            //alert('0');
                        }
                    });

            }


        });*@

    });

    function UpdatePosition() {
       /*  $("#sortable").sortable({*/
         /*   update: function (event, ui) {*/
                var ItemidS = ""
                $("#sortable").find(".taskSingleInLine").each(function () {
                    var itemId = $(this).attr("data-taskId");
                    ItemidS = ItemidS + itemId + ",";

                    console.log(ItemidS);

                    //alert('ItemidS -0 : ' + ItemidS);
                });
                //alert('ItemidS -1 : ' + ItemidS);
                $.ajax(
                    { 
                        url: '@Url.Action("KaydetDragDrop","DragDrop")',
                        data: { ItemIDs : ItemidS },
                        type: 'POST',
                        successfunction(data)
                        {
                            //alert('1');
                        },
                        errorfunction (xhr,status,error) {
                            //alert('0');
                        }
                    });

          /*  }*/


      /*  });*/


        alert('UpdatePosition  ');
    }
</script>
<h1>Index</h1>

<p>
 
</p>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.RowNo)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.CellNo)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody id="sortable" style="cursor:pointer">
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td class="taskSingleInLine" id="task@(item.id)" data-taskId="@(item.id)">
                    @Html.DisplayFor(modelItem => item.RowNo)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.CellNo)
                </td>
                <td>
                </td>
            </tr>


        }
    </tbody>
</table>
<a class="btn btn-primary" onclick="UpdatePosition();">Kaydet</a>


------- DragDrop controller
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using WebMvcPlusJqueryDragDropTableRows.Models;
using System.Data.SqlClient;
//using System.Web.Mvc;

namespace WebMvcPlusJqueryDragDropTableRows.Controllers
{
    public class DragDropController : Controller
    {

     
        
        private readonly MvcDragDropDbContext _context;

        public DragDropController(MvcDragDropDbContext context)
        {
            _context = context;
        }

        public IActionResult Index()
        {
            var items0 = _context.tbMvcDragDropTableRows.ToList();
            var items = items0.OrderBy(p => p.RowNo).ToList();

            return View(items );
        }

        
        public JsonResult KaydetDragDrop(string ItemIDs)
        {
            int count = 1;

            List<int> lstItms = new List<int>();
            lstItms = ItemIDs.Split(",".ToCharArray()
                , StringSplitOptions.RemoveEmptyEntries).Select(int.Parse).ToList();

            try
            {
                foreach (var itemID in lstItms)
                {
                    tbMvcDragDropTableRows dr = _context.tbMvcDragDropTableRows.Where(p => p.id == itemID).FirstOrDefault();
                    dr.RowNo = count;
                    _context.tbMvcDragDropTableRows.Update(dr);

                    _context.SaveChanges();

                    count++;
                }
            }
            catch (Exception ex)
            {
                var er = ex;
            }
            return new JsonResult(true);
        }




    }
}





 

** GitHub Pıblic:

https://github.com/doktoralban/MvcJqueryDragDropTableRows

Yorumlar