Pass the list of data from view to controller not working?

im trying to pass the list of data from view to controller but when i set break point to controller. only 1 value can pass to controller and that is my problem. see the reference code. thanks

VIEW

<div class="ContainerBanner">
<br />
<div class="row">
<form id="order-frm" action="">
@Html.HiddenFor(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 = "enter quantity", @onblur = "displayTextBoxes()", @id = "text-count" })
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("index", "order")" class="btn btn-default btn-sm"><i class="fa fa-long-arrow-alt-left">i> Back to lista>
form>
div>
<div class="row">
<h3 class="orders">Empty box Trackingh3><br />
<table id="EmptyBoxList" class="display table table-striped" style="width:100%">
<thead>
<tr>
<th style="width: 50%">Clientth>
<th style="width: 25%">Date Deliveredth>
<th style="width: 25%">Tracking Numberth>
<th>Depositth>
<th style="width: 25%">th>
tr>
thead>
<tbody>tbody>
table>
div>
div>

Script

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 model = $('#order-frm').serializeArray()
.reduce(function (a, c) {
a[c.name] = c.value;
return a;
}, {});
var idOrder = $('#hid-order-id').val();
$.ajax({
type: 'POST',
url: '@Url.Action("addemptybox", "order")',
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ 'model': model, 'tracking': tracking, 'deposit': deposit, 'id': idOrder }),
dataType: "json",
success: function () {
alert("Data Added Successfully");
},
error: function () {
alert("Error while inserting data");
}
});
});

Cotroller

public ActionResult AddEmptyBox(EmptyBoxFormModel model, string[] tracking, string[] deposit, int id)
{
if (ModelState.IsValid)
{
try
{
var emptyBoxList = new List();
for (int i = 0; i < tracking.Length; i++)
{
var box = new EmptyBox
{
ClientId = null,
OrderId = id,
DateDelivered = null,
TrackingNumbers = tracking[i],
Deposit = string.IsNullOrWhiteSpace(deposit[i]) ? 0 : Convert.ToDecimal(deposit[i]),
};
emptyBoxList.Add(box);
}
_emptyBoxService.AddRange(emptyBoxList);
TempData["msg"] = "";
return RedirectToAction("addemptybox");
}
catch (Exception ex)
{
ModelState.AddModelError("CustomError", ex.InnerException.Message);
}
}
model = PrepareEmptyBoxFormModel(model);
return View(model);
}

Hello, you can method this for passing data..

1. In controller you can return like this :

return View(emptyBoxList);

2. Change Javascript like below :

$.ajax({
type: 'POST',
url: '@Url.Action("addemptybox", "order")',
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ 'model': model, 'tracking': tracking, 'deposit': deposit, 'id': idOrder }),
dataType: "json",
success: function (data) {
if (data.length > 0) {
var mytable = $('#EmptyBoxList').DataTable({
destroy: true
});
mytable.clear();
for (var x = 0; x < data.length; x++) {
mytable.row.add([data[x].value1, data[x].value2, data[x].value3, data[x].value4]);
}
mytable.draw();
}
alert("Data Added Successfully");
},
error: function () {
alert("Error while inserting data");
}
});

3 Replies

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

Denmark Puso6y ago
Thank
Ecco Suprastyo and
Salman Beg
when i try to break point in view in this part they pass 1 value only

var tracking = [];
var deposit = [];

so that i think i have a problem on this code below

var tracking = '';
var deposit = '';
for (i = 1; i <= count; i++)
{
$('#testing-container').append('' + tracking + deposit + '');
}
Ecco Suprastyo6y ago
Hello, you can method this for passing data..
1. In controller you can return like this :
return View(emptyBoxList);
2. Change Javascript like below :
$.ajax({
            type: 'POST',
            url: '@Url.Action("addemptybox", "order")',
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({ 'model': model, 'tracking': tracking, 'deposit': deposit, 'id': idOrder }),
            dataType: "json",
            success: function (data) {
                if (data.length > 0) {
                    var mytable = $('#EmptyBoxList').DataTable({
                        destroy: true
                    });

                    mytable.clear();
                    for (var x = 0; x < data.length; x++) {
                       mytable.row.add([data[x].value1, data[x].value2, data[x].value3, data[x].value4]);
                    }
                    mytable.draw();
                }
                alert("Data Added Successfully");
            },
            error: function () {
                alert("Error while inserting data");
            }
        });
Salman Beg6y ago
Before Ajax call first check whether you are getting value in all the array or not. Also check are you getting any error in inspect element.