Search code examples
javascriptc#asp.net-coreaxiosasp.net-core-2.1

.net core 2.1 binding array in ajax request from axios and Vue.js

I've got a few checkboxes that are bound to a Vue.js data property. On click of a button, I take the value of this property and use axios to send a GET request to my ASP.NET Core 2.1 controller to handle the request.

For some reason, a particular parameter never seems to get bound from the request and is always empty.

I can't seem to get the ratings parameter to bind. All the other parameters bind fine.

Controller code

public IActionResult Get(float lat, float lng, int radius, int fetch,  List<int> ratings )
{
    return this.Json(locationService.FindClosestsBusinesses(lng, lat, radius, fetch));
}

Vue.js / Javascript 

axios.get(query, {
    params: {
        ratings: app.ratings,
        lat: latitude,
        lng: longitude,
        radius: app.distance,
        fetch: app.fetchamount
    }
}).then(function(response) {
    app.datapoints = response.data;
});

app.ratings is a simple array ["5", "1"]

When inspecting chromes networking tab, the headers currently look like this: enter image description here

What change do I need to make to allow app.ratings to successfully bind to my List<int> ratings controller action parameter on the ajax request?

Solution

  • The reason the binding is failing is due to the extra [] on the end of ratings in the query-string parameters. ASP.NET Core will expect this to be simply ratings (not ratings[]). One option for making this work is to inform ASP.NET Core that the name is in fact ratings[], which can be done by using the FromQuery attribute with a Name property, like this:

    public IActionResult Get(float lat, float lng, int radius, int fetch,
    [FromQuery(Name="ratings[]")] List<int> ratings)
{
    ...
}

    There's a GitHub issue for exactly this problem here, where other suggestions are also made for handling this.