使用jQuery对列表重新排序

Question

我正在尝试从此处使用列表重新排序： http : //www.utdallas.edu/~jrb048000/ListReorder/

我已经准备好所有脚本，并且拖放时事件正常触发，但是我看不到对象中的任何内容。

目标是对列表重新排序，并将新订单保存回数据库。 我以为list.bind中的语法有问题，因为它显示了列表中的实际项目，但是值是空的。

            $(document).ready(function () {
            var options = {
                itemHoverClass: 'itemHover',
                dragTargetClass: 'dragTarget',
                dropTargetClass: 'dropTarget',
                useDefaultDragHandle: true
            };

            var lists = $('.lists').ListReorder(options);
            var items = [];
            lists.bind('listorderchanged', function (evt, jqList, listOrder) {
                for (var i = 0; i < listOrder.length; i++) {
                    items[i] = $("ul li:eq(" + i + ")").attr('id');
                }
            });

            $('#btnSave').click(function () {
                if (items.length > 0) {
                    var jsonText = JSON.stringify({ items: items });
                    $.ajax({
                        type: "POST",
                        url: 'ManageSliders.aspx/SaveReOrder',
                        data: jsonText,
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function () { $("#result").html("New order saved successfully"); },
                        failure: function (msg) { alert(msg); }
                    });
                }
                else {
                    alert("You have made no changes");
                }
            });
        });

我正在使用C＃绑定一个列表视图，并且显示也很好。

<ul class="lists">
        <asp:ListView ID="lvSliders" runat="server">
            <LayoutTemplate>
                <asp:Panel ID="itemPlaceHolder" runat="server" />
            </LayoutTemplate>
            <ItemTemplate>
                <li id='<%# DataBinder.Eval(Container.DataItem, "Id")%>'>
                    <%# DataBinder.Eval(Container.DataItem, "Title")%></li>
            </ItemTemplate>
            <ItemSeparatorTemplate>
            </ItemSeparatorTemplate>
        </asp:ListView>
    </ul>

我通过Fiddler运行了它，并抛出了这个错误：

{“ Message”：“无法将\\ u0027System.String \\ u0027类型的对象转换为\\ u0027System.Collections.Generic.List 1[System.String]\'","StackTrace":" at System.Web.Script.Serialization.ObjectConverter.ConvertObjectToTypeInternal(Object o, Type type, JavaScriptSerializer serializer, Boolean throwOnError, Object& convertedObject)\\r\\n at System.Web.Script.Serialization.ObjectConverter.ConvertObjectToTypeMain(Object o, Type type, JavaScriptSerializer serializer, Boolean throwOnError, Object& convertedObject)\\r\\n at System.Web.Script.Services.WebServiceMethodData.StrongTypeParameters(IDictionary u0027 1[System.String]\'","StackTrace":" at System.Web.Script.Serialization.ObjectConverter.ConvertObjectToTypeInternal(Object o, Type type, JavaScriptSerializer serializer, Boolean throwOnError, Object& convertedObject)\\r\\n at System.Web.Script.Serialization.ObjectConverter.ConvertObjectToTypeMain(Object o, Type type, JavaScriptSerializer serializer, Boolean throwOnError, Object& convertedObject)\\r\\n at System.Web.Script.Services.WebServiceMethodData.StrongTypeParameters(IDictionary 2 rawParams）\\ r \\ n System.Web.Script.Services.WebServiceMethodData.CallMethodFromRawParams（Object target，IDictionary 2 parameters)\\r\\n at System.Web.Script.Services.RestHandler.InvokeMethod(HttpContext context, WebServiceMethodData methodData, IDictionary 2 rawParams）处的n \\ System.Web.Script.Services.RestHandler.ExecuteWebServiceCall（HttpContext上下文，WebServiceMethodData methodData）“，”超越 ptionType“：” System.InvalidOperationException“}

Answer 1

是成功还是失败。 如果成功，编写一个使用jquery刷新listview的函数，那么您将获得更新的数据

检查此链接以获取更多详细信息

http://marcgrabanski.com/articles/jquery-ajax-content-type

Answer 2

我认为使用jQuery UI sortable会好得多...

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