ASP.NET Razor Pages，将数据从前端脚本传递到后端

Question

我正在开发一个使用地图的项目，需要将当前缩放级别的反馈发送到后端。问题是该页面仅返回 400 Bad Request 错误以及“Error: SyntaxError: Unexpected end of JSON input。”

.cshtml:

map.on('zoomend', function () {
    var zoomLevel = map.getZoom();

    // Enviar el nivel de zoom al backend
    fetch('@Url.Page("/Map", "UpdateZoom")', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(zoomLevel)
    })
        .then(response => response.json())
        .then(data => console.log(data))
        .catch(error => console.error('Error:', error));
});

.cs:

public IActionResult OnPostUpdateZoom([FromBody] string zoom)
{
    ZoomLevel = JsonSerializer.Deserialize<int>(zoom);

    int valorCapturado = ZoomLevel;


    return new JsonResult(new { success = true, receivedValue = valorCapturado });
}

通过断点检查，我意识到后端的 OnPostUpdateZoom 方法永远不会被触发。我还验证了 @Url.Page("/Map", "UpdateZoom") 正在生成正确的 URL。

Answer 1

map.getZoom()返回一个Number，我写了一个例子来实现前端脚本到后端。希望对你有帮助。

1 MyModel.cs

    public class MyModel{public int Key { get; set; }}

2.cs

    public IActionResult OnPostUpdateZoom([FromBody] MyModel model)
        {
             return new JsonResult(
              new { success = true, receivedValue = model.Key });
        }

3.cshtml

    $(document).ready(function () {
       var zoomLevel = 12;
       var obj = { Key: zoomLevel }
    // Enviar el nivel de zoom al backend
      fetch("?handler=UpdateZoom", {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(obj)
     })
                
        .then(data => console.log(data))
        .catch(error => console.error('Error:', error));
    })

结果是：