Default model binder does not bind my model class

Question

I am trying to make a post that should use the Default Model Binder functionality in ASP.NET MVC 2 but unfortunately I can't get through....

When I click on the checkout button I populate a form dinamically using jQuery code and then submit this form to the server. This is the form that get submitted

<form action="/x/Order/Checkout" id="cartForm" method="post">
    <input name="__RequestVerificationToken" type="hidden" value="UDjN9RdWheKyWK5Q71MvXAbbDNel6buJd5Pamp/jx39InuyYIQVptcEubIA2W8DMUzWwnZjSGkLspkmDPbsIxy8EVuLvfCSZJJnl/NrooreouptwM/PaBEz2v6ZjO3I26IKRGZPqLxGGfITYqlf8Ow==">
    <input id="CustomerID" name="CustomerID" type="hidden" value="1">
    <input id="FirmID" name="FirmID" type="hidden" value="2">
    <input type="hidden" name="CartItems[0].ServiceTypeID" value="1">
    <input type="hidden" name="CartItems[0].Quantity" value="1">
    <input type="hidden" name="CartItems[1].ServiceTypeID" value="2">
    <input type="hidden" name="CartItems[1].Quantity" value="1">
</form>

This is the jQuery code that handle the submit event for the form

$("#cartForm").submit(function (event) {
    event.preventDefault();
    var form = $("#cartForm");
    var panel = form.parent();
    panel.parent().block();
    $.ajax({
        type: "post",
        dataType: "html",
        url: '<%: Url.Content("~/Order/Checkout") %>',
        async: false,
        data: form.serialize(),
        success: function (response, status, xml) {
            panel.parent().unblock();
        },
        error: function (response) {
            panel.parent().unblock();
        }
    });
});

This is the controller action that should be get called

[HttpPost]
[ValidateAntiForgeryToken]
public virtual ActionResult Checkout( CartModel cart ) {
}

And finally this is the CartModel class involved

public class CartModel : BaseModel
{
    public int CustomerID { get; set; }
    public int FirmID { get; set; }

    public List<CartItemModel> CartItems { get; set; }

    public CartModel() {
        CartItems = new List<CartItemModel>();
    }
}

public class CartItemModel : BaseModel
{
    public int ServiceTypeID { get; set; }
    public int Quantity { get; set; }
}

But the default Model Binder does not bind the web form data to a CartModel class. Using Fiddler I have been able to see that the data sent to the server is correct as you can see from the following snapshot

Any suggestion?

Answer 1

Following @Artem K. comment, the code looks good.

Please verify if the BaseModel class prevents the object being binded. Also verify that you dont have any Filter preventing the request being executed (like Authorize, etc.)