Ajax 发布到 Razor 页面后端不起作用答案

【问题标题】：Ajax post to Razor page backend not workingAjax 发布到 Razor 页面后端不起作用
【发布时间】：2021-07-01 15:31:27
【问题描述】：

我需要从我的视图中将一个 id 发布到后端剃须刀页面，但我不确定我做错了什么，我不断收到 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>

【问题讨论】：

标签： c# ajax asp.net-core razor

【解决方案1】：

首先，您需要将DeleteHourLine 更改为OnPostDeleteHourLineAsync。默认约定通过将用于请求的HTTP 动词与以“On”为前缀的方法名称匹配来工作：OnGet(),@ 987654326@、OnPut()等，包含异步代码的方法可以加Async后缀。

而且你需要删除contentType: "application/json; charset=utf-8",，因为你不会在正文中发布数据。

那么你需要把data: { int: id },改成data: { id: id },，因为你在handler中使用了int? id。

最后但同样重要的是，您需要将@Html.AntiForgeryToken() 添加到您的页面，并将headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() }, 添加到您的ajax。Razor 页面旨在防止（CSRF/XSRF）攻击，因此防伪令牌生成和验证是自动包含在 Razor 页面中。

这是一个演示：

视图（我使用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");
        }

结果：

【讨论】：