Passing Objects to Controller - Ajax MVC

Question

User490317677 posted

Hi

I have form where i can add One by one Customers:

 <form>
    <input name="CustomerNumber" id="CustomerNumber" >
    <input type="email" id="Email" name="Email">
    <button type="button" onclick="BtnAddCustomers();">ADD</button>
 </form>

Than I load Customers info to table dynamically by getting CustomerNumber from form and than pass CustomerNumber to Controller To Get Customer info:

    function BtnAddCustomers() {

        var params = $("#CustomerNumber").val();

        $.ajax({
            type: "GET",
            url: "/User/GetCustomerContactInfo?ids=" + params,
            dataType: 'json',
            success: function (res) {

                console.log(res);

                    holderHTML += '<tr id="row' + res.CustomerNo + '">';
                    holderHTML += '<td><input type="text" id="NameOfCompany"  name="NameOfCompany" value="' + res.NameOfCompany + '" /></td>';
                    holderHTML += '<td><input type="text" id="CustomerNo"  name="CustomerNo" value="' + res.CustomerNo + '" /></td>';
                    holderHTML += '</tr>';

                   $('#output').append(holderHTML);

            },

            error: function () {
                console.log('something went wrong - debug it!');
            }
        })

    };

OutPut in Console:

>Object

1. CustomerNo: "10883"
2. NameOfCompany: "Test"

>Object

1. CustomerNo: "10886"
2. NameOfCompany: "Test 2"

and Output look like when contents loaded to table:

@model CreateCustomersNEmployee

<form id="CustomerNEmployeeForm">
<table class="table">
<tbody id="output">

<tr id="row10883">

<td>
<input type="text" id="NameOfCompany" name="NameOfCompany" value="Test">
</td>

<td>
<input type="text" id="CustomerNo" name="CustomerNo" value="10883">
</td>

</tr>

<tr id="row10886">

<td>
<input type="text" id="NameOfCompany" name="ContactInfos.NameOfCompany" value="Test 2">
</td>

<td>
<input type="text" id="CustomerNo" name="ContactInfos.CustomerNo" value="10886">
</td>
</tr>

</tbody>
</table>
</form>

<button type="button" onclick="CreateCustomerNEmployees();">Create</button>

And when contents loaded as you see i wrapped table to form and there is a button, which means when i hit button form

going to be Serialized Not problem so far  :

<script>
    function CreateCustomerNEmployees() {
 
        var model = $("#CustomerNEmployeeForm").serialize();

        console.log(model);

        $.ajax({
            "url": '@Url.Action("CreateCustomers", "User")',
            "method": "POST",
            "data": model,
            "dataType": "json",
            "traditional": true,
           
            complete: function () {

            }

        });
    }


</script>

OutPut:

NameOfCompany=Test&CustomerNo=10883&NameOfCompany=Test2&CustomerNo=10886

Her is my problem how can i pass both Items/objects to Controller?! 

Right now when i debug, model returns null and its because model received only single item and not a list , but i need pass both items to Controller!

Controller:

[HttpPost]
public JsonResult CreateCustomers(List<CreateCustomersNEmployee> model)
{
   return Json(model, JsonRequestBehavior.AllowGet);

}

Model:

public class CreateCustomersNEmployee
    {
        public string CustomerNo { get; set; }
        public string NameOfCompany { get; set; }
  }

Answer 1

User-474980206 posted

you post data should have worked. though normally for a list you include the array index in the name, so the preferred postdate should be:

NameOfCompany[0]=Test&CustomerNo[0]=10883&NameOfCompany[1]=Test2&CustomerNo[1]=10886

success: function (res) {
   var i = $('table tr').length; // should add id to table
   var nameIndex = '[' + i + ']';
   var idIndex = '_' + i + '_';

   holderHTML += '<tr id="row' + res.CustomerNo + '">';
   holderHTML += '<td><input type="text" id="NameOfCompany' + idIndex + '"'
         + ' name="NameOfCompany' + nameIdex + '"' 
         + ' value="' + res.NameOfCompany + '" /></td>';
   holderHTML += '<td><input type="text" id="CustomerNo' + idIndex + '"'
         + ' name="CustomerNo' + nameIdex + '"' 
         + ' value="' + res.CustomerNo + '" /></td>';
   holderHTML += '</tr>';
...

note: only names support chars [], for the id's use _

Answer 2

User490317677 posted

I just include the array index both in name and id as you suggest ,and i can see postdata is like : 

NameOfCompany[0]=Test&CustomerNo[0]=10883&NameOfCompany[1]=Test2&CustomerNo[1]=10886

but i dont understand why , model returns null or count=0

Answer 3

User-474980206 posted

sorry the index is in the wrong place.

[0].NameOfCompany=Test&[0].CustomerNo=10883&[1].NameOfCompany=Test2&[1].CustomerNo=10886

Answer 4

User490317677 posted

Not problem :) 

i also find out should use serializeArray() instead of serialize()

and everything workin now :)

Thanks for help :)