How to Implement Reorder List (Drag and Drop) using jQuery in ASP.Net

Category > ASP.NET || Published on : Wednesday, October 11, 2017 || Views: 9460 || Implement Reorder List (Drag and Drop) using jQuery in ASP.Net


Introduction

Here Pawan Kumar will explain how to Implement Reorder List (Drag and Drop) using jQuery in ASP.Net

Description

In previous post I have explained Calculator in Winform DotNet using C Sharp, Swapping of two numbers without using third variable using dotnet with c sharp, How to do Client Side OnCheckChanged event for ASP.Net CheckBox using JavaScript, ASP.Net: Call JavaScript function when RadioButton is checked or unchecked, How to Call JavaScript function when CheckBoxList is clicked (checked or unchecked) in ASP.NET, jQuery: Call function when CheckBox is checked or unchecked, and many more articles.

Now I will explain How to How to Implement Reorder List (Drag and Drop) using jQuery in ASP.Net

So follow the steps to learn How to Implement Reorder List (Drag and Drop) using jQuery in ASP.Net

Step 1: Create a New DB in SQL Server with following structure

USE [master]
GO
/****** Object:  Database [db]    Script Date: 11/10/17 4:09:50 PM ******/
CREATE DATABASE [db]
 CONTAINMENT = NONE
 ON  PRIMARY 
( NAME = N'db', FILENAME = N'C:\Program Files\Microsoft SQL Server\MSSQL11.MSSQLSERVER\MSSQL\DATA\db.mdf' , SIZE = 3072KB , MAXSIZE = UNLIMITED, FILEGROWTH = 1024KB )
 LOG ON 
( NAME = N'db_log', FILENAME = N'C:\Program Files\Microsoft SQL Server\MSSQL11.MSSQLSERVER\MSSQL\DATA\db_log.ldf' , SIZE = 1024KB , MAXSIZE = 2048GB , FILEGROWTH = 10%)
GO
ALTER DATABASE [db] SET COMPATIBILITY_LEVEL = 110
GO
IF (1 = FULLTEXTSERVICEPROPERTY('IsFullTextInstalled'))
begin
EXEC [db].[dbo].[sp_fulltext_database] @action = 'enable'
end
GO
ALTER DATABASE [db] SET ANSI_NULL_DEFAULT OFF 
GO
ALTER DATABASE [db] SET ANSI_NULLS OFF 
GO
ALTER DATABASE [db] SET ANSI_PADDING OFF 
GO
ALTER DATABASE [db] SET ANSI_WARNINGS OFF 
GO
ALTER DATABASE [db] SET ARITHABORT OFF 
GO
ALTER DATABASE [db] SET AUTO_CLOSE OFF 
GO
ALTER DATABASE [db] SET AUTO_CREATE_STATISTICS ON 
GO
ALTER DATABASE [db] SET AUTO_SHRINK OFF 
GO
ALTER DATABASE [db] SET AUTO_UPDATE_STATISTICS ON 
GO
ALTER DATABASE [db] SET CURSOR_CLOSE_ON_COMMIT OFF 
GO
ALTER DATABASE [db] SET CURSOR_DEFAULT  GLOBAL 
GO
ALTER DATABASE [db] SET CONCAT_NULL_YIELDS_NULL OFF 
GO
ALTER DATABASE [db] SET NUMERIC_ROUNDABORT OFF 
GO
ALTER DATABASE [db] SET QUOTED_IDENTIFIER OFF 
GO
ALTER DATABASE [db] SET RECURSIVE_TRIGGERS OFF 
GO
ALTER DATABASE [db] SET  DISABLE_BROKER 
GO
ALTER DATABASE [db] SET AUTO_UPDATE_STATISTICS_ASYNC OFF 
GO
ALTER DATABASE [db] SET DATE_CORRELATION_OPTIMIZATION OFF 
GO
ALTER DATABASE [db] SET TRUSTWORTHY OFF 
GO
ALTER DATABASE [db] SET ALLOW_SNAPSHOT_ISOLATION OFF 
GO
ALTER DATABASE [db] SET PARAMETERIZATION SIMPLE 
GO
ALTER DATABASE [db] SET READ_COMMITTED_SNAPSHOT OFF 
GO
ALTER DATABASE [db] SET HONOR_BROKER_PRIORITY OFF 
GO
ALTER DATABASE [db] SET RECOVERY FULL 
GO
ALTER DATABASE [db] SET  MULTI_USER 
GO
ALTER DATABASE [db] SET PAGE_VERIFY CHECKSUM  
GO
ALTER DATABASE [db] SET DB_CHAINING OFF 
GO
ALTER DATABASE [db] SET FILESTREAM( NON_TRANSACTED_ACCESS = OFF ) 
GO
ALTER DATABASE [db] SET TARGET_RECOVERY_TIME = 0 SECONDS 
GO
USE [db]
GO
/****** Object:  Table [dbo].[SubjectTable]    Script Date: 11/10/17 4:09:50 PM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[SubjectTable](
	[Id] [bigint] IDENTITY(1,1) NOT NULL,
	[Subject] [varchar](50) NOT NULL,
	[Preference] [bigint] NOT NULL,
 CONSTRAINT [PK_ClassTable] PRIMARY KEY CLUSTERED 
(
	[Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

GO
SET ANSI_PADDING OFF
GO
SET IDENTITY_INSERT [dbo].[SubjectTable] ON 

GO
INSERT [dbo].[SubjectTable] ([Id], [Subject], [Preference]) VALUES (2, N'english', 1)
GO
INSERT [dbo].[SubjectTable] ([Id], [Subject], [Preference]) VALUES (3, N'maths', 5)
GO
INSERT [dbo].[SubjectTable] ([Id], [Subject], [Preference]) VALUES (4, N'GK', 3)
GO
INSERT [dbo].[SubjectTable] ([Id], [Subject], [Preference]) VALUES (5, N'sanskrit', 2)
GO
INSERT [dbo].[SubjectTable] ([Id], [Subject], [Preference]) VALUES (6, N'Economics', 4)
GO
SET IDENTITY_INSERT [dbo].[SubjectTable] OFF
GO
USE [master]
GO
ALTER DATABASE [db] SET  READ_WRITE 
GO

Step 2: Create a new asp.net website and paste the following source codes.

ASPX Codes

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CS.aspx.cs" Inherits="CS" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        table
        {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }
        table th
        {
            background-color: #F7F7F7;
            color: #333;
            font-weight: bold;
        }
        table th, table td
        {
            padding: 5px;
            border: 1px solid #ccc;
        }
        .selected
        {
            background-color: #666;
            color: #fff;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:GridView ID="gvSubjects" runat="server" AutoGenerateColumns="false">
        <Columns>
            <asp:TemplateField HeaderText="Id" ItemStyle-Width="30">
                <ItemTemplate>
                    <%# Eval("Id") %>
                    <input type="hidden" name="SubjectsId" value='<%# Eval("Id") %>' />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:BoundField DataField="Subject" HeaderText="Subject" 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" />
    <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*=gvSubjects]").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>
    </form>
</body>
</html>

Code Behind

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Linq;
using System.Configuration;
using System.Data.SqlClient;

public partial class CS : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            this.BindGrid();
        }
    }

    private void BindGrid()
    {
        string query = "SELECT Id, Subject, Preference FROM SubjectTable 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);
                        gvSubjects.DataSource = dt;
                        gvSubjects.DataBind();
                    }
                }
            }
        }
    }

    protected void UpdatePreference(object sender, EventArgs e)
    {
        int[] locationIds = (from p in Request.Form["SubjectsId"].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 SubjectTable 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();
                }
            }
        }
    }
}

Step 3: Run the project by pressing F5

 

Conclusion:

So, In this tutorial we have learned, How to Implement Reorder List (Drag and Drop) using jQuery in ASP.Net