How to pass array from Javascript to controller's action?

Question

I have JS function like this inside the @section Scripts of .cshtml view:

function SendIndexes() {
                    var selectedSortOption = $("#SortBy").find('option:selected');
                    var sortIndex = selectedSortOption.val();

                    var selectedFilterByTypeOption = $("#filter_marker_bytype").find('option:selected');
                    var filterByTypeIndex = selectedFilterByTypeOption.val();

                    var selectedFilterByScoreOption = $("#filter_marker_byscore").find('option:selected');
                    var filterByScoreIndex = selectedFilterByScoreOption.val();
                    

                    var selectedFilterByStatusOption = $("#filter_marker_bystatus").find('option:selected');
                    var filterByStatusIndex = selectedFilterByStatusOption.val();

                    var markerFilterIndexes = [filterByTypeIndex, filterByScoreIndex, filterByStatusIndex];


                    location.href = `/Markers/MarkersList?page=@Model.PagingInfo.CurrentPage&sortIndex=${sortIndex}&markerFilterIndexes=${markerFilterIndexes}`
                }

and the controller action signature like this:

public async Task<IActionResult> MarkersList(List<string> markersForUpdateIds, IEnumerable<int> markerFilterIndexes, int page = 1, string message = "", int sortIndex = 0)
{
...
}

The problem is that the array of three elements is not passed at all. However, if I only push a single variable (element) to this array, then it is passed to the controller's action as it should.

Why is this happening and how to have all three elements passed to the controller?

@charlietfl http://localhost:51803/Markers/MarkersList?page=1&sortIndex=0&markerFilterIndexes=2,0,0 — Ivan, Oct 20 '20 at 00:21
Does this answer your question? [Url.Action Passing string array from View to Controller in MVC#](https://stackoverflow.com/questions/11200637/url-action-passing-string-array-from-view-to-controller-in-mvc) — Heretic Monkey, Oct 20 '20 at 02:06

score 0 · Answer 1 · answered Oct 20 '20 at 01:53

I'll suggest you to use [FromQuery] attribute in your parameter and format your URL like this: myparam=myvalue1&myparam=value2&myparam=myvalue3.

public async Task<IActionResult> MarkersList([FromQuery]List<string> markersForUpdateIds, [FromQuery]IEnumerable<int> markerFilterIndexes, [FromQuery]int page = 1,[FromQuery] [FromQuery]string message = "", [FromQuery]int sortIndex = 0)
{
...
}

Take a look of ModelBinding: https://learn.microsoft.com/en-us/aspnet/core/mvc/models/model-binding?view=aspnetcore-3.1#sources

mj1313 · Answer 2 · 2020-10-20T02:55:59.920

For passing an array to the controller action. Data formats that use subscript numbers (... [0] ... [1] ...) must ensure that they are numbered sequentially starting at zero. Here you don't need to define an array, just format your url like this:

location.href = `/Markers/MarkersList?page=@Model.PagingInfo.CurrentPage&sortIndex=${sortIndex}&markerFilterIndexes[0]=${filterByTypeIndex}&markerFilterIndexes[1]=${filterByScoreIndex}&markerFilterIndexes[2]=${filterByStatusIndex}`

Since the data in the array is just int type data, you can omit the subscript numbers.

How to pass array from Javascript to controller's action?

2 Answers2