Geek Answers Handbook

JQuery Sortable.toArray with ASP.NET MVC ActionResult

The third attempt to fix this today is to try a different approach than before.

Given a sortable jQuery list.

<ul id="sortable1" class="connectedSortable"> <li class="ui-state-default" id="item1">Item 1</li> <li class="ui-state-default" id="item2">Item 2</li> <li class="ui-state-default">Item 3</li> <li class="ui-state-default ">Item 4</li> <li class="ui-state-default">Item 5</li> </ul> <ul id="sortable2" class="connectedSortable"> </ul>

And ASP.NET MVC ActionResult ..

  [AcceptVerbs(HttpVerbs.Post)] public ActionResult Insert( string[] items ) { return null; }

JavaScript is activated ...

  $("#sortable1, #sortable2").sortable({ connectWith: '.connectedSortable', dropOnEmpty: true, receive: function () { var items = $(this).sortable('toArray'); alert(items); $.ajax({ url: '/Manage/Events/Insert', type: 'post', data: { 'items': items } }); } }).disableSelection();

"alert" shows the correct items. It shows "item1, item2", etc. But my ASP.NET MVC ActionResult doesn't get anything. The method is VALID, but the "items" parameter is null. Any ideas?

+3
jquery asp.net-mvc
source share
3 answers

It looks like the serialization issue was addressed in jQuery 1.4.2 (see related question ).

Original answer:
I figured out the answer, but you most likely will not like it =).

Looking at the Phil Haack blog post form , as long as your input items have the same name, they will be put on the list. I tried to match an array of strings with an array of such objects:

 var items = $.map( $(this).sortable('toArray'), function(item, index){ return {"item": item}; } ); $.ajax({ url: '/Home/Insert', type: 'post', data: { items: items } });

and when I did submit, I got a zero array of the correct length, but each cell was zero. The problem was that (according to firebug) the POST parameters looked like this:

 items[0][item] item1 items[1][item] item2

which is close to what I want, but not quite there. What I really wanted to introduce was as follows:

 items item1 items item2

because this is what form does in Phil's example. I don't know how to get JSON to serialize so that I cheat and create a line manually:

 $.ajax({ url: '/Home/Insert', type: 'post', data: 'items=items1&items=items2' });

It worked. When I checked the value of the items array in action, it had two lines in it, "item1" and "item2". So it looks like you can make your code work by serializing the data manually (so to speak) and using the string as an argument in your ajax call. Somehow, this seems like the wrong way, so I hope someone corrects me in a way that will / feels more correct.

+2
source share

I know this is after the fact, but I came across this question, then I found the real answer:

AJAX JavaScript String Array Message for JsonResult as List <string> Always Returns Zero?

In jQuery 1.4, they changed the way they encode parameters. Setting traditional: true fixes the error.

+3
source share

you can try using

 data: { 'items[]': items }

since the elements is an array, this is a half-guess, but I think it is important and worth it :)

0
source share

More articles:


All Articles