Issue posting data from a Kendo Grid to an ASP.NET MVC Controller

Question

I'm having issues posting data to an MVC controller from a Kendo grid. The specific action I'm trying to post looks something like this:

public JsonResult Search(Credential searchParam)
{
    // Perform search
}

The Credential object it accepts is a POCO with an inner class and is defined as:

public class Credential
{
    public class License
    {
        public string Prefix { get; set; }
        public string Number { get; set; }
        public string SubCategory { get; set; }

       // Constructors...
    }

    public string FirstName { get; set; }
    public string LastName { get; set; }
    public License LicenseNumber { get; set; }

    // Constructors...
}

I'm thinking my issue is with how the Kendo grid is sending the Credential my datasource is defined as:

dataSource: {
    transport: {
        read: {
            url: Router.action("Search", "Index"),
            type: "post",
            contentType: "application/json",
            dataType: "json",
            data: {
                FirstName: $(".firstName").val(),
                LastName: $(".lastName").val(),
                LicenseNumber: {
                    Prefix: $(".cred1").val(),
                    Number: $(".cred2").val(),
                    SubCategory: $(".cred3").val()
                }
            }
        }
    },
    pageSize: 20
},

Currently, the controllers throws up with an error that says: Invalid JSON primitive: FirstName.

I've tried wrapping the field names in single and double quotes as well as tying to send the same data with JSON.stringify with no avail.

What am I doing wrong here?

Answer 1

Did you try:

var license =  { 
                  LicenseNumber: {
                    'Prefix': $(".cred1").val(),
                    'Number': $(".cred2").val(),
                    'SubCategory': $(".cred3").val()
                  }
               }
var data = { 'FirstName': $(".firstName").val(), 'LastName': $(".lastName").val(), 'LicenseNumber': license }

dataSource: {
      // code
      data: JSON.stringify(data)
      // code
}

Answer 2

Try the following (note the additional quotation marks for data ):

dataSource: {
    transport: {
        read: {
            url: Router.action("Search", "Index"),
            type: "post",
            contentType: "application/json",
            dataType: "json",
            data: "{
                'FirstName': $(".firstName").val(),
                'LastName': $(".lastName").val(),
                'LicenseNumber': {
                    'Prefix': $(".cred1").val(),
                    'Number': $(".cred2").val(),
                    'SubCategory': $(".cred3").val()
                }
            }"
        }
    },
    pageSize: 20
},