如何将数组从 Javascript 传递给控制器​​的动作？

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?

Answer 1

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://docs.microsoft.com/en-us/aspnet/core/mvc/models/model-binding?view=aspnetcore-3.1#sources

Answer 2

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.