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.