ASP.NET中Ajax数据库轮询问题：需刷新页面才能获取新数据

刚看到你的问题，我之前也帮别人处理过类似的ASP.NET + Ajax图表实时更新的需求，核心问题在于你当前的Ajax请求只在页面加载时执行了一次，并没有持续监听数据库的新数据。下面给你两个针对性的解决方案，你可以根据自己的场景选择：

方案一：前端定时轮询（简单易实现，适合低频率更新场景） #

如果你的测量数据不是每秒都更新，定时轮询是最省心的方案——让前端每隔一段时间自动发起Ajax请求，获取最新数据并更新图表。

步骤1：封装Ajax请求和图表更新逻辑 #

把原来的获取数据、更新图表的代码封装成一个可复用的函数：

// 封装获取最新数据并更新图表的函数
function fetchAndUpdateChart() {
    $.ajax({
        url: '/Measurement/GetLatestData', // 替换成你的ASP.NET控制器接口地址
        method: 'GET',
        success: function(latestData) {
            // 这里替换成你实际的图表更新逻辑，比如用Chart.js的话：
            myChart.data.datasets[0].data = latestData.map(item => item.Value);
            myChart.data.labels = latestData.map(item => item.Timestamp);
            myChart.update(); // 触发图表重新渲染
        },
        error: function(err) {
            console.error('获取数据失败:', err);
        }
    });
}

步骤2：设置定时轮询 #

在页面加载完成后，先执行一次函数获取初始数据，然后用setInterval定时重复调用：

$(document).ready(function() {
    // 页面加载时先拉取一次数据
    fetchAndUpdateChart();
    // 每隔30秒轮询一次（可根据你的数据更新频率调整，比如10秒=10000毫秒）
    setInterval(fetchAndUpdateChart, 30000);
});

后端接口优化（可选） #

为了减少不必要的数据传输，可以让前端记录上次获取的最大时间戳，下次请求时传给后端，只返回比这个时间戳新的数据：

public JsonResult GetLatestData(DateTime? lastTimestamp)
{
    IQueryable<Measurement> query = dbContext.Measurements;
    
    if (lastTimestamp.HasValue)
    {
        // 只返回比上次时间戳更新的数据
        query = query.Where(m => m.Timestamp > lastTimestamp.Value);
    }
    else
    {
        // 首次请求返回最近100条数据（根据你的图表需求调整数量）
        query = query.OrderByDescending(m => m.Timestamp).Take(100);
    }

    var data = query.Select(m => new {
        Value = m.MeasurementValue,
        Timestamp = m.Timestamp.ToString("yyyy-MM-dd HH:mm:ss")
    }).ToList();

    return Json(data, JsonRequestBehavior.AllowGet);
}

方案二：SignalR服务器推送（实时性高，适合高频更新场景） #

如果你的测量数据更新很频繁（比如每秒都有新数据），轮询会浪费带宽和服务器资源，这时用ASP.NET SignalR实现服务器主动推送是更好的选择——当数据库有新数据录入时，服务器直接把数据推送给前端，不用前端反复请求。

步骤1：安装SignalR #

在你的ASP.NET项目中通过NuGet安装SignalR：

Install-Package Microsoft.AspNet.SignalR

步骤2：创建SignalR Hub类 #

Hub是SignalR的核心组件，负责服务器和客户端的通信：

using Microsoft.AspNet.SignalR;

public class MeasurementHub : Hub
{
    // 这里可以定义客户端调用的方法，或者服务器主动推送的逻辑
}

步骤3：配置SignalR #

在Startup.cs中注册SignalR路由：

using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(YourProjectName.Startup))]
namespace YourProjectName
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // 配置SignalR
            app.MapSignalR();
        }
    }
}

步骤4：前端连接Hub并接收推送 #

在页面中引入SignalR脚本，连接Hub并监听服务器推送的新数据：

<!-- 先引入jQuery，再引入SignalR -->
<script src="~/Scripts/jquery-3.6.0.min.js"></script>
<script src="~/Scripts/jquery.signalR-2.4.2.min.js"></script>
<!-- SignalR自动生成的Hub脚本 -->
<script src="~/signalr/hubs"></script>

<script>
    $(function () {
        // 连接到MeasurementHub
        var measurementHub = $.connection.measurementHub;

        // 定义接收服务器推送数据的方法
        measurementHub.client.receiveNewMeasurement = function (newData) {
            // 把新数据添加到图表中
            myChart.data.datasets[0].data.push(newData.Value);
            myChart.data.labels.push(newData.Timestamp);
            // 可选：如果数据太多，移除最早的一条保持图表简洁
            if (myChart.data.labels.length > 100) {
                myChart.data.datasets[0].data.shift();
                myChart.data.labels.shift();
            }
            myChart.update();
        };

        // 启动连接
        $.connection.hub.start().done(function () {
            console.log('已连接到SignalR Hub，等待新数据推送');
        }).fail(function (err) {
            console.error('连接失败:', err);
        });
    });
</script>

步骤5：数据录入时触发推送 #

在你插入新测量数据到数据库的代码中，调用SignalR Hub把新数据推送给所有连接的客户端：

public void AddNewMeasurement(Measurement newMeasurement)
{
    using (var db = new YourDbContext())
    {
        db.Measurements.Add(newMeasurement);
        db.SaveChanges();

        // 获取SignalR Hub上下文，推送新数据
        var hubContext = GlobalHost.ConnectionManager.GetHubContext<MeasurementHub>();
        hubContext.Clients.All.receiveNewMeasurement(new {
            Value = newMeasurement.MeasurementValue,
            Timestamp = newMeasurement.Timestamp.ToString("yyyy-MM-dd HH:mm:ss")
        });
    }
}

选择建议 #

• 如果你的数据更新频率低于1分钟一次，优先选定时轮询，实现成本低，不需要额外配置。
• 如果数据更新频繁（比如几秒一次），选SignalR推送，更高效且实时性更好。

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