How to get the new GridView row order in the server side when using Drag and Drop?

Currently I am using the table Drag and Drop plugin (http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/) to achieve the drag and drop functionality in my GridView rows.

Probably, I will have to handle the Drop event and send the new row order to the server but I do not have a clue about how to do that.

Bare in mind the row order represents the priority of the records displayed in the GridView. Therefore, the new row order will be stored in the database after the Drop event.

This is the jquery code:

function load_lazyload() {
        $("#ContentPlaceHolder1_GridView").tableDnD({
            onDragClass: "GbiHighlight",
            onDrop: function (table, row) {
                var rows = table.tBodies[0].rows;
                var debugStr = "Row dropped was " + row.id + ". New order: ";
                for (var i = 0; i < rows.length; i++) {
                    debugStr += rows[i].id + " ";
                }
                $("#debugArea").html(debugStr);
            },
            onDragStart: function (table, row) {
                $("#debugArea").html("Started dragging row " + row.id);
            }
        });
}

I'd massively appreciate if someone could guide me to开发者_JAVA技巧 find a solution to this requirement.

onDrop event you can make an ajax call and send debugStr to the server to update the new row order. something like

$("#ContentPlaceHolder1_GridView").tableDnD({
  onDrop: function(table, row) {
    var rows = table.tBodies[0].rows,
        newOrder = '';
    for (var i = 0; i < rows.length; i++) {
         newOrder += rows[i].id + " ";
    }

    $.ajax({
      url: 'server_method',
      data: {
        newOrder: newOrder
      }
    });
  }
});

If required you can add success and error handlers in the ajax call.

The following post will explain with detail the answer to the question:

http://aspdotnet-example.blogspot.com/2011/10/gridview-reorder-row-drag-and-drop.html

Hope it helps!