In this article I will explain with an example, how to drag and drop and reorder HTML Table rows using jQuery UI Sortable Plugin in ASP.Net MVC Razor.
The HTML Table will be populated from database Table using Entity Framework and the order the HTML Table rows will also be saved into the database Table using Entity Framework.
Database
I have made use of the following table HolidayLocations with the schema as follows.
![Drag Drop and Reorder Table rows using jQuery in ASP.Net MVC]()
I have already inserted few records in the table.
![Drag Drop and Reorder Table rows using jQuery in ASP.Net MVC]()
Note: You can download the database table SQL by clicking the download link below.
Creating an Entity Data Model
Following is the Entity Data Model of the HolidayLocations table.
![Drag Drop and Reorder Table rows using jQuery in ASP.Net MVC]()
Controller
The Controller consists of two Action methods.
Action method for handling GET operation
Inside this Action method, the list of all Holiday Locations is fetched from the Entity Data Model and the same is returned to the View.
The Holiday Locations are sorted by the Preference field value in ascending order.
Action method for handling POST operation
This Action method handles the call made from the POST function from the View, the integer array of the LocationId are received as parameter.
First list of all Holiday Locations is fetched from the Entity Data Model and then a loop is executed and the Preference field value is updated for each Holiday Location in the order its LocationId is present in the received array of LocationId. For example, if LocationId of Goa is received first then its Preference field value will be set to 1.
Finally the Holiday Locations are sorted by the Preference field value in ascending order and returned to the View.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
HolidayLocationsEntities entities = new HolidayLocationsEntities();
return View(entities.HolidayLocations.OrderBy(p => p.Preference).ToList());
}
[HttpPost]
public ActionResult Index(int[] locationId)
{
HolidayLocationsEntities entities = new HolidayLocationsEntities();
int preference = 1;
foreach (int id in locationId)
{
var holidayLocation = entities.HolidayLocations.Find(id);
holidayLocation.Preference = preference;
entities.SaveChanges();
preference += 1;
}
return View(entities.HolidayLocations.OrderBy(p => p.Preference).ToList());
}
}
View
Inside the View, in the very first line the HolidayLocation class is declared as Model for the View.
The View consists of an HTML Form which has been created using the Html.BeginForm method with the following parameters.
ActionName – Name of the Action. In this case the name is Index.
ControllerName – Name of the Controller. In this case the name is Home.
FormMethod – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
For displaying the records, an HTML Table is used. A loop will be executed over the object of the HolidayLocation class which will generate the HTML Table rows.
Inside the jQuery document ready event handler, the jQuery UI Sortable Plugin is applied to the HTML Table.
All rows except the Header row are made draggable and the Axis is set to Y axis as the HTML Table Rows will be dragged and dropped vertically.
In order to distinctly identify a HTML Table Row being dragged, a CSS Class named selected is applied to the Row being dragged in the Start event handler and is removed in the Stop event handler.
@model List<Drag_Drop_Reorder_MVC.HolidayLocation>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function () {
$("#tblLocations").sortable({
items: 'tr:not(tr:first-child)',
cursor: 'pointer',
axis: 'y',
dropOnEmpty: false,
start: function (e, ui) {
ui.item.addClass("selected");
},
stop: function (e, ui) {
ui.item.removeClass("selected");
},
receive: function (e, ui) {
$(this).find("tbody").append(ui.item);
}
});
});
</script>
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<table id="tblLocations" cellpadding="0" cellspacing="0" border="1">
<tr>
<th>ID</th>
<th>Location</th>
<th>Preference</th>
</tr>
@foreach (HolidayLocation location in Model)
{
<tr>
<td>
@location.Id
<input type="hidden" name="LocationId" value="@location.Id"/>
</td>
<td>@location.Location</td>
<td>@location.Preference</td>
</tr>
}
</table>
<br/>
<input type="submit" value="Update Preference"/>
}
</body>
</html>
Screenshot
![Drag Drop and Reorder Table rows using jQuery in ASP.Net MVC]()
Downloads
