Сообщение Ajax в серверной части страницы Razor не работает
Мне нужно опубликовать идентификатор из моего представления на внутренней странице бритвы, и я не уверен, что я делаю не так, я продолжаю получать ошибку 404. Вот мой код:
public async Task<IActionResult> DeleteHourLine(int? id)
{
HourEntryModel hourEntryModel = _context.HourEntryModel.Where(m => m.ID ==
id).FirstOrDefault();
_context.HourEntryModel.Remove(hourEntryModel);
await _context.SaveChangesAsync();
return new RedirectToPageResult("Index");
}
Аякс:
function DeleteHourLine(obj)
{
var ele = $(obj);
var id = ele.data("model-id");
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: '?handler=DeleteHourLine',
data: { int: id },
success: function (data) {
ele.closest("tr").remove();
},
error: function (result) {
alert("fail");
}
})
}
HTML код бритвы:
<td>
<img id = "DeleteHourLine" onclick = "DeleteHourLine(this)" data-model-id = "@item.ID"
src = "~/delete-16.png" />
</td>
Ответы 1
Во-первых, вам нужно изменить DeleteHourLine на OnPostDeleteHourLineAsync. Соглашение по умолчанию работает путем сопоставления HTTP-глагола, используемого для запроса, с именем метода с префиксом «Вкл.»: OnGet(), OnPost(), OnPut() и т. д. И вы можете добавить Async. суффикс для методов, содержащих асинхронный код.
И вам нужно удалить contentType: "application/json; charset=utf-8",, потому что вы не публикуете данные в теле.
Затем вам нужно изменить data: { int: id }, на data: { id: id },, потому что вы используете int? id в обработчике.
И последнее, но не менее важное: вам нужно добавить @Html.AntiForgeryToken() на свою страницу и добавить headers: { "RequestVerificationToken": $('input[name = "__RequestVerificationToken"]').val() }, в свои страницы ajax.Razor, которые предназначены для защиты от атак (CSRF / XSRF), поэтому создание и проверка токенов защиты от подделки автоматически включаются в Razor Pages.
Вот демонстрация:
представление (я использую 1 в качестве образца данных и добавляю @Html.AntiForgeryToken(), чтобы можно было получить токен защиты от подделки в представлении):
<td>
<img id = "DeleteHourLine" onclick = "DeleteHourLine(this)" data-model-id = "1"
src = "~/imgs/2.jpg" />
</td>
@Html.AntiForgeryToken()
ajax:
function DeleteHourLine(obj) {
var ele = $(obj);
var id = ele.data("model-id");
$.ajax({
type: "POST",
url: '?handler=DeleteHourLine',
headers: { "RequestVerificationToken": $('input[name = "__RequestVerificationToken"]').val() },
data: { id: id },
success: function (data) {
ele.closest("tr").remove();
},
error: function (result) {
alert("fail");
}
})
}
обработчик:
public async Task<IActionResult> OnPostDeleteHourLineAsync(int? id)
{
return new RedirectToPageResult("Index");
}
