C# 使用jquery实现-drag-n-drop-using-jquery
我有一个MVC 3应用程序,要求Sysytem管理员能够从主属性列表生成设备属性的有序列表,并将其保存为指定配置 我已经看了以下问题和答案- 我在视图中包含了jQueryUI可排序库、脚本和样式,从视觉上看,一切都很好。它从主菜单拖放到输出列表 我的问题是从输出列表-可排序JQuery UI元素检索数据。在参考文章中,他们建议对sortable元素使用serialize方法。但是,sortable似乎只返回表单上输入元素的查询字符串。在我的例子中,sortable元素是一个有序列表,它的数据没有被引用 如何将可排序元素的数据返回控制器 谢谢。jQuery UI的方法查看元素的ID,并创建适合发回控制器的序列化哈希字符串。默认情况下,您的ID必须采用以下格式之一:C# 使用jquery实现-drag-n-drop-using-jquery,c#,jquery,asp.net-mvc-3,drag-and-drop,jquery-ui-sortable,C#,Jquery,Asp.net Mvc 3,Drag And Drop,Jquery Ui Sortable,我有一个MVC 3应用程序,要求Sysytem管理员能够从主属性列表生成设备属性的有序列表,并将其保存为指定配置 我已经看了以下问题和答案- 我在视图中包含了jQueryUI可排序库、脚本和样式,从视觉上看,一切都很好。它从主菜单拖放到输出列表 我的问题是从输出列表-可排序JQuery UI元素检索数据。在参考文章中,他们建议对sortable元素使用serialize方法。但是,sortable似乎只返回表单上输入元素的查询字符串。在我的例子中,sortable元素是一个有序列表,它的数据没有
<li id="setname=number"></li>
<li id="setname-number"></li>
<li id="setname_number"></li>
如果serialize方法返回一个空字符串,那么您可能没有正确地将可排序元素作为目标,或者尚未使用sortable()调用初始化它们,或者ID的格式不正确。请注意,通过向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'
});
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'
});