複雑なオブジェクトをajaxを使ってWeb APIコントローラに送信

Question

私は、1つのオブジェクト 'Budget'と1つの配列 'BudgetDetails'を持つvmという複雑なオブジェクトを渡す必要があります。 ajaxを使ってこの複雑なオブジェクトを私のapiコントローラに送信する "Uncaught RangeError：最大呼び出しスタックサイズを超えました"というエラーメッセージが表示されます。

これは私のjQueryのコードです：私はコメントとして、あなたが私のコンソールにエラーが表示されない配列でHTMLテーブルの各行を挿入部分を入れて、とせずに送信する場合

$(document).ready(function() { 

    var vm = { 
     Budget: {}, 
     BudgetDetails: [] 
    } 

    $("#submit").click(function() { 
      vm.Budget = { 
       DateIssue: $("#dateIssue").val(), 
       BudgetAccepted: $("#budgetAccepted").val(), 
       VehicleId: $("#vehicleId").val() 
      }; 

      $('#budgetDetail tr.detail').each(function (index, tr) {     
       var lines = $('td', tr).map(function (index, td) { 
        return $(td).text(); 
       }); 
       vm.BudgetDetails.push(lines); 
      }); 

      $.ajax({ 
       url: "/api/budgets", 
       method: "post", 
       data: vm, 
       success: function() { 
        console.log("ok"); 
       } 
      }); 
     }); 
}); 

APIにオブジェクト 'Budget'を発行してください。 'BudgetDetails'配列を 'Budget'オブジェクトと共に送信しようとするとエラーが表示されます。

これは私のAPIのコントローラーです：

[HttpPost] 
public IHttpActionResult CreateBudget(NewBudgetDto newBudgetDto) 
{   
    return Ok(); 
} 

これは私のNewBudgetDtoクラスです：

public class NewBudgetDto 
{ 
    public BudgetDto Budget { get; set; } 
    public List<BudgetDetailDto> BudgetDetails { get; set; } 
} 

これは私のBudgetDtoクラスです：

public class BudgetDto 
{ 
    public int Id { get; set; } 
    public DateTime DateIssue { get; set; } 
    public VehicleDto Vehicle{ get; set; } 
    public int VehicleId { get; set; } 
    public bool BudgetAccepted { get; set; } 
} 

これは私のBudgetDetailDtoクラスです：

public class BudgetDetailDto 
{ 
    public int Id { get; set; } 
    public int BudgetId { get; set; } 
    public int ProductId { get; set; } 
    public byte Quantity { get; set; } 
    public int Price { get; set; } 
    public int Discount { get; set; } 
    public int Total { get; set; } 
} 

私は本当に問題がどのようなものか分かりません。

Answer 1

複雑な場合は、文字列を使用する必要があります。 デモがあります。あなたの側でうまくいくことを願っています。

  var BudgetDetailArr = []; 
      var BudgetObj = { 
       DateIssue: $("#dateIssue").val(), 
       BudgetAccepted: $("#budgetAccepted").val(), 
       VehicleId: $("#vehicleId").val() 
      } 

      $('#budgetDetail tr.detail').each(function (index, tr) { 
       var lines = $('td', tr).map(function (index, td) { 
        return $(td).text(); 
       }); 
       BudgetDetailArr.push(lines); 
      }); 
      //console here to see value of BudgetDetailArr | BudgetObj 
      console.log(BudgetDetailArr) 
      console.log(BudgetObj) 

      var sendObj = { 
       Budget: BudgetObj, // same as model property name 
       BudgetDetails: BudgetDetailArr // same as model property name 
      } 

    //ajax code 
     $.ajax({ 
       type: 'POST', 
       async: false, 
       url: '/api/budgets', 
       contentType: 'application/json; charset=UTF-8', //send type of data to sever 
       dataType: 'text', //retrun type of data from server 
       traditional: true, 
       data: JSON.stringify(sendObj), 
       success: function (response, statusText, xhr) { 
       console.log(response) 

       }, 
       error: function (XMLHttpRequest, textStatus, errorThrown) {      
        alert(XMLHttpRequest.responseText); 

       } 
      });