複雑なオブジェクトをajax経由でコントローラに送信

Question

いくつかの複雑なデータを渡すことでコントローラをajax経由で呼び出しようとしています。

マイコンの動作方法。

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

    return View(); 
} 

Javascriptコード：

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

ビューモデル（文字列をDateTimeのために使用されて心配しないでください - それはちょうどテストのためである）

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

私はアクションメソッドを呼び出すとオブジェクトには次の値が設定されます。

{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 

これを解決するための助けがあれば幸いです。

Answer 1

contentTypeは送信するデータのタイプですので、application/json;デフォルトはapplication/x-www-form-urlencodedです。 charset = UTF-8。

application/jsonを使用する場合は、JSONオブジェクトを送信するにはJSON.stringify()を使用する必要があります。

JSON.stringify()は、JavaScriptオブジェクトをjsonテキストに変換して文字列に格納します。

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

はまた、あなたがpost要求を実行するためにHttpPost動詞を使用する必要があります。

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

Answer 2

私はJSONオブジェクトとして送信するためにJSON.stringify(quoteDetails)をしなければならないとします。

また、jsonをサーバー側で受け取ったときに解析するようにしてください。