Senden eines komplexen Objekts über Ajax an den Controller

Question

Ich versuche meinen Controller über Ajax aufzurufen, indem ich einige komplexe Daten übergebe.

Die Aktionsmethode meines Controllers.

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:'); } 
    }); 

Ansicht Modell (keine Sorge über Zeichenfolge für Datetime verwendet wird - es ist nur zum Testen)

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

Als ich Aktionsmethode nennen Das Objekt enthält folgende Informationen:

{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 

Jede Hilfe zur Lösung dieses Problems wird sehr geschätzt.

Answer 1

contentType ist die Art der Daten, die Sie senden, also application/json; Der Standardwert ist application/x-www-form-urlencoded; Zeichensatz = UTF-8. Wenn Sie application/json verwenden, müssen Sie JSON.stringify() verwenden, um JSON Objekt zu senden.

JSON.stringify() wandelt ein JavaScript-Objekt in json Text um und speichert es in einer Zeichenfolge.

$.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:'); } 
}); 

Außerdem haben Sie HttpPost Verb verwenden, um eine post Anfrage auszuführen.

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

Answer 2

Ich nehme an, Sie haben JSON.stringify(quoteDetails) zu tun, um es als JSON-Objekt zu senden.

Stellen Sie außerdem sicher, dass Sie den JSON analysieren, wenn Sie ihn auf der Serverseite erhalten.