jQuery Sortable .toArray with ASP.NET MVC ActionResult

Question

Third try at fixing this tonight - trying a different approach than before now.

Given a jQuery Sortable 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;
    }

Activated by JavaScript...

        $("#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();

The 'alert' DOES show the right items. It shows 'item1, item2' etc. But my ASP.NET MVC ActionResult gets nothing. The method DOES fire, but the 'items' parameter comes in null. Any ideas?

score 2 · Accepted Answer · edited May 23 '17 at 11:48

Looks like serialization issue was addressed in jQuery 1.4.2 (See related question).

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

Looking at the form post example on Phil Haack's blog, as long as your input elements all have the same name they'll be put into a list. I tried mapping the array of strings to an array of objects like so:

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 the submit I got a non null array of the correct length, but each cell was null. The problem was that (according to firebug) the POST params 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 submit was something that looks like this:

items   item1
items   item2

because that's essentially what the form in Phil's example is doing. I don't know how to get JSON to serialize like that so I cheated and created the string by hand like so:

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

This worked. When I checked the value of the items array in the action, it had two strings in it "item1" and "item2". So it looks like you can get your code to work by serializing the data by hand (so to speak) and using the string as an argument in your ajax call. Somehow this feels like the wrong way to go, so I hope someone corrects me with a way that is/feels more right.

Must be fate, I ran across Phil Haack's post yesterday while looking for stuff to put into a presentation at work on why we should move our project to ASP.NET MVC. — Roman, Mar 27 '10 at 02:42

score 0 · Answer 2 · answered Mar 27 '10 at 00:42

0

you can try using

data: { 'items[]': items }

since items is an array, it's a semi-guess, but i think it matters and it's worth a shot :)

answered Mar 27 '10 at 00:42

Paul Creasey

28,321
10
54
90

jQuery Sortable .toArray with ASP.NET MVC ActionResult

2 Answers2

Linked