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?

Answer 1

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.