Saving JQuery Sortable (new order) to ASP.Net MVC controller?

Question

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?

T J · Accepted Answer · 2016-07-01 07:23:25Z

9

All I had to do was fill in the id field for each list item, toArray method returned the list fine after that

<ul id="sortable">  
    <% foreach (var item in Model.Roles) { %>                  
        <li id="<%=Html.AttributeEncode(item.Name)%>"><%=Html.AttributeEncode(item.Name)%></li>                                                                                    
    <% } %>             
</ul>

edited Jul 1, 2016 at 7:23

T J

43.2k13 gold badges87 silver badges142 bronze badges

answered Jul 22, 2010 at 20:22

Jerrold

1,6046 gold badges27 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jamiebarrow Over a year ago

One thing I thought about, though not sure if it's valid or not, is what if your id's conflict with something else on the page? For example, I'm using multiple lists, where each parent of the list has a numerical id, and each item has a numerical id, and the ranges of parent and child id's overlap. So doing this, can break the rule of each element having a unique id. So instead I prepend something to the id, e.g. "parent" + id, and "child" + id

Husni Salax · Accepted Answer · 2016-05-06 11:41:06Z

0

In tables you can create hidden inputs, this can help you to post values to your Controller, than you can easy save it ;)

It should be like this:

<form method="post" action="~/NameController/yourAction">
   <ul id="sortable1">

    <li><input type="hidden" id="id" name="Id"/></li>
    <li><input type="hidden" id="UserId" name="UserId"/></li>
    <li><input type="hidden" id="TeamId" name="TeamId"/></li>

 </ul>
  <button type="submit">Save</button>
</form>

Hope it helps;)

edited May 6, 2016 at 11:41

answered May 6, 2016 at 11:12

Husni Salax

2,0181 gold badge21 silver badges30 bronze badges

Collectives™ on Stack Overflow

Saving JQuery Sortable (new order) to ASP.Net MVC controller?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related