c# - 使用 AJAX 删除 Razor 页面

Question

我想弄清楚将 AJAX 与 Razor Pages 一起使用。

我一直在网上搜索，但我发现的每个示例都做了不同的事情，而且大多数不完整或不适合 Razor Pages。

到目前为止，我一直在关注这样的变化:

$.post('/?handler=Delete', 5, function (x) {
    alert(x);
});

然后我的页面模型如下所示:

public void OnPostDelete(int id)
{

}

我已经尝试了这方面的变化，但到目前为止，我的 C# 代码没有被调用。

问题:

有人可以告诉我我错过了什么吗？

任何人都可以为此提供一些好的引用吗？ (我还需要执行其他 AJAX 任务。)

我发现的一些示例具有与防伪 token 相关的特殊处理。我也需要为此编码吗？

更新:

所以我一直在研究这个，这就是我现在所拥有的:

$.ajax({
    url: '?handler=Delete',
    data: {
        id: $(this).data('id')
    }
})
.fail(function (e) {
    // Error
    alert(e.responseText); // Way too much info
})
.done(function () {
    // Success
})
.always(function () {
    // Always
});

还有我的处理程序:

public void OnGetDelete(int id)
{

}

这实际上是在调用我的处理程序，我终于让它通过了 id争论。

由于我有赏金，这是我希望在答案中看到的内容:

如果我将 AJAX 调用设置为使用 POST 并将我的处理程序重命名为 OnPostDelete() ，不调用处理程序。我要怎么发帖？

对上面的代码还有其他建议或批评吗？我知道有很多方法可以做到这一点。我只是在寻找最简单的方法并尝试对其进行改进。

Answer 1

您可以通过 F12 检查网络选项卡中的请求，您可能会看到 400 bad request 错误。

Razor Pages 旨在自动保护 跨站请求伪造(CSRF/XSRF)攻击。您不必编写任何额外的代码。防伪 token 生成和验证自动包含在 Razor Pages 中。这里请求失败，页面上没有 AntiForgeryToken。

对于问题，您可以使用 @Html.AntiForgeryToken() 显式添加
要添加 AntiForgeryToken，我们可以使用任何一种方法。这两种方法都添加了一个隐藏的输入类型，名称为 __RequestVerificationToken . Ajax 请求应将请求 header 中的防伪 token 发送到服务器。所以，修改后的 Ajax 请求看起来像，

@Html.AntiForgeryToken()

@section Scripts
{
<script>

    $.ajax({
        type: "POST",
        url: "/?handler=Delete&id="+5,
        beforeSend: function (xhr) {
            xhr.setRequestHeader("XSRF-TOKEN",
                $('input:hidden[name="__RequestVerificationToken"]').val());
        },
        success: function (x) {
            alert(x);
        },
        failure: function (response) {
            alert(response);
        }
    });
</script>

}

由于脚本在名为 X-CSRF-TOKEN 的 header 中发送 token ，因此配置防伪服务以查找 X-CSRF-TOKEN header :

public void ConfigureServices(IServiceCollection services)
{
        services.AddRazorPages();
        services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");
}

引用:https://www.talkingdotnet.com/handle-ajax-requests-in-asp-net-core-razor-pages/