我在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种不同的方式更新:
- Click button 1:用固定值更新图表的值;(Get)
// 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);
});
});
- Click button 2:与点1相同，但值不同；(GET)
// 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);
});
});
- 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个帖子 HTTPS://localhost:44354/api/AjaxAPI/UpdateChartData 400(错误请求)
此外，如果我try 在浏览器控制台中启动该脚本:
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));
要模拟POST请求，我可以在调试中读取ApiControler类中的值，但不能正确地更新图表的值.
我的完整代码在这里:https://github.com/DanielScerpa/RazorPageChart/tree/dev_chart
总结:
我想了解当我收到POST请求时如何正确更新我的图表值，并且我想了解启动问题400(错误请求)
!!!...EDIT...!!!个
总结:你是什么意思？
- 在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)更新图表？
- 如何解决启动时出现的404错误？
