Razor ASP.NET:使用多个参数过滤图表数据

问题描述 投票:0回答:1

有一个视图显示 chart.js onload(它工作正常)。我希望能够按日期(它也能正常工作)和按 equipmentId(它不起作用)过滤图表数据。用户应该能够选择 1 个或多个 equipmentIds,这些值应该被 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>
    <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>

在我看来,我尝试过使用 Select Form,尝试过不同的选择器。在我的控制器中,我尝试将 int[] equipmentId 参数更改为字符串并从 URL 获取所需的值,但没有帮助。数据过滤工作正常,因为可能没有数组......

c# ajax asp.net-core razor
1个回答
0
投票

看起来我找到了解决方案。在我的 AJAX 中,我添加了

traditional: true
,现在过滤工作正常。

© www.soinside.com 2019 - 2024. All rights reserved.