使用 ajax 将复杂对象发送到 Web api 控制器答案

【问题标题】：Send complex object to a web api controller with ajax使用 ajax 将复杂对象发送到 Web api 控制器
【发布时间】：2018-01-22 19:46:20
【问题描述】：

我需要传递一个名为 vm 的复杂对象，它有一个对象“Budget”和一个数组“BudgetDetails”，其中填充了 html 表的行，当我尝试将这个复杂对象发送到我的 api 控制器时ajax 我在控制台中有这个错误消息“Uncaught RangeError: Maximum call stack size exceeded”。

这是我的 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。当我尝试使用“Budget”对象发送“BudgetDetails”数组时出现错误。

这是我的 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; }
}

我真的不知道问题出在哪里。

【问题讨论】：

data: JSON.stringify{{ newBudgetDto: vm }) 并添加contentType: 'application/json'
BudgetDetailDto 可能有对 BudgetDto 的引用，并且在尝试反序列化响应时递归地杀死堆栈。或者 BudgetDto 有 NewBudgetDto 的参考。
我把 JSON.stringify{{ newBudgetDto: vm }) 和 contentType: 'application/json' 现在发送空值。

标签： javascript jquery ajax asp.net-mvc asp.net-web-api

【解决方案1】：

如果你想发送复杂的，那么你需要使用 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);

                }
            });

弃用通知：jqXHR.success()、jqXHR.error() 和 jqXHR.complete() 回调从 jQuery 3.0 开始被删除。您可以改用 jqXHR.done()、jqXHR.fail() 和 jqXHR.always()。

【讨论】：