Category >
ASP.NET
|| Published on :
Wednesday, October 11, 2017 || Views:
10210
||
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