How to drag and drop table row in ASP.Net MVC3 using jquery without using any plugin?

Question

I am using datatable plugin in my ASP.Net MVC3 project. Here I have to implement the row reordering. I used "jQuery.dataTables.rowReordering.js" plugin to implement it. For ui its working fine, but It failed to call server side function.

<script type="text/javascript">
    $(document).ready(function () {
        $('#myDataTable').dataTable().rowReordering({sURL: "/AdminArea/UpdateOrder" });
    });
</script>

my controller code is

public ActionResult Index()
 {
   return View(db.AdminAreas.ToList());
 }

public void UpdateOrder(int id, int fromPosition, int toPosition, string direction)
{
}

View

<table id="myDataTable">
<thead>
    <tr>
        <th>
            OrderNo
        </th>        
        <th>
            SubArea
        </th>
        <th>
            Description
        </th>        

    </tr>
</thead>
 <tbody>
@{
    if (@ViewData["SubAreaForArea"] != null)
    {
        IEnumerable<GridDragAndDrop.Models.SubAreaForAdmin> subarea = ViewData["SubAreaForArea"] as IEnumerable<GridDragAndDrop.Models.SubAreaForAdmin>;

        foreach (var item in subarea)
        {
            <tr class="order">
                <td>
                    @Html.DisplayFor(modelItem =>item.OrderNo)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.SubArea)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Description)
                </td>
            </tr>
        }
    }
}
</tbody>
</table>

I could not find the problem. So Please Help me to implement row drag and drop using jquery. Also the updated order will be updated in the database.

Answer 1

You should change Updateorder function to

public void UpdateOrder(int id, string fromPosition, string toPosition, string direction)

because jQuery data table implements AJAX functionality with mime type ("text")