Question

我需要在asp.net C＃中做一个规划应用程序，需要拖放才能将数据从一个表移动到另一个表。 2表是在后面的代码中动态生成的。每次拖放数据时，我都需要能够修改数据而不刷新页面，所以当我修改表格时，我只能在客户端工作。

我使用draggable和droppable jquery ui函数在表之间移动数据，但是当我需要将表导出到.xls中或将其保存在数据库中时，看来拖放数据不在表中即使我能在桌子上看到它们。

所以我想知道如何添加拖放到表中的数据，而不仅仅是移动div。

这是我的javascript代码：

$_dropEnd = null;

$(function () {
   $(".drag").draggable({
     helper: "clone",
     revert: 'invalid',
     stop: function (event, ui) {
         $(this).appendTo($_dropEnd);
         $_dropEnd = null;
     }
   });
   $(".drop").droppable({
     accept: ".drag",
     tolerance: "touch",
     drop: function (event, ui) {
         $_dropEnd = this; 
     }
   })
});

Answer 1

当您创建ASP.NET控件（即HTML表或ASP.NET网格视图）时，它的状态在提供给页面之前保存在服务器端，通过客户端对其进行的任何更改都不会被保留通过回发，这就是为什么数据似乎不会移动。

要解决这个问题，一个选择是使用Ajax。您可以将表的HTML发送到WebService，以便可以处理和保存数据。

$('#save').click(function() {
   // Creates an Object to store the HTML of the two tables
   var o = new Object();
   o.table1 = $('#htmlTable1-Container').html();
   o.table2 = $('#htmlTable2-Container').html();

   // Creates a JSON String for this Object
   var x = JSON.stringify(o);

   // In your Web Service create a Method that has the parameters (string table1, string table2)    

   $.ajax({
      url: "WEB SERVICE LINK",
      data:x,
      success: function() {
         // Ajax Call Successful
      },
      error: function() {
         // Ajax Call Failed
      }
   });
});

另一个选项（有点尴尬而且不是最好的想法）是将表的HTML存储在启用输入的ASP.NET控件（即文本框）中，然后可以在回发和进程上检索它服务器端的数据。

// Stores the HTML of the two tables in Two ASP.NET Textboxes for retrieval by the Server on postback.
$('#save').click(function() {
   $('#<%= tb1.ClientID %>').val($('#htmlTable1-Container').html());
   $('#<%= tb2.ClientID %>').val($('#htmlTable2-Container').html());
});

使用jquery在2个asp表之间拖放数据

1 个答案: