ASP.NET Razor页面图表更新：POST请求异常与自动更新问题

② 解决页面启动时的400 Bad Request错误 #

• 排查页面加载时自动触发的POST请求：
  • 确认请求头是否设置Content-Type: application/json，ASP.NET默认仅识别该格式的JSON请求体，缺失会直接返回400。
  • 检查请求体是否为空，或JSON字段与后端Action接收的模型类字段不匹配、缺少必填项。
• 修正ApiController的Action定义：
  • 确保Action标注[HttpPost]特性，参数前添加[FromBody]（示例：public IActionResult UpdateChartData([FromBody] ChartDataModel model)），否则ASP.NET无法从请求体绑定参数，触发400错误。
• 检查页面脚本逻辑：确认是否页面加载时误调用了发送POST的函数，且未传入合法请求数据。

① ApiController接收POST请求时自动更新页面图表 #

HTTP是无状态协议，后端无法主动推送数据到前端，推荐两种实现方案：

方案1：使用SignalR（实时推送，推荐） #

1. 安装SignalR NuGet包：Install-Package Microsoft.AspNetCore.SignalR
2. 创建SignalR Hub类：

public class ChartHub : Hub
{
    public async Task SendChartData(ChartDataModel data)
    {
        // 推送数据给所有连接的客户端
        await Clients.All.SendAsync("UpdateChart", data);
    }
}

3. 在Program.cs中配置SignalR：

builder.Services.AddSignalR();
app.MapHub<ChartHub>("/chartHub");

4. 在ApiController的POST Action中调用Hub推送数据：

private readonly IHubContext<ChartHub> _hubContext;

public AjaxAPIController(IHubContext<ChartHub> hubContext)
{
    _hubContext = hubContext;
}

[HttpPost]
public async Task<IActionResult> UpdateChartData([FromBody] ChartDataModel model)
{
    // 处理接收的数据
    await _hubContext.Clients.All.SendAsync("UpdateChart", model);
    return Ok();
}

5. 前端页面引入SignalR脚本并监听更新：

<script src="~/lib/signalr/dist/browser/signalr.js"></script>
<script>
const connection = new signalR.HubConnectionBuilder()
    .withUrl("/chartHub")
    .build();

// 监听后端推送的更新事件
connection.on("UpdateChart", function(data) {
    // 调用已实现的图表更新函数
    updateChart(data);
});

// 启动连接
connection.start().catch(err => console.error(err.toString()));

// 你的图表更新逻辑（复用之前的代码）
function updateChart(data) {
    // 示例：更新Chart.js图表数据集
    // chart.data.datasets[0].data = data.values;
    // chart.update();
}
</script>

方案2：前端轮询（简单场景适用） #

让前端定时发送GET请求获取最新数据：

// 每隔5秒检查一次新数据
setInterval(async () => {
    const response = await fetch("/api/AjaxAPI/GetLatestChartData");
    if (response.ok) {
        const data = await response.json();
        updateChart(data);
    }
}, 5000);

同时在ApiController中新增返回最新数据的GET Action：

private static ChartDataModel _latestChartData;

[HttpPost]
public IActionResult UpdateChartData([FromBody] ChartDataModel model)
{
    _latestChartData = model;
    return Ok();
}

[HttpGet]
public IActionResult GetLatestChartData()
{
    return Ok(_latestChartData);
}

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