I've implemented JQuery sortable, and it works fine. The problem is I can't pass the list in its new order to a controller so i can save it.
<script type="text/javascript"> $(document).ready(function() { $("#sortable").sortable({ axis: "y" }); }); $(function() { $("#submit-list").button(); $("#submit-list").click(function() { debugger; $.ajax({ url: '/Admin/SortedLists/', data: { items: $("#sortable").sortable('toArray') }, type: 'post', traditional: true }); }); }); </script> <h2>Edit Roles</h2> <div> <ul id="sortable"> <% foreach (var item in Model.Roles) { %> <li> <%=Html.AttributeEncode(item.Name)%> </li> <% } %> </ul> <input type="submit" value="Save" id="submit-list"/> </div>
and my controller:
[HttpPost] public EmptyResult SortedLists(List<string> items) { return new EmptyResult(); }
List items comes back with the corrent number of elements - except each item are empty strings.
If the original list looks like this
- 1 - Car
- 2 - Boat
- 3 - Motorcycle
- 4 - Plane
And the user drags and resorts to be
- 4 - Plane
- 1 - Car
- 3 - Motorcycle
- 2 - Boat
How can i pass that new order? I suppose id pass the whole thing on submit, delete the entire list and resubmit this whole list
unless theres a better way? Taking advantage of Linq (using Linq to SQL) where i can insert the new order on everychange and do a submit changes?