Question

我需要传递一个名为vm的复杂对象，其中包含一个对象'Budget'和一个数组'BudgetDetails'，其中填充了html表的行，当我尝试将此复杂对象发送到我的api控制器时ajax我在控制台中出现此错误消息“Uncaught RangeError：超出最大调用堆栈大小”。

这是我的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'。当我尝试使用'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; }
}

我真的不知道问题是什么。

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

                }
            });

弃用通知：从jQuery 3.0开始，jqXHR.success（），jqXHR.error（）和jqXHR.complete（）回调被删除。您可以使用jqXHR.done（），jqXHR.fail（）和jqXHR.always（）代替。

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

1 个答案: