locked
Passing Objects to Controller - Ajax MVC RRS feed

  • 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; }
      }

    Friday, August 2, 2019 10:51 PM

Answers

  • 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 _

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, August 3, 2019 1:01 AM

All replies

  • 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 _

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, August 3, 2019 1:01 AM
  • 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

    Saturday, August 3, 2019 2:29 AM
  • User-474980206 posted

    sorry the index is in the wrong place.

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

    Saturday, August 3, 2019 4:15 AM
  • User490317677 posted

    Not problem :) 

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

    and everything workin now :)

    Thanks for help :)

    Saturday, August 3, 2019 3:39 PM