用ajax發送複雜的對象到web api控制器

我需要傳遞一個名爲vm的複雜對象，它具有一個對象'Budget'和一個數組'BudgetDetails'，它填充了一個html表的行，當我嘗試發送這個複雜的對象到ajax我的api控制器我有控制檯「未捕獲RangeError：超出最大調用堆棧大小」這個錯誤消息。用ajax發送複雜的對象到web api控制器

這是我的jQuery代碼：

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

如果我把作爲註釋您插入HTML表的每一行中的數組不顯示我在控制檯中的任何錯誤的部分，並沒有發送問題的對象'預算'的API。當我嘗試將'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; } 
}

我真的不知道問題可能是什麼。

來源

2017-08-14 Juan José

'數據：JSON.stringify {{newBudgetDto：VM}）'和添加'的contentType：「應用/ json'' –

BudgetDetailDto probly具有BudgetDto的引用，並且它的遞歸殺死堆時的響應是試圖被反序列化。或BudgetDto具有NewBudgetDto的參考。 – Fals

我把JSON.stringify {{newBudgetDto：vm}）和contentType：'application/json'現在發送空值。 –

永遠如果你想發送複雜，那麼你需要使用stringfy。這裏是演示，我希望它能在你身邊工作。

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

       } 
      });

來源

2017-08-15 05:36:13

用ajax發送複雜的對象到web api控制器

回答

相關問題