Save data when moving datarows, with drag and drop, to other rows using two gridviews?

StackOverflow https://stackoverflow.com/questions/22907434

質問

I want to use drag and drop for moving some data between two gridviews. When the user has dragged the datarow to the other gridview some data will be saved in the database at Azure. For some reason nothing really happends when I move the datarow except that it is possible to move but not save. I have posted my application at Azure right here! You can also see a print of the database there as well.

Two questions:

1) Why does not my solution work? Is there any wrong with the javascript code? 2) Why is there a bug that makes you able to move two rows to the other grid?

dragandDrop.aspx

   <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="dragandDrop.aspx.cs" Inherits="WebApplication2.dragandDrop" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Drag and drop haha</title>
      <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script>
    <script 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 = {};
                    product.Item = $("[id*=gvDest] tr:last").find("td:nth-child(1)").html();
                    product.Price = $("[id*=gvDest] tr:last").find("td:nth-child(2)").html();
                    $.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 has been added 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>
</head>
<body>

     <form id="form1" runat="server">
         <asp:Label ID="Label2" runat="server" Text="Products"></asp:Label>
    <asp:GridView ID="gvSource" runat="server" CssClass="drag_drop_grid GridSrc" AutoGenerateColumns="false">
        <Columns>
            <asp:BoundField DataField="Item" HeaderText="Item" />
            <asp:BoundField DataField="Price" HeaderText="Price" />
        </Columns>
    </asp:GridView>
    <hr /><br />
         <asp:Label ID="Label1" runat="server" Text="Shopping Cart"></asp:Label>

    <asp:GridView ID="gvDest" runat="server" CssClass="drag_drop_grid GridDest" AutoGenerateColumns="false">
        <Columns>
            <asp:BoundField DataField="Item" HeaderText="Item" />
            <asp:BoundField DataField="Price" HeaderText="Price" />
        </Columns>
    </asp:GridView>
    </form>
</body>
</html>

And is is the other part, dragandDrop.aspx.cs

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


namespace WebApplication2
{
    public partial class dragandDrop : System.Web.UI.Page
    {

        List<String> list = new List<String>();

        public class Product
        {
        public string Item { get; set; }
        public int Price { get; set; }
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            SqlConnection conn = new SqlConnection();
            conn.ConnectionString = WebConfigurationManager.ConnectionStrings["UsersConnectionString"].ConnectionString;

            DataTable dt = new DataTable();
            dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Item"), new DataColumn("Price") });

            try
            {
                conn.Open();
            }
            catch (Exception ex)
            {
                Response.Write("FAIL " + ex.Message);
                return;
            }
            SqlCommand cmd = new SqlCommand();
            cmd.Connection = conn;

            cmd.CommandText = "SELECT * FROM myProducts";
            SqlDataReader rdr = cmd.ExecuteReader();
            while (rdr.Read())
            {
                list.Add((String)rdr["Item"]);
            }


            conn.Close();


            foreach (String item in list) // Add to the dataTable.
            {
                dt.Rows.Add(item, 150);
            }

            gvSource.UseAccessibleHeader = true;
            gvSource.DataSource = dt;
            gvSource.DataBind();

            dt.Rows.Clear();
            dt.Rows.Add();
            gvDest.DataSource = dt;
            gvDest.DataBind();
        }
    }

    [WebMethod]
    [ScriptMethod]
    public static void SaveProduct(Product product)
    {

        string constr = ConfigurationManager.ConnectionStrings["UsersConnectionString"].ConnectionString;
        using (SqlConnection con = new SqlConnection(constr))
        {
            using (SqlCommand cmd = new SqlCommand("UPDATE myProducts SET TableNbr=2 WHERE Item=@Item"))
            {


                cmd.CommandType = CommandType.Text;
                cmd.Parameters.AddWithValue("@Item",product.Item);
                cmd.Connection = con;
                con.Open();
                cmd.ExecuteNonQuery();
                con.Close();
            }
        }


    }
}

}

役に立ちましたか？

解決

Just figured it out. I used a UpdatePanel around the GridView. The .Cs-class is the same. 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="dragandDrop.aspx.cs" Inherits="WebApplication2.dragandDrop" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Drag and drop haha</title>
      <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script>
    <script 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 = {};
                    product.Item = $("[id*=gvDest] tr:last").find("td:nth-child(1)").html();
                    product.Price = $("[id*=gvDest] tr:last").find("td:nth-child(2)").html();
                    $.ajax({
                        type: "POST",
                        url: "dragandDrop.aspx/SaveProduct", 
                        data: '{product: ' + JSON.stringify(product) + '}',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (response) {
                            alert("Product has been added 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>
</head>
<body>

     <form id="form1" runat="server">
         <asp:Label ID="Label2" runat="server" Text="Products"></asp:Label>
    <asp:GridView ID="gvSource" runat="server" CssClass="drag_drop_grid GridSrc" AutoGenerateColumns="false">
        <Columns>
            <asp:BoundField DataField="Item" HeaderText="Item" />
            <asp:BoundField DataField="Price" HeaderText="Price" />
        </Columns>
    </asp:GridView>
    <hr /><br />
         <asp:Label ID="Label1" runat="server" Text="Shopping Cart"></asp:Label>

         <hr />
         <asp:ScriptManager ID="ScriptManager1" runat="server">
         </asp:ScriptManager>
         <asp:UpdatePanel ID="UpdatePanel1" runat="server">
             <ContentTemplate>

                  <asp:GridView ID="gvDest" runat="server" CssClass="drag_drop_grid GridDest" AutoGenerateColumns="false">
        <Columns>
            <asp:BoundField DataField="Item" HeaderText="Item" />
            <asp:BoundField DataField="Price" HeaderText="Price" />
        </Columns>
    </asp:GridView>


                 <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
                 <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
             </ContentTemplate>
         </asp:UpdatePanel>

         <br /><hr />
          <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/Database_windows_azure_products.png" Width="500" Height="300" />

    </form>
</body>
</html>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top