Ajax post Razor 页面后端不工作

Question

我需要 post 从我的视图到后端剃须刀页面的 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");
    }

Ajax:

 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>

Answer 1

首先，您需要将 DeleteHourLine 更改为 OnPostDeleteHourLineAsync。默认约定的工作原理是将用于请求的 HTTP 动词与方法名称相匹配，方法名称以“On”为前缀: OnGet(), OnPost(), OnPut() etc.And 您可以在包含异步代码的方法上添加 Async 后缀。

并且您需要删除 contentType: "application/json; charset=utf-8",，因为您没有 post 正文中的数据。

那么你需要把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");
        }

结果：

Ajax post Razor 页面后端不工作

Ajax post to Razor page backend not working

c#

ajax

razor

asp.net-core