如何在.NET Framework Web项目中无刷新动态获取SQL Server订单数

方案一：AJAX定时轮询（新手友好，快速实现） #

这种方式通过每隔一段时间自动请求后端获取最新订单数，适合对实时性要求不是极高的场景，代码简单易上手。

1. 后端新增获取订单数的接口 #

在你的控制器里新增一个Action，专门返回当前订单总数（注意修正原代码里的拼写错误：tbl_Oders → tbl_Orders）：

public ActionResult GetOrderCount()
{
    // 直接用Count()而非ToList().Count，后者会把所有订单加载到内存，性能更差
    int count = db.tbl_Orders.Count();
    return Json(count, JsonRequestBehavior.AllowGet);
}

2. 前端修改视图，添加AJAX定时请求 #

更新视图代码，用jQuery定时调用接口并更新label内容：

<label id="orderCountLabel">@ViewBag.count</label>

<!-- 若项目未引入jQuery，需添加这行 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    // 每隔3秒请求一次后端（可根据需求调整间隔，比如5000代表5秒）
    setInterval(function() {
        $.ajax({
            url: '@Url.Action("GetOrderCount", "你的控制器名称")', // 替换为你的实际控制器名
            type: 'GET',
            success: function(data) {
                $('#orderCountLabel').text(data);
            },
            error: function() {
                console.log('获取订单数失败');
            }
        });
    }, 3000);
</script>

方案二：SignalR实时推送（实时性更高） #

如果需要订单一新增就立刻更新页面（类似Twitter通知的无延迟效果），推荐用SignalR——ASP.NET的实时通信库，能主动将后端更新推送给前端。

1. 安装SignalR包 #

打开NuGet包管理器，搜索Microsoft.AspNet.SignalR并安装到项目中。

2. 创建SignalR集线器（Hub） #

在项目中新建类OrderHub.cs：

using Microsoft.AspNet.SignalR;

public class OrderHub : Hub
{
    // 供后端调用，通知所有客户端更新订单数
    public void UpdateOrderCount(int count)
    {
        Clients.All.updateOrderCount(count);
    }
}

3. 配置SignalR路由 #

在Global.asax.cs的Application_Start方法中添加路由配置：

using Microsoft.AspNet.SignalR;

protected void Application_Start()
{
    // 原有配置代码...
    RouteTable.Routes.MapHubs();
}

4. 修改后端订单新增逻辑 #

当新订单创建完成后，调用SignalR推送更新：

// 假设这是你创建订单的Action
public ActionResult CreateOrder(OrderModel model)
{
    if (ModelState.IsValid)
    {
        db.tbl_Orders.Add(model);
        db.SaveChanges();
        
        // 获取最新订单数并推送
        int newCount = db.tbl_Orders.Count();
        var hubContext = GlobalHost.ConnectionManager.GetHubContext<OrderHub>();
        hubContext.Clients.All.updateOrderCount(newCount);
        
        return RedirectToAction("Index");
    }
    return View(model);
}

5. 前端修改视图，连接SignalR并接收推送 #

<label id="orderCountLabel">@ViewBag.count</label>

<!-- 引入SignalR脚本（安装包后自动生成在Scripts文件夹） -->
<script src="~/Scripts/jquery.signalR-2.4.3.min.js"></script>
<!-- 引入SignalR自动生成的代理脚本 -->
<script src="~/signalr/hubs"></script>
<script>
    // 连接到SignalR Hub
    var orderHub = $.connection.orderHub;
    
    // 定义接收后端推送的方法
    orderHub.client.updateOrderCount = function(count) {
        $('#orderCountLabel').text(count);
    };
    
    // 启动连接
    $.connection.hub.start().done(function() {
        console.log('已连接到订单通知Hub');
    }).fail(function() {
        console.log('连接失败');
    });
</script>

关键注意事项 #

• 务必修正原代码里的拼写错误：tbl_Oders → tbl_Orders，避免运行时异常。
• 优先使用db.tbl_Orders.Count()，它直接在数据库层面执行统计，性能远优于ToList().Count。
• 若用AJAX轮询，不要把间隔设置过短，避免给服务器造成不必要的压力。

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