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

匿名 (未验证) 提交于 2019-12-03 02:48:02

问题:

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. 1 - Car
  2. 2 - Boat
  3. 3 - Motorcycle
  4. 4 - Plane

And the user drags and resorts to be

  1. 4 - Plane
  2. 1 - Car
  3. 3 - Motorcycle
  4. 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?

回答1:

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>  


回答2:

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;)



易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!