CODEWITHSUNDEEP
javascriptc#ajax
el_M
el_M

Reputation: 159

Post Array using AJAX to MVC C#

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:

Network Image

Upvotes: 1

Views: 2338

Answers (2)

Tetsuya Yamamoto
Tetsuya Yamamoto

Reputation: 24957

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.

Upvotes: 3

RizkiDPrast
RizkiDPrast

Reputation: 1725

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

Upvotes: 0

Related Questions