Pass the value of model into controller using ajax?

Question

User1135990798 posted

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 and 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>

<div class="row">
<div class="col-md-12">
@Html.HiddenFor(x => x.Error, new { @class = "form-control", })
</div>
</div>

<br />
<button type="submit" id="btnSubmit" class="btn btn-primary btn-sm"><i class="fas fa-save"></i> &nbsp;Save Emptybox</button>
<a href="@Url.Action("emptyboxes", "order")" class="btn btn-default btn-sm"><i class="fa fa-long-arrow-alt-left"></i> &nbsp;Back to list</a>
</form>
</div>

<script type="text/javascript">

function displayTextBoxes() {
var count = $('#text-count').val();

var tracking = '<td><input type="text" name="Tracking" class="form-control tracking"></td>';
var deposit = '<td><input type="text" name="Deposit" class="form-control deposit" placeholder="fill up this if with deposit"></td>';

for (i = 1; i <= count; i++)
{
$('#testing-container').append('<tr>' + tracking + deposit + '</tr>');
}
}

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");
}
});
});

</script>

Answer 1

User-474980206 posted

The following code:

     var order = $('#order-frm').serialize();

creates a string in form urlencoded format. The JSON.stringfy() will serialize this to a string not an object. If you used serializeArray() you’d get an array of objects with a name and a value, which you could create a post back model. Also the binding name is order in the json, model in the action. I assume you really wanted to pass an json object that matched the model. If model is flat (no property is an object) the you use a reduce.

var model = $('#order-frm')
        .serializeArray()
        .reduce(function(a,c) {
            a[c.name] = c.value;
            return a;
        },{});

Answer 2

User1135990798 posted

hi @bruce Thank you so much. it works.