Razor ASP.NET：多参数图表数据过滤之设备ID传参异常

现有视图加载时Chart.js图表显示正常，日期过滤功能可正常使用，但设备ID多选过滤功能失效：选择一个或多个equipmentId后，通过AJAX调用后端OnGetFilterChart方法时，设备ID数组无法正确传递到后端方法。

现有代码 #

后端控制器代码 #

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>

前端JS代码 #

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");
        }
    });
}

问题原因及修复方案 #

问题1：多选下拉框取值逻辑错误 #

原代码通过getElementsByClassName获取下拉框元素后直接取value，只能拿到第一个选中项的值，无法收集所有选中的设备ID。

修复： 遍历下拉框的options集合，筛选并收集所有选中项的value，同时转成数字类型（匹配后端int数组）：

function applyFilter() {
    // 直接通过ID获取下拉框元素（更精准）
    var equipmentSelect = document.getElementById('equipmentId');
    var equipmentId = [];
    // 遍历所有选项，收集选中项的value
    for (var i = 0; i < equipmentSelect.options.length; i++) {
        if (equipmentSelect.options[i].selected) {
            equipmentId.push(parseInt(equipmentSelect.options[i].value));
        }
    }
    // 保留原有日期取值逻辑
    var startDate = document.getElementById('startDate').value;
    var endDate = document.getElementById('endDate').value;
    
    var data = {
        equipmentId: equipmentId,
        startDate: startDate,
        endDate: endDate
    };
    // ... 后续AJAX代码
}

问题2：GET请求数组序列化格式不匹配 #

ASP.NET Core默认期望数组参数以equipmentId=1&equipmentId=2的形式传递，但jQuery默认会把数组序列化为equipmentId[]=1&equipmentId[]=2，导致后端无法正确绑定。

修复： 在AJAX请求中添加traditional: true，启用传统的参数序列化方式：

$.ajax({
    url: '/ReplacementRecords/Chart?handler=FilterChart',
    type: 'GET',
    data: data,
    // 启用传统序列化，适配ASP.NET Core的数组参数绑定
    traditional: true,
    dataType: 'json',
    success: function (result) {
        let chartStatus = Chart.getChart("chart");
        if (chartStatus != undefined) {
            chartStatus.destroy();
        }
        drawChart(result);
    },
    error: function (xhr, status, error) {
        console.log("无法执行图表过滤");
    }
});

可选：明确后端参数绑定来源 #

如果仍有绑定问题，可以给后端参数添加[FromQuery]特性，明确指定从URL查询字符串绑定：

public async Task<IActionResult> OnGetFilterChart([FromQuery]int[] equipmentId, DateTime? startDate, DateTime? endDate)
{
    // 原有业务逻辑不变
}

内容的提问来源于stack exchange，提问作者Антон Ласько