Post Array using AJAX to MVC C#

Question

I am trying to post an array to my MVC Action but I continue to receive a null value.

    //Send List of services to controller
$('#submitButton').click(function () {
    $.ajax({
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        type: 'GET',
        url: '/Appointments/GetListOfServices',
        data: JSON.stringify({ CheckedItems: checkedItems }),
        traditional: true,
        success: function (data) {
            alert(data.Result);
        },
        failure: function (response) {
            $('#result').html(response);
            console.log("failed");
        }
    }); 
});

When I call the GetListOfServices function I am receiving a null value

        public JsonResult GetListOfServices(int[] CheckedItems)
    {
        Console.WriteLine(CheckedItems);
        return Json(new { message= "OK" });
    }

When I examine the console and the Network tabs in my browser, it is showing the following:

You're sending a JSON string containing objects. If you want to pass raw array, use traditional: true option & don't use JSON.stringify. — Tetsuya Yamamoto
– Tetsuya Yamamoto, Commented Sep 27, 2018 at 8:07
what is this... this code is not a proper to deliver the content, try use httppost instead of get — ryan1555
– ryan1555, Commented Sep 27, 2018 at 8:09
@TetsuyaYamamoto If I follow your suggestion, I still have a null value but instead my query string parameters are "undefined" — el_M
– el_M, Commented Sep 27, 2018 at 8:10
Use HttpPost in JsonResult action and type: 'POST' in your AJAX. The JS array is never intended to use with GET method which sends data through query string. — Tetsuya Yamamoto
– Tetsuya Yamamoto, Commented Sep 27, 2018 at 8:11

Tetsuya Yamamoto · Accepted Answer · 2018-09-27 08:25:23Z

First thing you should consider is if the array content is large, then array contents may exceed the query string limit, hence you may try using POST method instead. If you want to pass array as controller action parameter, you need to set traditional: true option in AJAX call:

$('#submitButton').click(function () {
    $.ajax({
        dataType: 'json',
        type: 'GET' // or 'POST'
        traditional: true,
        url: '/Appointments/GetListOfServices',
        data: { CheckedItems: checkedItems },
        traditional: true,
        success: function (data) {
            alert(data.message);
        },
        failure: function (response) {
            $('#result').html(response);
            console.log("failed");
        }
    }); 
});

As an alternative, you can use $.param() with traditional property set to true:

$('#submitButton').click(function () {
    $.ajax({
        dataType: 'json',
        type: 'GET', // or 'POST'
        url: '/Appointments/GetListOfServices',
        data: $.param({ CheckedItems: checkedItems }, true),
        success: function (data) {
            alert(data.message);
        },
        failure: function (response) {
            $('#result').html(response);
            console.log("failed");
        }
    }); 
});

Finally, don't forget to mark JsonResult action as POST method by adding [HttpPost] attribute only if you're using POST:

[HttpPost]
public JsonResult GetListOfServices(int[] CheckedItems)
{
    Console.WriteLine(CheckedItems);
    return Json(new { message= "OK" });
}

If you're using GET, make sure JsonRequestBehavior.AllowGet is set:

public JsonResult GetListOfServices(int[] CheckedItems)
{
    Console.WriteLine(CheckedItems);
    return Json(new { message= "OK" }, JsonRequestBehavior.AllowGet);
}

Note: You can try shorter syntax with jQuery.getJson(), but still requires traditional: true option:

$.getJSON('/Appointments/GetListOfServices', $.param({ CheckedItems: checkedItems }, true), function (data) {
    alert(data.message);
});

With this setup, the array should be properly received as action method parameter.

RizkiDPrast · Accepted Answer · 2018-09-27 08:23:18Z

0

you just need to remove Json.stringify (unless you want to create Custom Model Binder to convert json string to int[]) then it will works.

You also need to add JsonRequestBehavior.AllowGet in your controller action

return Json(new { message = "OK", JsonRequestBehavior.AllowGet });

to allow Get response in JSON

edited Sep 27, 2018 at 8:23

answered Sep 27, 2018 at 8:17

RizkiDPrast

1,7251 gold badge15 silver badges22 bronze badges

Collectives™ on Stack Overflow

Post Array using AJAX to MVC C#

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related