In this article I will explain with an example, how to move GridView (Grid) rows Up and Down by clicking on Arrow Up and Down Buttons in ASP.Net MVC.
Each GridView rows contains two Buttons namely Up and Down and when Button is clicked the corresponding row is moved Up or Down respectively.
Database
I have made use of the following table HolidayLocations with the schema as follows.
![ASP.Net MVC: Moving GridView (Grid) Rows Up and Down with Arrow Button click]()
I have already inserted few records in the table.
![ASP.Net MVC: Moving GridView (Grid) Rows Up and Down with Arrow Button click]()
Note: You can download the database table SQL by clicking the download link below.
Entity Framework Model
Once the Entity Framework is configured and connected to the database table, the Model will look as shown below.
![ASP.Net MVC: Moving GridView (Grid) Rows Up and Down with Arrow Button click]()
Controller
The Controller consists of following two Action methods.
Action method for handling GET operation
Inside this Action method, the records from the HolidayLocations table are fetched using Entity Framework and returned to the View.
Note: The records are ordered by the Preference column as it is necessary when user changes its preference then the Top most preferred location must appear first.
Action method for handling POST operation
This Action method is called, when Up or Down Buttons are clicked.
This Action Method accepts two parameters.
action – It is used to determine which Button is clicked i.e. Up or Down.
rowIndex – It is used to reference the Location Id and the Preference of the clicked row.
Then, using the reference of action value i.e. up and down, the preference is incremented or decremented respectively and UpdatePreference is called to update the record in database table using Entity Framework.
Next, preference is determined for the Previous or Next row based on action value i.e. up and down and updated in the database table using Entity Framework by calling the UpdatePreference method.
Finally, RedirectToAction method is called , so that the records are refreshed.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View(this.GetHolidayLocations());
}
[HttpPost]
public ActionResult Index(string action, int rowIndex)
{
List<HolidayLocation> holidayLocations = this.GetHolidayLocations();
int locationId = holidayLocations[rowIndex].Id;
int preference = holidayLocations[rowIndex].Preference;
preference = action == "up" ? preference - 1 : preference + 1;
this.UpdatePreference(locationId, preference);
rowIndex = action == "up" ? rowIndex - 1 : rowIndex + 1;
locationId = holidayLocations[rowIndex].Id;
preference = holidayLocations[rowIndex].Preference;
preference = action == "up" ? preference + 1 : preference - 1;
this.UpdatePreference(locationId, preference);
return RedirectToAction("Index", "Home");
}
private void UpdatePreference(int locationId, int preference)
{
AjaxSamplesEntities entities = new AjaxSamplesEntities();
HolidayLocation holidayLocation = entities.HolidayLocations
.Where(x => x.Id == locationId).FirstOrDefault();
holidayLocation.Preference = preference;
entities.SaveChanges();
}
private List<HolidayLocation> GetHolidayLocations()
{
AjaxSamplesEntities entities = new AjaxSamplesEntities();
return (from location in entities.HolidayLocations.Take(10)
order by location.Preference
select location).ToList();
}
}
View
Inside the View, in the very first line the Entity Model is declared as IEnumerable which specifies that it will be available as a Collection.
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.
Inside the Form, a loop will be executed over the Model which will generate the HTML Table rows with the HolidayLocation records.
The last Table Cell consists of two HTML Anchor Links and two Hidden elements which will be used to pass the rowIndex and the action i.e. up and down when the form is submitted.
Inside the jQuery document ready event handler, the Up Button for the First row and the Down Button for the Last row are disabled.
Finally, when Up or Down Button is clicked, the rowIndex and the action is determined using jQuery and set in the respective Hidden elements and the form is submitted.
@model IEnumerable<HolidayLocation>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style type="text/css">
.button { text-decoration: none; color: #3AC0F2; font-size: 15pt; }
.disabled { color: #737373; }
</style>
</head>
<body>
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<table id="tblHolidayLocations" cellpadding="0" cellspacing="0">
<tr>
<th>Id</th>
<th style="width:150px">Location</th>
<th></th>
</tr>
@foreach (HolidayLocation location in Model)
{
<tr>
<td>@location.Id</td>
<td style="width:150px">@location.Location</td>
<td>
<a id="lnkUp" href='@Url.Action("Index","Home")' class="button" name="up">▲</a>
<a id="lnkDown" href='@Url.Action("Index","Home")' class="button" name="down">▼</a>
<input id="hfRowIndex" type="hidden" name="rowIndex" value="0" />
<input id="hfAction" type="hidden" name="action" value="" />
</td>
</tr>
}
</table>
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var trs = $('#tblHolidayLocations tr:not(":has(th)")');
$(trs).eq(0).find('#lnkUp').addClass('disabled').attr('disabled', 'disabled');
$(trs).eq(trs.length - 1).find('#lnkDown').addClass('disabled').attr('disabled', 'disabled');
$('.button').click(function () {
$('#hfRowIndex').val($(this).closest('tr').index() - 1);
$('#hfAction').val($(this).attr('name'));
document.forms[0].submit();
return false;
});
});
</script>
</body>
</html>
Screenshot
![ASP.Net MVC: Moving GridView (Grid) Rows Up and Down with Arrow Button click]()
Downloads
