将 div 的内容保存在不同的位置答案

【问题标题】：Save content of divs on different positions将 div 的内容保存在不同的位置
【发布时间】：2011-04-21 19:09:17
【问题描述】：

我在左边有一些名字（divs），在右边有 3 个方块，它们是 divs（nr1、nr2、nr3）。我可以把右边方块上的三个名字拖到前3个。这一切都是用jquery完成的。

如何使用 asp.net 将拖动到方块上的位置和名称保存在 sql 数据库中。

【问题讨论】：

标签： jquery asp.net sql drag-and-drop draggable

【解决方案1】：

我认为当您单击保存按钮时，将子 div 放入容器 div 中。然后像父子关系一样保存。获取chid div的位置（左侧和顶部）（相对于父级的位置）并保存

表格记录可能看起来像

ChildId ParentId ChildLeftPosition ChildTopPosition

-------- -------- ----- -------------- ----

nr1        Parent1        25                 12
nr2        Parent1        65                 48
nr3        Parent1        210                97

当你渲染回来时，读取这些值并定位它

【讨论】：

【解决方案2】：

function SaveNames()
{
    var NameForN1 = [];
    var NameForN2 = [];
    var NameForN3 = [];

    $('#nr1').children().each(function()
    {
         NameForN1.push($(this).html());
    });
    //TODO: Do the same for nr2 and nr3
    $.post('yoururl',{Names:[NameForN1,NameForN2,NameForN3]},callback);
}

这是客户端，现在是服务器端

protected void SaveItems()
{
    Dictionnary<string,object> myNames;
    System.Web.Script.Serialization.JavaScriptSerializer jvs = new System.Web.Script.Serialization.JavaScriptSerializer();
    myNames = jvs.Deserialize<Dictionnary<string,object>>(Request["Names"]);
    //TODO Now you only have to save it to the database.
}

myNames["Names"] 应该是（如果我是对的）一个字符串数组。如果您使用 asp.net 4.0 在服务器端不起作用，我建议您阅读这篇关于 Json 反序列化的一些很酷工具的文章：Hanselman blog's

【讨论】：