ASP.NET MVC中如何通过AJAX按日期筛选更新DataTable的下载量数据

1. 修正后端接口问题 #

你当前的后端接口存在几处需要调整的问题：参数不能直接传入FileModel、counter变量定义位置错误、缺少返回值，修正后代码如下：

public JsonResult NumberDownloads(DateTime dateFrom, DateTime dateTo, int fileId)
{
    int counter = 0;
    // 通过文件ID匹配对应统计数据
    var stats = context.Statistic.Where(x => x.File.Id == fileId).ToList();
    foreach(var item in stats)
    {
        int compareFrom = DateTime.Compare(item.DownloadDate, dateFrom);
        int compareTo = DateTime.Compare(item.DownloadDate, dateTo);
        // 大于等于起始时间且小于等于结束时间即符合要求，无需单独判断等于场景
        if (compareFrom >= 0 && compareTo <= 0)
        {
            counter += item.DownloadCounter;
        }
    }
    return Json(counter);
}

2. 修正前端页面错误并添加标识 #

首先修复DateTo输入框的属性错误，同时给下载量单元格添加自定义属性存储文件ID和原始总下载量，方便后续JS操作：

日期选择框修正 #

<div class="form-group row ">
    <label asp-for="DateFrom" class="col-sm-2 col-form-label"></label>
    <div class="col-sm-10">
        <input type="date" id="datefrom" asp-for="DateFrom" class="form-control" placeholder="DateFrom" />
        </div>
</div>
<div class="form-group row ">
  <label asp-for="DateTo" class="col-sm-2 col-form-label"></label>
    <div class="col-sm-10">
        <!-- 修复原有asp-for属性写错的问题，添加id方便JS取值 -->
        <input type="date" id="dateto" asp-for="DateTo" class="form-control" placeholder="DateTo" />
    </div>
</div>

表格下载量单元格修改 #

将原有下载量单元格：

<td>@file.DownloadCounter</td>

替换为：

<td data-file-id="@file.Id" data-origin-download="@file.DownloadCounter">@file.DownloadCounter</td>

3. 添加JS逻辑实现动态更新 #

在页面底部添加以下JS代码，监听日期选择框的变化，满足条件时自动调用接口替换下载量：

// 绑定两个日期框的变动事件
document.getElementById('datefrom').addEventListener('change', updateDownloadCount);
document.getElementById('dateto').addEventListener('change', updateDownloadCount);

function updateDownloadCount() {
    const dateFrom = document.getElementById('datefrom').value;
    const dateTo = document.getElementById('dateto').value;
    // 任意一个日期为空时，还原为原始总下载量
    if (!dateFrom || !dateTo) {
        document.querySelectorAll('td[data-file-id]').forEach(td => {
            td.textContent = td.dataset.originDownload;
        });
        return;
    }
    // 两个日期都不为空时，遍历所有文件行调用接口获取时间段内下载量
    document.querySelectorAll('td[data-file-id]').forEach(async td => {
        const fileId = td.dataset.fileId;
        try {
            // 请将路径中的「你的控制器名」替换为接口实际所在的控制器名称
            const res = await fetch(`/你的控制器名/NumberDownloads?dateFrom=${dateFrom}&dateTo=${dateTo}&fileId=${fileId}`);
            const periodCount = await res.json();
            td.textContent = periodCount;
        } catch (err) {
            console.error('获取周期下载量失败', err);
            td.textContent = td.dataset.originDownload;
        }
    });
}

内容的提问来源于stack exchange，提问作者viktorrr