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. stackoverflow.com/questions/4402036/… — BradLaney
– BradLaney, Commented May 2, 2013 at 20:25

scottm · Accepted Answer · 2012-07-20 16:04:03Z

3

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

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

answered Jul 20, 2012 at 16:04

scottm

28.7k22 gold badges109 silver badges161 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Benjamin Over a year ago

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?

stevethethread · Accepted Answer · 2012-07-23 15:58:18Z

1

@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);
        }
    }

edited Jul 23, 2012 at 15:58

answered Jul 23, 2012 at 8:50

stevethethread

2,5222 gold badges32 silver badges30 bronze badges

3 Comments

Benjamin Over a year ago

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?

stevethethread Over a year ago

@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

Benjamin Over a year ago

This sounds a little complicated compared to the default asp.net mvc model binding.

Collectives™ on Stack Overflow

MVC model binding a string array from jQuery post

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related