send List into mvc controller with ajax

Question

I have a List which look like the following

I want to send this list into my controller,

I am using ajax call to send data from client side to server side

here is my ajax call

    $.ajax({
        url: '/Main/updateTripundHoliday',
        data: d.weekendLeave,
        type: "GET",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (response) {

        }
    });

and my method in controller

    public bool updateHoliday(List<Holidaysclass> data)
    {
        for (var i = 0; i < data.Count(); i++)
        {
            insertHolidays(data.ElementAt(i).Date, data.ElementAt(i).Day, data.ElementAt(i).HolidayName, data.ElementAt(i).isActive, data.ElementAt(i).currentYear, data.ElementAt(i).isHolidayWeekend, data.ElementAt(i).OfficialID);
        }
        return true;
    }

here my List<Holidaysclass> data is showing null

what can I do here?

@AlekseySolovey `$http` is this allowed in jquery. I think not — Ameya Deshpande, Oct 26 '18 at 11:06
@AmeyaDeshpande the question *was* tagged with `angularjs` (hence, the use of a `controller`), and jQuery is not part of AngularJS digest cycle, so it's better to use `$http` service instead of `$.ajax` — Aleksey Solovey, Oct 26 '18 at 11:09

Ameya Deshpande · Accepted Answer · 2018-10-29T09:53:46.483

To send data from browser to controller you need to use POST type and then pass data inside ajax call. you can directly map your entites in action method.

 $.ajax({
        url: '/Main/updateTripundHoliday',
        data: d.weekendLeave,
        type: "POST",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (response) {

        }
    });

and in controller put HttpPost Data Annotation

 [HttpPost]
 public bool updateHoliday(List<Holidaysclass> data)
    {
        for (var i = 0; i < data.Count(); i++)
        {
            insertHolidays(data.ElementAt(i).Date, data.ElementAt(i).Day, data.ElementAt(i).HolidayName, data.ElementAt(i).isActive, data.ElementAt(i).currentYear, data.ElementAt(i).isHolidayWeekend, data.ElementAt(i).OfficialID);
        }
        return true;
    }

score 0 · Answer 2 · answered Oct 26 '18 at 11:07

Using ajax get method we cant send data from client to server is not best way. try using POST method send data from client to server.

Reference : https://api.jquery.com/jquery.post/

 $.ajax({
    url: '/Main/updateTripundHoliday',
    data: d.weekendLeave,
    type: "POST",
    ......
});

score 0 · Answer 3 · answered Oct 26 '18 at 11:11

You can do it like this :

$(document).ready(function () {
    var things = [
        { id: 1, color: 'yellow' },
        { id: 2, color: 'blue' },
        { id: 3, color: 'red' }
    ];      

    things = JSON.stringify({ 'things': things });

    $.ajax({
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        type: 'POST',
        url: '/Home/PassThings',
        data: things,
        success: function () {          
            $('#result').html('"PassThings()" successfully called.');
        },
        failure: function (response) {          
            $('#result').html(response);
        }
    }); 
});

Please follow this link for more information : link

score 0 · Answer 4 · answered Oct 26 '18 at 11:37

You can not post data in get request. Instead you need to use POST type request. Here is your updated request.

$.ajax({
        url: '/Main/updateTripundHoliday',
        data: d.weekendLeave,
        type: "POST",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (response) {

        }
    });

Also your action should have [HttpPost] annotation.

score 0 · Answer 5 · answered Oct 26 '18 at 12:03

try this:

$.ajax({
        url: '/Main/updateHoliday',
        data: {list: d.weekendLeave},
        type: "POST",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (response) {

        }
    });

[HttpPost]    
public bool updateHoliday(List<Holidaysclass> list)

send List into mvc controller with ajax

5 Answers5