更新剃刀页面中图表的值

问题描述 投票：0回答：1

我在 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);
            });
        });
  1. 点击按钮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);
            });
        });
  1. Call post：当我从外部收到带有 json 格式数据的 post 调用时。 （帖子）
        // 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）更新图表？

  1. 启动时出现404 bad request错误如何解决？
asp.net visual-studio-2019 razor-pages asp.net-apicontroller
1个回答
0
投票

根据您的要求，当任何用户向“UpdateChartData”API 发布请求时，您希望 Web 应用程序能够更新图表。

这需要SignalR来进行实时通信。完整的安装演示和教程您可以参考提供的链接。

由于您在项目中使用 .NET Core 2.2 并且此版本已弃用，因此 Microsoft.AspNetCore.SignalR.Common 唯一受支持的版本是版本 1.1.0。下面提供的步骤用于在为 .NET Core 2.2 指定的应用程序中设置 SignalR。

  1. 通过NuGet，安装Microsoft.AspNetCore.SignalR.Common 1.1.0

  2. 右键项目>管理客户端库，会生成一个libman.json文件。在该文件中，您安装 @microsoft/signalr 库，如下所示：

{
  "version": "1.0",
  "defaultProvider": "unpkg",
  "libraries": [
    {
      "library": "@microsoft/signalr@latest",
      "destination": "wwwroot/js/signalr",
      "files": [
        "dist/browser/signalr.js",
        "dist/browser/signalr.min.js"
      ]
    }
  ]
}
  1. 创建一个 SignalR 中心。
namespace Razor_WebAPI_Application.Hubs
{
    public class ChartHub : Hub
    {
        public async Task UpdateChart(ChartData chartData)
        {
            await Clients.All.SendAsync("UpdateChart", chartData);
        }
    }
}
  1. 在Startup.cs中配置SignalR
public class Startup 
{
    public void ConfigureServices(IServiceCollection services)
    {
        ...
        services.AddSignalR();
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        ...

        app.UseSignalR(routes =>
            {
                routes.MapHub<ChartHub>("/chartHub");
            });
    }
}
  1. 从 DI 获取 
    ChartHub
    。并将数据发送给所有客户端。
using Microsoft.AspNetCore.SignalR;
using Razor_WebAPI_Application.Hubs;

[Route("api/[controller]")]
[ApiController]
public class AjaxAPIController : ControllerBase
{

    private readonly IHubContext<ChartHub> _hubContext;

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

[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 } };

    _hubContext.Clients.All.SendAsync("UpdateChart", chartData);

    return Ok(chartData);
}
  1. 添加 SignalR 客户端代码。这样，您就可以等待 SignalRHub 发出“UpdateChart”事件并更新图表，但不会将 POST 请求发送到需要请求正文的“UpdateChartData”API。
<script src="~/js/signalr/dist/browser/signalr.js"></script>

<script type="text/javascript">

  ...
  var connection = new signalR.HubConnectionBuilder().withUrl("/chartHub").build();

  connection.on("UpdateChart", function (data) {
      updateScatterChart(data);
  });

  connection.start().then(function () {

  }).catch(function (err) {
      return console.error(err.toString());
  });
</script>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.