javascript - Send complex object to a web api controller with ajax -
i need pass complex object called vm has 1 object 'budget' , 1 array 'budgetdetails' populated rows of html table, , when try send complex object api controller ajax have error message in console "uncaught rangeerror: maximum call stack size exceeded".
this jquery code:
$(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"); } }); }); });
if put comment part insert each row of html table in array not show me errors in console, , sends without problem object 'budget' api. error appears when try send 'budgetdetails' array 'budget' object.
this api controller:
[httppost] public ihttpactionresult createbudget(newbudgetdto newbudgetdto) { return ok(); }
this newbudgetdto class:
public class newbudgetdto { public budgetdto budget { get; set; } public list<budgetdetaildto> budgetdetails { get; set; } }
this budgetdto class:
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; } }
this budgetdetaildto class:
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; } }
i don't know problem be.
when ever if want send complex need use stringfy. here demo , hope work @ side.
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 see value of budgetdetailarr | budgetobj console.log(budgetdetailarr) console.log(budgetobj) var sendobj = { budget: budgetobj, // same model property name budgetdetails: budgetdetailarr // same model property name } //ajax code $.ajax({ type: 'post', async: false, url: '/api/budgets', contenttype: 'application/json; charset=utf-8', //send type of data sever datatype: 'text', //retrun type of data server traditional: true, data: json.stringify(sendobj), success: function (response, statustext, xhr) { console.log(response) }, error: function (xmlhttprequest, textstatus, errorthrown) { alert(xmlhttprequest.responsetext); } });
Comments
Post a Comment