Share via

send array using ajax to web api mvc

Question

Wednesday, August 3, 2016 6:43 AM

I'm trying to send data from ajax to web api

this is my class

public class itmFlavour
        {
            public int flavourId { get; set; }
            public string flavour { get; set; }
            public string boxbarcode { get; set; }
            public string displaybarcode { get; set; }
            public string unitbarcode { get; set; }
            public string grossweight { get; set; }
            public string packbarcode { get; set; }
            public string HSCode { get; set; }
            public string pachging { get; set; }
        }

this is my ajax

$(".editFlavour").click(function () {
            var id = $(this).attr('id');
            var arrayOfValues = new Array();
            var flavour = $(this).parents().find('.flavour').val();
           
            var unitBarCode = $(this).parents().find('.unitBarCode').val();
           
            var boxBarCode = $(this).parents().find('.boxBarCode').val();
          
            var displayBarCode = $(this).parents().find('.displayBarCode').val();

            
            var grossWeight = $(this).parents().find('.grossWeight').val();
          
            var packBarCode = $(this).parents().find('.packBarCode').val();
           
            var HSCode1 = $(this).parents().find('.HSCode1').val();
           
            var packaging1 = $(this).parents().find('.packaging1').val();
            var people = [];
            people.push({ flavourId: id, flavour: flavour, boxbarcode: boxBarCode, displaybarcode: displayBarCode, unitbarcode: unitBarCode, grossweight: grossWeight, packbarcode: packBarCode, HSCode: HSCode1, pachging: packaging1 });
            
            
           
            $.ajax({
                url: "/api/item/editFlavour/" + id,
                type: 'post',
                data: {'data':people},
                traditional: true,
                success: function (data) {
                    window.location.reload(true);
                }
            });

        });

this is my web api:

 [System.Web.Http.AcceptVerbs("GET", "POST")]
        [System.Web.Http.HttpGet]
        public IHttpActionResult editFlavour(int id,itmFlavour data)
        {
         //do my code
            return Ok();
        }

when debugging the code I notice that the data of datatype itmFlavour in the web api is always null.

can someone help me what am I missing?

All replies (2)

Wednesday, August 3, 2016 3:06 PM âś…Answered

couple issues with your code. 

1) you are trying to send an array of people from the javascript, but the webapi is not expecting an array

2) you are not posting the data properly. if you pass an object to jQuery ajax, its used a map to produce name/value pics for posting. the map contest the value to a string. in you case the value is an array of objects (containing one object). the postdata will be:

    data=[object Object]

you should use a JSON post:

var data = { flavourId: id, flavour: flavour, boxbarcode: boxBarCode, 
             displaybarcode: displayBarCode, unitbarcode: unitBarCode, 
             grossweight: grossWeight, packbarcode: packBarCode, 
             HSCode: HSCode1, pachging: packaging1
};
           
$.ajax({
   url: "/api/item/editFlavour/" + id,
   type: 'post',
   data: JSON.stringify(data),
   contentType = "application/json",
   success: function (data) {
           window.location.reload(true);
   }
});

though because you are doing a window.reload(), I'm not sure why you are not doing a standard form post. 

Wednesday, August 3, 2016 6:58 AM

Hi ,  

I did the same hope this will help you ,

public class Employee
{
public string Name { get; set; }
public string Address { get; set; }
public string Email { get; set; }
public long Number { get; set; }
}

Controller Code :

public class EmployeeController : ApiController
{
//
// GET: /Employee/
Employee[] employee = new Employee[]
{
new Employee{ Name="Nishant",Email="nishant.mittal19@gmail.com",Address="noida",Number = 1234567890},
new Employee{ Name="NishantM",Email="nishant.mittal19@gmail.com",Address="noida",Number = 16666666950},
new Employee{ Name="NishantK",Email="nishant.mittal19@gmail.com",Address="noida",Number = 123445455590},
new Employee{ Name="NishantNM",Email="nishant.mittal19@gmail.com",Address="noida",Number = 12342323245890}

};

public Employee Get()
{
return new Employee{ Name="Nishant",Email="nishant.mittal19@gmail.com",Address="noida",Number = 1234567890};
}

}

HTML Code :

<script>
var uri = 'api/employee';

$(document).ready(function () {
// Send an AJAX request
debugger;
$.getJSON(uri)
.done(function (data) {
// On success, 'data' contains a list of Employee.
debugger;
$.each(data, function (key, item) {
// Add a list item for the product.
$('<li>', { text: formatItem(item) }).appendTo($('#products'));
});
});
});

function formatItem(item) {
return item.Name + ':' + item.Number;
}

function find() {
var id = $('#prodId').val();
debugger;
$.getJSON(uri + '/' + id)
.done(function (data) {
$('#product').text(formatItem(data));
})
.fail(function (jqXHR, textStatus, err) {
$('#product').text('Error: ' + err);
});
}
</script>

  • Last updated on