Question

我一直在看

http://jqueryui.com/demos/sortable/#default

一天的大部分时间。我想使用新值来更新数据库是大多数人想要的。当我使用ASP.NET时，我的想法是使用序列化将新值发送到更新数据库的页面。这是脚本：

<script type="text/javascript">
    jQuery(function() {
    $("#sortable").sortable();
    $("#sortable").disableSelection();
    });
    jQuery(function() {
    $("#sortable li:lt(3)").css("font-weight", "bold");
    });
    jQuery(function() {
    $("#cmdUpdateSortOrder").click(function() {
            $(".neworder").append("<br />");
            $("#sortable li.ui-state-default").each(function() {
                $(".neworder").append($(this).text() + "<br />");
            });
            var str = $("#sortable li.ui-state-default").sortable("serialize");
            alert(str);
            var result = $('#sortable li').sortable('toArray');
            alert(result);
        });
    });
</script>

第一个函数是从jQueryUI示例中解除的，第二个功能突出显示前三行，单击按钮后，第3个函数将新订单写入页面。这两个警报都给了我：

[object Object]

我希望有一个id和值对，比如0 = 3＆amp; 1 = 2＆amp; 2 = 4等。如果有人有更好的方法这样做，（ajax？），我将非常感激。< / p>

Answer 1

以下是我如何通过jquery ajax解析可排序以发布到ASP.net MVC控制器操作。

parseRouteRoleIds（）可能就是你所追求的。我只是在每个sortable（）div上有一个隐藏的span，带有一个rowId类。当我渲染页面的那一部分时，我只需将相关的项目键放入跨度中。稍后，当用户准备保存更改时，我只是在parseRouteRoleIds（）函数中连接我的ID列表。

$.ajax({
  type: 'POST',
  data: 'reviewCycleSwitchId=' + SWID + '&reviewCycleRoleIdList=' + parseRouteRoleIds(), 
  url:  root + saveRoutesPath,
  success: function(result) { // something you would do on success }
});

function parseRouteRoleIds() {
    var kys = '';
    $('.usedTiles li').each(function() {
        kys = kys + ',' + $('.rowId', $(this)).html();
    });
    return kys;
}

Answer 2

这就是我最后所做的

<script type="text/javascript">
    jQuery(function() {
        var str;
        $("#sortable").sortable();
        $("#sortable").disableSelection();
        $("#sortable li:lt(3)").css("font-weight", "bold");
        $("#cmdUpdateSortOrder").click(function() {             
            str = $("#sortable li.ui-state-default").sortable();
            var params = '{order:"' + str[0].title + ',' + str[1].title + ',' + str[2].title + '"}';
            $.ajax({
                type: "POST",
                url: "NewsFrontPage.aspx/SubmitJSON", //URL and function to call
                data: params, // Set Method Params
                beforeSend: function(xhr) {
                    xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
                },
                contentType: "application/json; charset=utf-8", //Set Content-Type
                dataType: "json", // Set return Data Type
                success: function(msg, status) {
                    //Set Response outcome
                    $('#ajaxmsg')[0].innerHTML = msg.d;
                },
                error: function(xhr, msg, e) {
                    //this should only fire if the ajax call did not happen or there was an unhandled exception
                    alert(msg);
                }
            });
        });
    });   

</script>

我只是将前三个项目作为jSON数据返回到同一页面中的函数SubmitJSON（NewsFrontPage.aspx）。谢谢你让我朝着正确的方向前进。注意：我使用属性'title'来存储要排序的元素的ID。

jQuery UI可排序序列化或toarray方法 - 需要建议

2 个答案: