Razor ASP.NET: Filtering of chart data with multiple parameters

Question

There is a view that shows me chart.js onload(it works fine). I want to be able to filter chart data by date(it works fine too) and by equipmentId (it DOES NOT work). User should be able to choose 1 or more equipmentIds, those values should be used by AJAX and OnGetFilterChart method should be called. It seems to me that I don`t pass those IDs in array and my method just does not see them. Here are my views and controller:

public async Task<IActionResult> OnGetFilterChart(int[] equipmentId, DateTime? startDate,     DateTime? endDate)
        {
            IQueryable<ReplacementRecord> query = _context.ReplacementRecord;
            if (equipmentId != null && equipmentId.Length > 0)
            {
                query = query.Where(r => equipmentId.Contains(r.EquipmentId));
            }
            if (startDate != null && endDate != null)
            {
                query = query.Where(r => r.ReplacementDateTime.Date >= startDate &&  r.ReplacementDateTime.Date <= endDate);
            }
            var data = await query
                .GroupBy(r => r.ReplacementDateTime.Date)
                .Select(g => new { Date = g.Key, Quantity = g.Sum(r => r.Quantity) })
                .OrderBy(r => r.Date)
                .ToListAsync();
            JsonResult json = new JsonResult(data);
            return json;
        }

<div class="form-group">
        <label for="equipmentId">Filter by Equipment:</label>
            @Html.DropDownList("equipmentId", Model.EquipmentIds, "-- All --", new { @class =     "form-control my_equipment", @multiple = "multiple" })
        <label for="startDate">Start Date:</label>
            <input type="date" id="startDate" name="startDate" class="form-control" />
            <span>End Date:</span>
            <input type="date" id="endDate" name="endDate" class="form-control" />
            <button type="button" id="applyFilterBtn" class="btn btn-primary">Apply  Filter</button>
    </div>
    <script>
        document.getElementById('applyFilterBtn').addEventListener('click', function () {
            applyFilter();
        });
        function applyFilter() {
        var my_equipments = document.getElementsByClassName('my_equipment');
            var equipmentId = [];
            for (var i =0; i < my_equipments.length; i++)
            {
                equipmentId.push(my_equipments[i].value);
            }
            var startDate = document.getElementById('startDate').value;
            var endDate = document.getElementById('endDate').value;
            var data = {
                equipmentId: equipmentId,
                startDate: startDate,
                endDate: endDate
            };
            $.ajax({
                url: '/ReplacementRecords/Chart?handler=FilterChart',
                type: 'GET',
                data: data,
                dataType: 'json',
                success: function (result) {
                    let chartStatus = Chart.getChart("chart");
                    if (chartStatus != undefined) {
                        chartStatus.destroy();
                    }
                    drawChart(result);
                },
                error: function (xhr, status, error) {
                    console.log("Can`t perform chart filtering");
                }
            });
        }
    </script>

In my view I have tried to use Select Form, tried different Selectors. In my controller I tried to change int[] equipmentId parameter to string and get needed values from URL but it did not help. Data Filtering works fine because there are no arrays probably...

Answer 1

Looks like I found a solution. In my AJAX, I added traditional: true and now filtering works properly.