使用jQuery重新排序列表

时间:2010-12-30 06:25:49

标签: c# asp.net jquery

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

我已经安装了所有脚本,我的事件在拖放时正常触发,但我无法在对象中看到任何内容。

目标是重新排序列表,并将新订单保存回数据库。我假设我在lists.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#绑定了一个listview,并且显示正常。

<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的对象转换为在System.Web.Script.Services上键入\ u0027System.Collections.Generic.List 1[System.String]\u0027","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 .WebServiceMethodData.CallMethodFromRawParams(Object target,IDictionary 2 parameters)\r\n at System.Web.Script.Services.RestHandler.InvokeMethod(HttpContext context, WebServiceMethodData methodData, IDictionary 2 rawParams)\ r \ n在System.Web.Script.Services.RestHandler.ExecuteWebServiceCall(HttpContext context,WebServiceMethodData methodData)“,”ExceptionType“:”System.InvalidOperationException “}

2 个答案:

答案 0 :(得分:0)

是成功还是失败。如果成功写一个函数来使用jquery刷新listview,那么你将得到更新的数据

查看此链接了解更多详情

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

答案 1 :(得分:0)

我认为使用jQuery UI可排序会更好...

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

相关问题