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?

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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.

Answer 5

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)