Question

Using the code below my IEnumerable bookedRooms always have null values when they reach the controller, it knows how many bookedRooms I sent back but the values of RoomID and NumRooms are always null for each of the items any ideas?

I have the following view model…

public class SelectDatesViewModel

    public int venueID { get; set; }
    public IEnumerable<BookedRoomViewModel> bookedRooms {get;set;}
    public string checkInDateString { get; set; }
    public int pageNo { get; set; }
    public bool showCheckIn { get; set;}
    public string startDateString { get; set; }
}
public class BookedRoomViewModel
{
    public string RoomID { get; set; }
    public string NumRooms { get; set; }
}

I am using the following jquery ajax call..

function showArrivalCalendar() {
    showThrobber();
    var info = {
        venueID: venueID,
        bookedRooms: getBookedRooms(),
        startDateString: $("#calendarHolder").data("arrivalstartdate"),
        checkInDateString: "",
        pageNo: 1,
        showCheckIn: true
    }
    $.ajax({
        url: "/Booking/BookingCalendar/",
        type: "POST",
        data: JSON.stringify(info),
        dataType: "json",
        success: function (retValue) {
            $("#calendarHolder").html(data);
            hideThrobber();
        }
    });
}
function getBookedRooms() {
    var bookedRooms = [];
    $("#selectBookingType").find("select").each(function () {
         if ($(this).find(":selected").val() > 0) {
            var noRooms = $(this).find(":selected").val();
            bookedRooms.push({
                    RoomID: $(this).data("roomid"),
                    NumRooms: noRooms
            });
        };
    });
    return bookedRooms;
}

To post to this controller..

[HttpPost]
public ActionResult BookingCalendar(SelectDatesViewModel model)
{
    return PartialView(GetBookingDates(model.venueID, model.startDateString, model.showCheckIn, model.pageNo, model.checkInDateString));
}

Answer 1

Your $.ajax call options are wrong: dataType is for specifying the type of data that you’re expecting back from the server not the type of the data what you send to the server.

You need to set the contentType property (see JQuery doc) to "application/json" if you want to send JSON data and want the model binder working correctly (you may also need to JSON.stringify the data)

So the correct usage:

$.ajax({
    url: "/Booking/BookingCalendar/",
    type: "POST",
    data: JSON.stringify(info),
    contentType: "application/json",
    success: function (retValue) {
        $("#calendarHolder").html(data);
        hideThrobber();
    }
});