ASP.NET Razor Pages, передача данных из внешнего скрипта во внутренний
Я работаю над проектом, в котором использую карту, и мне нужно отправить отзыв на серверную часть с текущим уровнем масштабирования. Проблема в том, что страница возвращает только ошибку 400 Bad Request вместе с «Ошибка: SyntaxError: Неожиданный конец ввода JSON».
.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.info(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-адрес.
[FromBody] уже должен десериализовать json. Но ваша переменная zoom — это строка. В любом случае вы можете захотеть поместить этот уровень масштабирования в объект json для документации и будущего расширения. Но я не понимаю, почему вы пытаетесь изменить состояние сервера.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Map.getZoom() возвращает число. Я пишу пример реализации сценария внешнего интерфейса на внутреннем сервере. Надеюсь, это вам поможет.
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.info(data))
.catch(error => console.error('Error:', error));
})
Результат:
Я уже пробовал, но он все равно возвращает неверный запрос вместе с этим объектом: {type: 'basic', url: 'localhost:7078/Map?handler=UpdateZoom', перенаправлено: false, статус: 400, ок: ложь, …}
builder.Services.AddRazorPages(o =>{ o.Conventions.ConfigureFilter(new IgnoreAntiforgeryTokenAttribute()); }); Удалите эту конфигурацию, в моем проекте ошибка 404. Вы можете попробовать, если вам интересно.
Вы не включили AntiForgeryToken в запрос Fetch, поэтому получаете код состояния 400 Bad Request. Поскольку вы публикуете данные JSON, вам следует отправить это значение в заголовке запроса. Кроме того, вам необходимо сгенерировать значение для публикации.
Добавьте @Html.AntiForgeryToken() в любом месте страницы Razor, чтобы сгенерировать скрытое поле с именем __RequestVerificationToken, а затем добавьте его значение в заголовок запроса:
fetch('@Url.Page("/Map", "UpdateZoom")', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'RequestVerificationToken' : document.querySelector('[name = "__RequestVerificationToken"]').value
},
body: JSON.stringify(zoomLevel)
})
.then(response => response.json())
.then(data => console.info(data))
.catch(error => console.error('Error:', error));
https://www.learnrazorpages.com/security/request-verification#ajax-post-requests-and-json
Это решило проблему, большое спасибо!
UpdateZoom — имя обработчика. Вам нужно использовать синтаксис
handler=. Для этого есть помощники.