MVC model binding a string array from jQuery post

Question

The parameter string[] orderTypeNames is coming up null.

mvc action

public PartialViewResult EditMultipleOrderStates(
    string[] orderTypeNames,
    int[] orderIds)

javascript

$('#edit-mulitple-order-states-button').click(function () {
    ids = [];
    types = [];
    $checked = $('.order-queue-order input:checked');
    $orders = $checked.closest('.order-queue-order');
    $orders.each(function (index, elem) {
        $order = $(elem);
        ids.push($order.attr("orderId"));
        types.push($order.attr("orderType"));
    });
    data = {
        orderIds: ids,
        orderTypeNames: types
    };
    $.post('EditMultipleOrderStates', data, function (response) {
        //...
    });
});

fiddler

enter image description here

orderIds%5B%5D=97&orderIds%5B%5D=98&orderIds%5B%5D=93&orderTypeNames%5B%5D=DeliveryOrder&orderTypeNames%5B%5D=DeliveryOrder&orderTypeNames%5B%5D=DeliveryOrder

Is it the square brackets causing the problem? How can I bind to these arrays?

Edit: I am manually building the query string in the mean time.

query = "";
for each...
query += "orderIds=" + $order.attr("orderId") + "&";
query += "orderTypeNames=" + $order.attr("orderType") + "&";

Use the solution posted here. http://stackoverflow.com/questions/4402036/jquery-ajax-posting-array-to-asp-net-mvc-controller — BradLaney, May 02 '13 at 20:25

score 3 · Answer 1 · answered Jul 20 '12 at 16:04

3

You need to call some sort of JSON.stringify on data.

 $.post('EditMultipleOrderStates', JSON.stringify(data), function (response) {
        //...
    });

answered Jul 20 '12 at 16:04

scottm

27,829
22
107
159

It is still not binding. That produces `{"orderIds":["97","98","99"],"orderTypeNames":["DeliveryOrder","DeliveryOrder","DeliveryOrder"]}`. Is there something I should change in the mvc action parameters? – Benjamin Jul 20 '12 at 16:34

stevethethread · Answer 2 · 2012-07-23T15:58:18.653

@Benjamin. Here's a bit of a more detailed example of what I have done, that works

<script type="text/javascript">
    $(document).ready(function() {
        $('#btnTest').click(function() {

            var filter = {
                OrgId: 3,
                Drivers: [{ Name: "SGT-200" }, { Name: "SGT-100"}],
                DrivenUnits: [{ Name: "Generator" }],
                Regions: [{ Name: "REU" }],
                SearchString : "Test search string"
            };

            $.ajax(
                {
                    url: "/api/Dashboard/PostFilter",
                    type: "POST",
                    contentType: "application/json",
                    dataType: "json",
                    data: JSON.stringify(filter),
                    success: function(result) {
                        alert(result);
                    },
                    error: function(error) {

                        alert("There was an error posting the data to the server: " + error.responseText);

                    }
                });
        });
    });
</script>

Hope this helps.

EDIT: And here are the matching C# objects

public class Filter
{
    public int OrgId { get; set; }
    public List<FilterData> Drivers { get; set; }
    public List<FilterData> DrivenUnits { get; set; }
    public List<FilterData> Regions { get; set; }
    public List<FilterData> Operations { get; set; }
    public List<FilterData> Connections { get; set; }
    public string SearchString { get; set; }
}

public class FilterData
{
    public string Type { get; set; }
    public string Name { get; set; }
    public int Count { get; set; }
}

All your type names need to match. And below is the code that receives the call

public IQueryable<DashboardData> Post(Filter filter) {
        using(_unitOfWork)
        {
            _dashboardRepository.UsingUnitOfWork(_unitOfWork);

            return FilterDashboardData(_dashboardRepository.GetDashboardData(filter.OrgId), filter);
        }
    }

Thank you. That looks somewhat similar to the result of calling stringify like scottm recommended. It did not seem like MVC wanted to bind to the json. Is there something that has to be done in the controller to bind to json arrays? — Benjamin, Jul 23 '12 at 15:34
@Benjamin. I have used this code, both as it is, and with a few changes, cross-domain, and have it working no issues. In the case I would have a C# Filter object, with the appropriate properties. I will add the C# class so you can see what happens. If your mapping is not working, then there is probably something wrong in your object classes, in regards to datatype/name — stevethethread, Jul 23 '12 at 15:55
This sounds a little complicated compared to the default asp.net mvc model binding. — Benjamin, Jul 23 '12 at 15:58

MVC model binding a string array from jQuery post

2 Answers2