Panorama Média Global

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.

Accepted Answer

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.

Panorama Média Global

Sending Complex Object via Ajax to Controller [Duplicate]

2 Answers

Elena Rostova