Reorder list with jQuery : The Official Microsoft ASP.NET Forums

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    <script src="https://github.com/douglascrockford/JSON-js/raw/master/json2.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
    <style>
        .item
        {
            width: 300px;
            padding: 10px 10px 10px 10px;
            margin: 5px 0px 5px 0px;
            background-color:Gray;
            color:White;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".container").sortable();
            $(".container").disableSelection();
            $("#orderDiv").click(function() {
            var divs = $.map($("div.container div.item"), function(item, index) {
                    var divDetail = new Object();
                    divDetail.DivID = $(item).attr("id");
                    divDetail.Order = index + 1;
                    return divDetail;
                });
                var jsonDivs = JSON.stringify(divs);
                $.ajax({
                    type: "POST",
                    contentType: "application/json",
                    data: "{'divs':" + jsonDivs + "}",
                    url: "ServiceCompas.asmx/DivsDetail",
                    dataType: "json",
                    success: function(data) {
                        alert(data.d);
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        debugger;
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ListView ID="ListView1" runat="server">
        <LayoutTemplate>
            <div class="container">
                <div class="item"  id="itemPlaceholder" runat="server"></div>
            </div>
        </LayoutTemplate>
        <ItemTemplate>
            <div id='<%#Eval("Id")%>'  class="item"><%#Eval("Id")%></div>
        </ItemTemplate>
    </asp:ListView>
     <input type="button" id="orderDiv" value="Save change" />
    </form>
</body>
</html>

Web Service-

    [WebMethod]
    public bool DivsDetail(List<DivsDetail> divs)
    {
        //update to database
        return true;
    }

Data Class-

public class DivsDetail {
    public int DivID { get; set; }
    public int Order { get; set; }
}

Code behind-

    protected void Page_Load(object sender, EventArgs e)
    {
        var objData = (new[] { new { Id = 1} }).ToList();
        objData.Add(new { Id = 2});
        objData.Add(new { Id = 3});
        objData.Add(new { Id = 4});
        objData.Add(new { Id = 5});
        objData.Add(new { Id = 6});
        objData.Add(new { Id = 7});
        objData.Add(new { Id = 8});
        objData.Add(new { Id = 9});
        objData.Add(new { Id = 10 });
        objData.Add(new { Id = 11});
        objData.Add(new { Id = 12});
        objData.Add(new { Id = 13 });
        objData.Add(new { Id = 14});
        ListView1.DataSource = objData;
        ListView1.DataBind();
    }

Thanks & Regards
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog

Marked as answer by BU XI - MSFT on Feb 11, 2011 06:59 AM

Reorder list with jQuery RSS

2 replies

ShadowDanser

Reorder list with jQuery

raghav_khung...

Re: Reorder list with jQuery

asteranup

Re: Reorder list with jQuery

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft