有一个视图显示 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 获取所需的值,但没有帮助。数据过滤工作正常,因为可能没有数组......
看起来我找到了解决方案。在我的 AJAX 中,我添加了
traditional: true
,现在过滤工作正常。