Drag Row between GridViews and save in Database using jQuery AJAX in ASP.Net

Hi jerryhien,

I have created a sample which fullfill your requirement.

HTML

<div>
    <asp:GridView ID="gvSource" runat="server" CssClass="drag_drop_grid GridSrc" AutoGenerateColumns="false">
        <Columns>
            <asp:BoundField DataField="Name" HeaderText="Name" />
            <asp:BoundField DataField="Price" HeaderText="Price" />
        </Columns>
    </asp:GridView>
    <hr />
    <asp:GridView ID="gvDest" runat="server" CssClass="drag_drop_grid GridDest" AutoGenerateColumns="false">
        <Columns>
            <asp:BoundField DataField="Name" HeaderText="Name" />
            <asp:BoundField DataField="Price" HeaderText="Price" />
        </Columns>
    </asp:GridView>
</div>
<div>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script>
    <link rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />
    <script type="text/javascript">
        $(function () {
            $(".drag_drop_grid").sortable({
                items: 'tr:not(tr:first-child)',
                cursor: 'crosshair',
                connectWith: '.drag_drop_grid',
                axis: 'y',
                dropOnEmpty: true,
                receive: function (e, ui) {
                    $(this).find("tbody").append(ui.item);
                    var product = {};
                    if (ui.sender[0].id == "gvSource") {
                        product.Item = $("[id*=gvDest] tr:last").find("td:nth-child(1)").html();
                        product.Price = $("[id*=gvDest] tr:last").find("td:nth-child(2)").html();
                        product.selectedGrid = ui.sender[0].id;
                    }
                    else {
                        product.Item = $("[id*=gvSource] tr:last").find("td:nth-child(1)").html();
                        product.Price = $("[id*=gvSource] tr:last").find("td:nth-child(2)").html();
                        product.selectedGrid = ui.sender[0].id;
                    }
                    $.ajax({
                        type: "POST",
                        url: "Default.aspx/SaveProduct",
                        data: '{product: ' + JSON.stringify(product) + '}',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (response) {
                            alert("Product Added and Deleted Successfully.");
                        }
                    });
                    return false;
                }
            });
            $("[id*=gvDest] tr:not(tr:first-child)").remove();
        });
    </script>
    <style type="text/css">
        .GridSrc td
        {
            background-color: #A1DCF2;
            color: black;
            font-size: 10pt;
            font-family: Arial;
            line-height: 200%;
            cursor: pointer;
            width: 100px;
        }
        .GridSrc th
        {
            background-color: #3AC0F2;
            color: White;
            font-family: Arial;
            font-size: 10pt;
            line-height: 200%;
            width: 100px;
        }
        .GridDest td
        {
            background-color: #eee !important;
            color: black;
            font-family: Arial;
            font-size: 10pt;
            line-height: 200%;
            cursor: pointer;
            width: 100px;
        }
        .GridDest th
        {
            background-color: #6C6C6C !important;
            color: White;
            font-family: Arial;
            font-size: 10pt;
            line-height: 200%;
            width: 100px;
        }
    </style>
</div>

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        BindGrid();
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Name"), new DataColumn("Price") });
        dt.Rows.Add();
        gvDest.DataSource = dt;
        gvDest.DataBind();
    }
}

[WebMethod]
public static void SaveProduct(Product product)
{
    string query = string.Empty;
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        if (product.selectedGrid.ToUpper() == "gvSource".ToUpper())
        {
            query = "INSERT INTO Product VALUES(@Item, @Price);DELETE FROM Products WHERE Name= @Item AND Price = @Price";
        }
        else
        {
            query = "INSERT INTO Products VALUES(@Item, @Price);DELETE FROM Product WHERE Name= @Item AND Price = @Price";
        }
        using (SqlCommand cmd = new SqlCommand(query))
        {
            cmd.CommandType = CommandType.Text;
            cmd.Parameters.AddWithValue("@Item", product.Item);
            cmd.Parameters.AddWithValue("@Price", product.Price);
            cmd.Connection = con;
            con.Open();
            cmd.ExecuteNonQuery();
            con.Close();
        }
    }
}

public class Product
{
    public string Item { get; set; }
    public string Price { get; set; }
    public string selectedGrid { get; set; }
}

public void BindGrid()
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT Name,Price FROM Products"))
        {
            cmd.CommandType = CommandType.Text;
            cmd.Connection = con;
            con.Open();
            SqlDataAdapter sda = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            sda.Fill(dt);
            gvSource.UseAccessibleHeader = true;
            gvSource.DataSource = dt;
            gvSource.DataBind();
            con.Close();
        }
    }
}

Screenshot