jquery - Passing an JSON array to MVC Web API via GET

Question

I know there are tons of answers for this topic, but couldn't find the solution to my issue. I have an ASP.NET MVC Web API that looks like this:

    [HttpGet]
    public IList<Country> GetCountryList(List<long> idList)

And I've tried calling it like this:

    $.ajax({
        dataType: "json",
        data: JSON.stringify({idList: listOfIds}),            
        type: "GET",
        url: "api/v1/util/CountryList",
        success: function (result) {
            alert(result);
        }
    });

The URL then looks like this:

https://localhost/supertext/api/v1/util/CountryList?{%22idList%22:[46,14,62,83,120]}

Alternative:

    $.ajax({
        dataType: "json",
        data: {
            idList: JSON.stringify(listOfIds),
        }          
        type: "GET",
        url: "api/v1/util/CountryList",
        success: function (result) {
            alert(result);
        }
    });

URL:

https://localhost/supertext/api/v1/util/CountryList?idList=%5B46%2C14%2C62%2C83%2C120%5D

Both methods don't work.

Do I really have to send and receive it as a string or use POST?

Answer 1

No, don't try to be sending JSON in a GET request. Use JSON with other verbs which have body, such as POST and PUT.

Do it the standard way, by decorating your action parameter with the [FromUri] attribute:

public IList<Country> GetCountryList([FromUri] List<long> idList)
{
    ...
}

and then just trigger the AJAX request:

$.ajax({
    url: 'api/v1/util/CountryList',
    type: 'GET',
    data: { idList: [1, 2, 3] },
    traditional: true,
    success: function (result) {
        console.log(JSON.stringify(result));
    }
});

Further recommended reading for you about how the model binding in the Web API works:

http://www.asp.net/web-api/overview/working-with-http/sending-html-form-data,-part-1