在 Razor 页面中更新图表的值

问：

我在 Visual Studio 2019 中创建了一个 Asp Net Razor 项目。

我正在通过一些练习来学习这项技术。具体来说，我想在页面上显示一个图表，我想通过 ApiController 检索其数据。

   [Route("api/[controller]")]
    [ApiController]
    public class AjaxAPIController : ControllerBase
    {
        public ChartData chartData = new ChartData();

        [HttpGet]
        [Route("ChartDataJson")]
        public IActionResult ChartDataJson()
        {
            // First example
            var x = new List<double> { 1.0,};
            var y = new List<double> { 10.0,};
            var chartData = new { x, y };
            return Ok(chartData);
        }

        [HttpGet]
        [Route("ChartDataJson2")]
        public IActionResult ChartDataJson2()
        {
            // Second Example
            var x = new List<double> {1.0, 20.0, 30.0 };
            var y = new List<double> {2.0, 30.0,  45.0};
            var chartData = new { x, y };
            return Ok(chartData);
        }

        [HttpPost]
        [Route("UpdateChartData")]
        public IActionResult UpdateChartData([FromBody] ChartData data)
        {
            // Read received data
            var newDataX = data.X; 
            var newDataY = data.Y;
            var chartData = new { x = new List<double>[] { newDataX }, y = new List<double>[] { newDataY } };
            return Ok(chartData);
        }
    }

图表的值可以通过 3 种不同的方式更新：

1. 点击按钮1：用固定值更新图表的值;（获取）

 //  When the button 1 is clicked, get  data from the controller and update the chart
        $("#btnGet").click(function () {
            console.log("button 1 click is executed.");
            $.get("/api/AjaxAPI/ChartDataJson", function (data) {
                updateScatterChart(data);
            });
        });

2. 单击按钮 2：与点 1 相同，但值不同;（获取）

         //  When the button 2 is clicked, get  data from the controller and update the chart
        $("#btnGet2").click(function () {
            console.log("button 2 click is executed.");
            $.get("/api/AjaxAPI/ChartDataJson2", function (data) {
                updateScatterChart(data);
            });
        });

3. 呼叫帖子：当我从外部收到带有 json 格式数据的帖子呼叫时。（邮政）

        // Update the data chart when a post request is received
        $.post("/api/AjaxAPI/UpdateChartData", function (data) {
            console.log("X values:", data.x);
            console.log("Y values:", data.y);
            updateScatterChart(data);
        });

结果如下所示：

第 1 步和第 2 步工作正常，但第 3 步不起作用...

加载页面时会出现第一个问题：

jquery.min.js：2 POST https ：//localhost：44354/api/AjaxAPI/UpdateChartData 400（错误请求）

此外，如果我尝试在浏览器控制台中启动脚本：

fetch("https://localhost:44354/api/AjaxAPI/UpdateChartData", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ X: [400.0], Y: [600.0] }),
})
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error("Error: " + error));

为了模拟发布请求，我可以在调试中读取 ApiController 类中的值，但我无法正确更新图表的值。

我的完整代码可以在这里找到： https://github.com/DanielScerpa/RazorPageChart/tree/dev_chart

总结：

我想了解如何在收到发布请求时正确更新图表值，并且我想了解启动问题 400（错误请求）

!!!...编辑。。。！！！

总结：

1. 当我在 apicontroller 中收到 post 调用时，如何自动更新图表？

例如，有人调用：

 <https://localhost:44354/api/AjaxAPI/UpdateChartData>

我通过代码拦截了 post 调用：

    [HttpPost]
        [Route("UpdateChartData")]
        public IActionResult UpdateChartData([FromBody] ChartData data)
        {
            // Read received data
            var newDataX = data.X; 
            var newDataY = data.Y;
            var chartData = new { x = new List<double>[] { newDataX }, y = new List<double>[] { newDataY } };
            return Ok(chartData);
        }
    }

此时，如何使用新检索到的值（data.x 和 data.y）更新图表？

2. 如何解决启动时的 404 错误请求错误？