Question

I am using jQuery UI sortable to sort a list in the DOM. I succesfully have an ajax functionposting this string to my mvc action:

list[]=2&list[]=3&list[]=28&list[]=1

I’m trying to figure out how to get this serialized list of numbers into a List<int> so I can actually access them from C#.

How would I do this? I’ve already tried this method:

    [HttpPost]
    public string RoleTierUpdate( string[] form)
    {
        StringBuilder sb = new StringBuilder();

        foreach (var item in form)
        {
            sb.AppendFormat("id: {0}<br />", item);
        }

        return sb.ToString();
    }

I was thinking I could convert the array of string into a list of integers. But this returned the following output:

    id: 2
    id: ,
    id: 3
    id: ,
    id: 2
    id: 8
    id: ,
    id: 1

Is ther an easier way of getting this data into a list of int?

Edit

Here’s the code that executes the ajax post:

<script type="text/javascript">
    // Sortable
    $(document).ready(function () {
        $("#sortThis").sortable({
            handle: '.handle',
            update: function () {

                // get new order
                var order = $('#sortThis').sortable('serialize');

                // excecute ajax for db update
                $.post(
                    "/find/AdminMember/RoleTierUpdate/",
                    order,
                    function (data) {
                        $("#info").html(data);
                    }
                );

                $("#info2").html(">>" + order + "<<");
            }
        });

    });
</script>

order contains the string I showed above.

Edit 2

Updated controller to:

    [HttpPost]
    public string RoleTierUpdate( List<int> list, MemberData md) // change to List<int> list
    {
        StringBuilder sb = new StringBuilder();

        if (list != null) // added check for null
        {
            foreach (var item in list)
            {
                sb.AppendFormat("id: {0}<br />", item);
            }
        }
        else {
            sb.Append("form is null");
        }

        return sb.ToString();
    }

Updated ajax to:

    $(document).ready(function () {

        jQuery.ajaxSettings.traditional = true; // added

        $("#sortThis").sortable({
            handle: '.handle',
            update: function () {

                // get new order
                var order = $('#sortThis').sortable('serialize');

                // excecute ajax for db update
                $.post(
                    "/find/AdminMember/RoleTierUpdate/",
                    order,
                    function (data) {
                        $("#info").html(data);
                    }
                );

                $("#info2").html(">>" + order + "<<");
            }
        });

    });

The output from this is:

form is null

Answer 1

It appears that the reason MVC’s modelbinder wasn’t willing to bind the string

list[]=2&list[]=3&list[]=28&list[]=1 

to a List<int> list is because of the “[]” in the keys. I added this javascript to my jQuery:

// get new order
 var order = $('#sortThis').sortable('serialize');
 order = order.replace(/\[\]/gi, "")

Once I took out the “[]” from the keys everything was great. The action returned this result:

id: 2
id: 3
id: 28
id: 1

Which is exactly what I needed. The modelbinding to List<int> is working great.