Let's imagine we have a single database table named "Tasks" that has [ID, Name, Priority].
I would like to know the best and smoothest way to display a grid on an MVC3 site that allows the user to drag a row (up and down) without refreshing the entire page ...and automatically updating the Tasks table Priority value on the database.
Again, ideally we do not want the page to refresh entirely when dragging the rows.
You can use the jQuery ui sortable plugin and then tie into the drop handler callback to get the new order of you table rows and then do jQuery ajax call with .ajax() to call an action on your server to save down the new order to your database
$( "table" ).sortable({
update: function(event, ui) {
//get all of your data from your rows into an array of objects something like:
var data = $("table tr").map(function(i, e) {
return {id: $(e).get(0).text(), name: $(e).get(1).text(), priority: i};
});
$.ajax({
url: //your controller action url,
type: "POST",
data: data,
dataType: "json"
});
}
});
I have not checked this on jsfiddle to make sure it is void of syntax errors but this should give you a good idea of how to implement the client side.
Your controller action should take a list of TasksViewModels (i.e. IList<Tasks>) with those properties in the ajax data as properties of your viewmodel so the default model binding works.
