MVC 3 JSON Model binding not creating object

Question

This was my first attempt at JSON MVC model binding and things aren't going according to plan.... massive sigh! In every attempt when I break in the controller action the strongly typed model/class is either empty or null.

What I do:

Client side I'm generating an array to store payments

var PAYMENTS = new Array();

Payment values are entered by a user and added into the payments array. Some of the fields will only be populated server side once data is posted, so I assign temp values.(reference, userID)

PAYMENTS.push({ reference: "0",
            paymentDate: date,
            paymentMethodID: paymentMethod,
            paymentAmount: amount,
            bankNameID: bankID,
            bankBranchCode: branch,
            drawerName: drawer,
            chequeNo: chequeNo,
            userID: "00000000-0000-0000-0000-000000000000",
            statementNo: statementNo,
            additionalReference: additionalRef
        });

After adding 2 payments, this is the firebug result for PAYMENTS

0 Object { reference="0", paymentDate="31-01-2012", paymentMethodID="7", more...}
1 Object { reference="0", paymentDate="31-01-2012", paymentMethodID="0", more...}

User selects to process the payments which calls processPayment()

Practices are a 2nd parameter that should be passed, but just trying to get payments working first.

function processPayment() {

    var paymentsJSON = $.toJSON(PAYMENTS);
//  var practicesJSON = $.toJSON(selectedPractices);

    $.ajax({
        url: BASE_APP_URL + "Payment/processPayment",
        type: 'POST',
        data: "{ param : '" + paymentsJSON + "'}" ,
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (data) {
            alert(data);
        }
    });
}

viewModel Class. I've simplefied the viewModel types in an attempt to get something into the controller.

public class paymentsViewModelJSONPayment
{
    public string referece { get; set; }
    public string paymentDate { get; set; }
    public string paymentMethodID { get; set; }
    public decimal paymentAmount { get; set; }
    public string bankNameID { get; set; }
    public string bankBranchCode { get; set; }
    public string drawerName { get; set; }
    public string chequeNo { get; set; }
    public string userID { get; set; }
    public string statementNo { get; set; }
    public string additionalReference { get; set; }
}

finally controller action

[HttpPost]
public ActionResult processPayment(List<paymentsViewModelJSONPayment> param)
{
    return Json(param);

When debugging:

Post values from Firebug:

JSON


param   "[{"reference":"0","paymentDate":"31-01-2012","paymentMethodID":"7","paymentAmount":500,"bankNameID":"8","bankBranchCode":"","drawerName":"","chequeNo":"","userID":"00000000-0000-0000-0000-000000000000","statementNo":"","additionalReference":""},{"reference":"0","paymentDate":"31-01-2012","paymentMethodID":"0","paymentAmount":500,"bankNameID":"10","bankBranchCode":"0026","drawerName":"drawer","chequeNo":"00231021","userID":"00000000-0000-0000-0000-000000000000","statementNo":"","additionalReference":""}]"

Breakpoint in controller. The action gets called but no binding.

Not allowed to post images yet, but when breaking controller List is empty.

From watchlist:

• param Count = 0 System.Collections.Generic.List
• Raw View Capacity 0 int Count 0 int
• Static members
• Non-Public members

I'm pretty much out of ideas, tried various configurations and kinda lost count of everything I've tried.

Will greatly appreciate any help.

Thanks a stack.

Answer 1

Try specifying 500.0 for the paymentAmount. I like to use Fiddler2 to test out things like this: http://www.fiddler2.com/fiddler2/.

This link sheds some light on binding decimal values: http://digitalbush.com/2011/04/24/asp-net-mvc3-json-decimal-binding-woes/

EDIT: I set up a test project using your classes and was able to POST your JSON (but tweaking the paymentAmount) using Fiddler to the controller without any problems.

The request is shown in the top pane, the response (formatted as JSON by Fiddler) in the bottom.

The referece property in your class is misspelt, so that comes back as null.

Answer 2

The only way I could get a value bound to 'param' was by defining it as string. I then used the JavascriptSerializer to deserialize it into my desired object.

[HttpPost]
public JsonResult processPayment(string param)
{
    JavaScriptSerializer serializer = new JavaScriptSerializer();
    try
    {
        List<paymentsViewModelJSONPayment> payments = serializer.Deserialize<List<paymentsViewModelJSONPayment>>(param);

param value at breakpoint

"[{\"reference\":\"0\",\"paymentDate\":\"01-02-2012\",\"paymentMethodID\":\"7\",\"paymentAmount\":500,\"bankNameID\":\"8\",\"bankBranchCode\":\"\",\"drawerName\":\"\",\"chequeNo\":\"\",\"userID\":\"00000000-0000-0000-0000-000000000000\",\"statementNo\":\"\",\"additionalReference\":\"\"}]"

payments value in VS watchlsit

    payments    Count = 1
System.Collections.Generic.List<PCNS.viewModels.paymentsViewModelJSONPayment>
    [0] {PCNS.viewModels.paymentsViewModelJSONPayment}  PCNS.viewModels.paymentsViewModelJSONPayment
    additionalReference ""  string
    bankBranchCode  ""  string
    bankNameID  "8" string
    chequeNo    ""  string
    drawerName  ""  string
    paymentAmount   500 decimal
    paymentDate "01-02-2012"    string
    paymentMethodID "7" string
    referece    null    string
    statementNo ""  string
    userID  "00000000-0000-0000-0000-000000000000"  string

Seems like a bit of a hack, but it's working.