Posting JSON array of object to controller in ASP.NET MVC

Question

I'm trying to post an array of objects to my controller via JSON. When sending a single object, the MVC model binding is working fine, but when I try and send an array of objects, the binding fails completely and I receive a null object in my controller action.

First, here is the ViewModel I am working with:

public class ForecastViewModel
    {
        public int RestaurantCode { get; set; }
        public System.DateTime FiscalDate { get; set; }
        public Nullable<decimal> ForecastSales { get; set; }
        public Nullable<decimal> ForecastFOHLabour { get; set; }
        public Nullable<decimal> ForecastFOHHours { get; set; }
        public Nullable<decimal> ForecastBOHLabour { get; set; }
        public Nullable<decimal> ForecastBOHHours { get; set; }
        public Nullable<decimal> ForecastFoodSales { get; set; }

        public ForecastViewModel() { }

        public ForecastViewModel(Forecast model){...}
    }

And the controller action:

    [HttpPost]
    public ActionResult Update(List<ForecastViewModel> model){...}

And here is the raw JSON being sent to my controller:

[{"RestaurantCode":1002,"FiscalDate":"2/24/2014","ForecastSales":"111","ForecastFOHLabour":"111.11","ForecastFOHHours":"11","ForecastBOHLabour":"111.11","ForecastBOHHours":"11","ForecastFoodSales":"111.11","FOHPercent":"100.1","BOHPercent":"100.0"},{"RestaurantCode":1002,"FiscalDate":"2/25/2014","ForecastSales":"111","ForecastFOHLabour":"111.11","ForecastFOHHours":"11","ForecastBOHLabour":"111.11","ForecastBOHHours":"11","ForecastFoodSales":"111.11","FOHPercent":"100.1","BOHPercent":"100.0"},{"RestaurantCode":1002,"FiscalDate":"2/26/2014","ForecastSales":"111","ForecastFOHLabour":"111.11","ForecastFOHHours":"11","ForecastBOHLabour":"111.11","ForecastBOHHours":"11","ForecastFoodSales":"111.11","FOHPercent":"100.1","BOHPercent":"100.0"},{"RestaurantCode":1002,"FiscalDate":"2/27/2014","ForecastSales":"111","ForecastFOHLabour":"111.11","ForecastFOHHours":"11","ForecastBOHLabour":"111.11","ForecastBOHHours":"11","ForecastFoodSales":"111.11","FOHPercent":"100.1","BOHPercent":"100.0"},{"RestaurantCode":1002,"FiscalDate":"2/28/2014","ForecastSales":"111","ForecastFOHLabour":"111.11","ForecastFOHHours":"11","ForecastBOHLabour":"111.11","ForecastBOHHours":"11","ForecastFoodSales":"111.11","FOHPercent":"100.1","BOHPercent":"100.0"},{"RestaurantCode":1002,"FiscalDate":"2/29/2014","ForecastSales":"111","ForecastFOHLabour":"111.11","ForecastFOHHours":"11","ForecastBOHLabour":"111.11","ForecastBOHHours":"11","ForecastFoodSales":"111.11","FOHPercent":"100.1","BOHPercent":"100.0"},{"RestaurantCode":1002,"FiscalDate":"2/30/2014","ForecastSales":"111","ForecastFOHLabour":"111.11","ForecastFOHHours":"11","ForecastBOHLabour":"111.11","ForecastBOHHours":"11","ForecastFoodSales":"111.11","FOHPercent":"100.1","BOHPercent":"100.0"}] 

I went back and modified the code to send a single instance of a ForecastViewModel to my controller instead of an array, and the binding worked perfectly:

    [HttpPost]
    public ActionResult Update(ForecastViewModel model){...}

Here is the JSON I was sending the controller action:

{"RestaurantCode":1002,"FiscalDate":"2/24/2014","ForecastSales":"111","ForecastFOHLabour":"111.11","ForecastFOHHours":"11","ForecastBOHLabour":"111.11","ForecastBOHHours":"11","ForecastFoodSales":"111.11","FOHPercent":"100.1","BOHPercent":"100.0"}

How can I modify my code so that the binding works against the array of objects?

UPDATE: Here is the javascript that sends the request. I'm using knockout.js to serialize my array of objects to JSON.

self.save = function () {
    var forecasts = ko.toJSON(self.forecasts);

    console.log(forecasts)

    $.ajax({
        type: "POST",
        url: "/Tools/Forecasts/Update/",
        dataType: "application/json",
        data: forecasts
    }).done(function(data){
        alert("complete!");
    });
};

Answer 1

The "application/json" is not a valid value for the dataType parameter in $.ajax (this paramter is anyway for configuring how the data coming form the server should be parsed and it has nothing to do with the format of the data what you send to the server).

What you need to set is the contentType option:

$.ajax({
    type: "POST",
    url: "/Tools/Forecasts/Update/",
    contentType: "application/json",
    data: forecasts
}).done(function(data){
    alert("complete!");
});