In this article I will explain with an example, how to implement Reorder List with Drag and Drop feature using jQuery in ASP.Net using C# and VB.Net.
The drag and drop ordering of Reorder List items will be performed using jQuery UI Sortable Plugin.
 
 
Database
I have made use of the following table HolidayLocations with the schema as follows.
Implement Reorder List (Drag and Drop) using jQuery in ASP.Net
I have already inserted few records in the table.
Implement Reorder List (Drag and Drop) using jQuery in ASP.Net
 
Note: You can download the database table SQL by clicking the download link below.
          Download SQL file
 
 
HTML Markup
The HTML Markup consists of an ASP.Net GridView control and a Button. The Location and Preference columns are populated using BoundField columns. While the Id column is populated using TemplateField and its value is also set to a HiddenField.
Note: The HiddenField is used to find the modified order of GridView Rows on server side.
 
<asp:GridView ID="gvLocations" runat="server" AutoGenerateColumns="false">
<Columns>
    <asp:TemplateField HeaderText="Id" ItemStyle-Width="30">
        <ItemTemplate>
            <%# Eval("Id") %>
            <input type="hidden" name="LocationId" value='<%# Eval("Id") %>' />
        </ItemTemplate>
    </asp:TemplateField>
    <asp:BoundField DataField="Location" HeaderText="Location" ItemStyle-Width="150" />
    <asp:BoundField DataField="Preference" HeaderText="Preference" ItemStyle-Width="100" />
</Columns>
</asp:GridView>
<br />
<asp:Button Text="Update Preference" runat="server" OnClick="UpdatePreference" />
 
 
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
using System.Linq;
using System.Configuration;
using System.Data.SqlClient;
 
VB.Net
Imports System.Data
Imports System.Linq
Imports System.Configuration
Imports System.Data.SqlClient
 
 
Populating the GridView
The GridView is populated with the records from the HolidayLocations table inside the Page Load event.
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        this.BindGrid();
    }
}
 
private void BindGrid()
{
    string query = "SELECT Id, Location, Preference FROM HolidayLocations ORDER BY Preference";
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(query))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.CommandType = CommandType.Text;
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                using (DataTable dt = new DataTable())
                {
                    sda.Fill(dt);
                    gvLocations.DataSource = dt;
                    gvLocations.DataBind();
                }
            }
        }
    }
}
 
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        Me.BindGrid()
    End If
End Sub
 
Private Sub BindGrid()
    Dim query As String = "SELECT Id, Location, Preference FROM HolidayLocations ORDER BY Preference"
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As New SqlConnection(constr)
        Using cmd As New SqlCommand(query)
            Using sda As New SqlDataAdapter()
                cmd.CommandType = CommandType.Text
                cmd.Connection = con
                sda.SelectCommand = cmd
                Using dt As New DataTable()
                    sda.Fill(dt)
                    gvLocations.DataSource = dt
                    gvLocations.DataBind()
                End Using
            End Using
        End Using
    End Using
End Sub
 
 
Implementing Drag and Drop Functionality using jQuery
Inside the jQuery document ready event handler, the jQuery UI Sortable Plugin is applied to the GridView.
All rows except the Header row are made draggable and the Axis is set to Y axis as the GridView Rows will be dragged and dropped vertically.
In order to distinctly identify a GridView 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.
<script type="text/javascript" src="http://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 () {
    $("[id*=gvLocations]").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>
 
 
Updating the order of GridView Rows in Database
Once the GridView Row ordering is completed, the Update Preference button allows us to save the modified Order of the GridView rows to the database.
In the HTML Markup, I have discussed about a Hidden Field storing the ID field. When the Update Preference button is clicked, the Location IDs are fetched from the Request.Form collection using the Hidden Field’s name. Request.Form collection returns the Location IDs in the order of the GridView Rows.
Now a loop is executed and the preference of each Location is updated in the database.
C#
protected void UpdatePreference(object sender, EventArgs e)
{
    int[] locationIds = (from p in Request.Form["LocationId"].Split(',')
                            select int.Parse(p)).ToArray();
    int preference = 1;
    foreach (int locationId in locationIds)
    {
        this.UpdatePreference(locationId, preference);
        preference += 1;
    }
 
    Response.Redirect(Request.Url.AbsoluteUri);
}
 
private void UpdatePreference(int locationId, int preference)
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand("UPDATE HolidayLocations SET Preference = @Preference WHERE Id = @Id"))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.CommandType = CommandType.Text;
                cmd.Parameters.AddWithValue("@Id", locationId);
                cmd.Parameters.AddWithValue("@Preference", preference);
                cmd.Connection = con;
                con.Open();
                cmd.ExecuteNonQuery();
                con.Close();
            }
        }
    }
}
 
VB.Net
Protected Sub UpdatePreference(sender As Object, e As EventArgs)
    Dim locationIds As Integer() = (From p In Request.Form("LocationId").Split(",") _
                                   Select Integer.Parse(p)).ToArray()
    Dim preference As Integer = 1
    For Each locationId As Integer In locationIds
        Me.UpdatePreference(locationId, preference)
        preference += 1
    Next
 
    Response.Redirect(Request.Url.AbsoluteUri)
End Sub
 
Private Sub UpdatePreference(locationId As Integer, preference As Integer)
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As New SqlConnection(constr)
        Using cmd As New SqlCommand("UPDATE HolidayLocations SET Preference = @Preference WHERE Id = @Id")
            Using sda As New SqlDataAdapter()
                cmd.CommandType = CommandType.Text
                cmd.Parameters.AddWithValue("@Id", locationId)
                cmd.Parameters.AddWithValue("@Preference", preference)
                cmd.Connection = con
                con.Open()
                cmd.ExecuteNonQuery()
                con.Close()
            End Using
        End Using
    End Using
End Sub
 
 
Screenshot
Implement Reorder List (Drag and Drop) using jQuery in ASP.Net
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code