Pass the value of model into controller using ajax?

im trying to pass the value of model into controller but my model is nulll but my other parameter in controller had a value like tracking, deposit, id. what is the problem in my code. im using mvc 5 asp.net.Thanks

My Controller

public ActionResult AddEmptyBox(EmptyBoxFormModel model, string[] tracking, string[] deposit, int id)

{
return View(model);
}

My View

<div class="ContainerBanner">
<br />
<div class="row">
<form id="order-frm" action="">
@Html.TextBoxFor(x => x.Id, new { @id = "hid-order-id" })
@Html.Raw(TempData["msg"])
@Html.Partial("_Message")
<div class="row">
<div class="col-md-2">
@Html.LabelFor(x => x.Quantity, new { @class = "form-label" })
@Html.TextBoxFor(x => x.Quantity, new { @class = "form-control", @placeholder = "Tracking number", @onblur = "displayTextBoxes()", @id = "text-count" })
div>
<div class="col-md-2">
<div class="form-group">
@Html.LabelFor(x => x.DateDelivered, new { @class = "form-label" })
<div class='input-group date' id='datetimepicker1'>
@Html.TextBoxFor(x => x.DateDelivered, new { @class = "form-control" })
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar">span>
span>
div>
div>
div>
div>
<br />
<div class="row">
<div class="col-md-12">
<div id="testing-container">div>
div>
div>
<br />
<button type="submit" id="btnSubmit" class="btn btn-primary btn-sm"><i class="fas fa-save">i> Save Emptyboxbutton>
<a href="@Url.Action("emptyboxes", "order")" class="btn btn-default btn-sm"><i class="fa fa-long-arrow-alt-left">i> Back to lista>
form>
div>

function displayTextBoxes() {
var count = $('#text-count').val();
var tracking = '';
var deposit = '';
for (i = 1; i <= count; i++)
{
$('#testing-container').append('' + tracking + deposit + '');
}
}
var tracking = [];
var deposit = [];
function getAllData() {
$('#testing-container').each(function () {
var t = $(this).find('.tracking').val();
var d = $(this).find('.deposit').val();
tracking.push(t);
deposit.push(d);
});
}
$('#btnSubmit').click(function () {
getAllData();
var order = $('#order-frm').serialize();
var idOrder = $('#hid-order-id').val();
$.ajax({
type: 'POST',
url: '@Url.Action("addemptybox", "order")',
contentType: "application/json; charset=utf-8",
data: JSON.stringify({order, 'tracking': tracking, 'deposit': deposit, 'id': idOrder }),
dataType: "json",
success: function () {
alert("Data Added Successfully");
},
error: function () {
alert("Error while inserting data");
}
});
});

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Salman Beg6y ago
Hi.
Can you try like this,
data: JSON.stringify({'model':order, 'tracking': tracking, 'deposit': deposit, 'id': idOrder }),
Otherwise you can create an array and pass it and which is shown in below links,
https://social.technet.microsoft.com/wiki/contents/articles/35826.passing-multiple-models-using-ajax-in-asp-net-mvc-step-by-step.aspx

https://www.quora.com/How-do-you-pass-multiple-parameters-in-a-URL-in-jQuery-Ajax

If it helps mark as answer.
Thanks.