Sending complex object via ajax to controller [duplicate]

Question

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.

Answer 1

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();
}

Answer 2

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.