实现拖动和拖放 - 使用 - jQuery的

时间:2012-07-31 17:26:02

标签: c# jquery asp.net-mvc-3 drag-and-drop jquery-ui-sortable

我有一个MVC 3应用程序,要求Sysytem Admin能够从主属性列表生成设备属性的有序列表,并将其保存为指定的配置。

我已经查看了以下问题和答案 - Implementing Drag n Drop using JQuery

我已经将JQuery UI可排序的库,脚本和样式包含在View中,视觉上一切似乎都很好用。 Ityems从主服务器拖放到输出列表。

我的问题是从输出列表中检索数据 - 可排序的JQuery UI元素。在引用的文章中,他们建议在可排序元素上使用serialize方法。但是,sortable只会返回表单上输入元素的查询字符串。在我的例子中,可排序元素是一个有序列表,它的数据没有被引用。

如何将可排序元素的数据返回给控制器?

感谢。

1 个答案:

答案 0 :(得分:1)

jQuery UI的serialize方法查看元素的ID,并创建一个适合发布回控制器的序列化哈希字符串。默认情况下,您的ID必须采用以下格式之一:

<li id="setname=number"></li>
<li id="setname-number"></li>
<li id="setname_number"></li>

所有这些都将导致:

"setname[]=number&setname[]=number"

如果serialize方法返回一个空字符串,那么您要么没有正确定位可排序元素,要么尚未使用sortable()调用,或者ID格式不正确。请注意,可以通过将自定义“key”,“attribute”和“expression”参数传递给serialize方法来修改jQuery UI序列化元素的方式:

var sortedList = $('ul.sortableList').sortable('serialize', { attribute: 'itemid', key: 'foo[]', expression: /(.+)=(.+)/ });

当然,您可以随时滚动自己的序列化方法并手动将更新的LI位置传递给控制器​​:

var positions = new Array();

$sortableLis.each(function () {

    var sortableId = $(this).find('input[id$=SortableID]').val();
    var sortOrder = $sortableLis.index($(this));

    var SortablePosition = {
        ID: encodeURIComponent(sortableId),
        SortOrder: sortOrder
    };

    positions.push(SortablePosition);

});

$.ajax({
    type: 'POST',
    url: '/UpdateSortablePositions',
    data: "{ positions: '" + $.toJSON(positions) + "' }",
    contentType: 'application/json; charset=utf-8',
    dataType: 'json'
});