Sending complex object via ajax to controller [duplicate]

I'm trying to call my controller via ajax passing some complex data.

My controller's action method.

public ActionResult CalculatePremium(QuoteDetailsViewModel quoteDetails)
{ ViewBag.Message = "Your application description page."; return View();
}

Javascript code:

quoteDetails = { StartDate: '10-10-2016', Drivers: [{ Name: 'Test', Occupation: 'Test2', DateOfBirth: '10-10-1985'}, { Name: 'Test2', Occupation: 'Test4', DateOfBirth: '10-10-1945' }], Claims: ['5-5-2010'] }; $.ajax({ type: "GET", url: '/Home/CalculatePremium', contentType: "application/json; charset=utf-8", data: quoteDetails, dataType: "json", success: function () { alert('Success'); }, error: function (xhr, status, error) { alert('Error:'); } });

View model (don't worry about string being used for DateTime - it is just for testing)

public class QuoteDetailsViewModel
{ public string StartDate { get; set; } public List<Driver> Drivers { get; set; } public List<string> Claims { get; set; }
}
public class Driver
{ public string Name { get; set; } public string Occupation { get; set; } public string DateOfBirth { get; set; }
}

When I call action method the object is populated with the following:

{MotorInsuranceCalculator.Models.QuoteDetailsViewModel}
Claims: null
Drivers: Count = 2
StartDate: "10-10-2016"
quoteDetails.Drivers
Count = 2
[0]: {MotorInsuranceCalculator.Models.Driver}
[1]: {MotorInsuranceCalculator.Models.Driver}
quoteDetails.Drivers[0]
{MotorInsuranceCalculator.Models.Driver}
DateOfBirth: null
Name: null
Occupation: null
quoteDetails.Drivers[1]
{MotorInsuranceCalculator.Models.Driver}
DateOfBirth: null
Name: null
Occupation: null

Any help to resolve this would be greatly appreciated.

2 Answers

contentType is the type of data you're sending, so application/json; The default is application/x-www-form-urlencoded; charset=UTF-8.

If you use application/json, you have to use JSON.stringify() in order to send JSON object.

JSON.stringify() turns a javascript object to json text and stores it in a string.

$.ajax({ type: "POST", url: '/Home/CalculatePremium', contentType: "application/json; charset=utf-8", data: JSON.stringify(quoteDetails), dataType: "json", success: function () { alert('Success'); }, error: function (xhr, status, error) { alert('Error:'); }
});

Also, you have to use HttpPost verb in order to execute a post request.

[HttpPost]
public ActionResult CalculatePremium(QuoteDetailsViewModel quoteDetails)
{ ViewBag.Message = "Your application description page."; return View();
}

I suppose you have to do JSON.stringify(quoteDetails) in order to send it as an json object.

Also make sure you parse the json when you receive it on the server side.