MVC4 IEnumerable模型綁定總是爲空

Question

使用下面的代碼我IEnumerable的預訂房間總是有空值，當他們到達控制器時，它知道有多少個已預訂房間我送回，但是RoomID和NumRooms的值對於每個項目都是空的想法？

我有以下視圖模型...

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

我使用以下的jquery ajax調用..

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

要在這個控制器..

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

Answer 1

您的$.ajax調用選項有誤：dataType用於指定dat的類型您希望從服務器返回的數據不是您發送到服務器的數據類型。

你需要的，如果你想發送JSON數據來設置contentType屬性（見JQuery doc）至"application/json"並希望模型綁定正常工作（你可能還需要JSON.stringify數據）

所以，正確的用法：

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