C# 使用AJAX删除Razor页面

我正在尝试将AJAX与Razor页面结合使用

我一直在网上搜索，但我发现的每个例子都有所不同，而且大多数都不完整，或者不适用于Razor页面

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

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

public void OnPostDelete(int id)
{

}

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

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

public void OnPostDelete(int id)
{

}

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

问题:

• 有人能告诉我我错过了什么吗
• 有人能提供一些很好的参考吗？（我还需要执行其他AJAX任务。）
• 我发现的一些例子与防伪代币有关。我也需要为此编写代码吗

更新：

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

$.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（）

，则不会调用该处理程序。我该怎么发帖子

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

两项建议：

1-在url前面添加页面路径。（我不确定你的话中是否提到了这一点）

2-遵循路线图规则。例如，函数中有“id”。该页的配置可能类似于@page“{id:int}”。所以url应该是

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

---

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

Razor页面设计用于自动防止跨站点请求伪造（CSRF/XSRF）攻击。您不必编写任何附加代码。Antiforgery令牌生成和验证自动包含在Razor页面中。此处请求失败，页面上没有AntiForgeryToken

对于这个问题，可以使用

@Html.AntiForgeryToken（）

要添加AntiForgeryToken，我们可以使用以下任何方法。这两种方法都添加了一个名为\uu RequestVerificationToken的隐藏输入类型。Ajax请求应该将请求头中的防伪令牌发送到服务器。因此，修改后的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>

---

参考资料：

我喜欢这样做：

配置您的Javascript

//If you're returning a object, configure it
var yourObject = {
    field1: "value1",
    field2: "value2"
};

//setup ajax
$.ajax({
    data: yourObject,
    type: "POST",
    url: "urltoyourhandler/delete" //you can add other paramters here as well by doing ?parm=value
    success: function(data){
      //do success stuff here
      //based off my handler code below:
      if(data.success){
          console.log("Success!");
      }
      else{
          console.log("Failed for some reason!");
      }
    }
    error: function(){
        //do error stuff here
       //gets called if there is a issue contacting the URL or if there is a server error like 500
    }
});

配置处理程序。对于我的CRUD操作，我喜欢制作一个CRUD控制器来处理所有事情

[BindProperty]
public YourClass Name { get; set; }

//set handler to only accept POST and set a URL for it. URL should be to the same folder you're in
//the 'delete' in route doesn't have to match the function name but it's less confusing if it does
[HttpPost, Route("RouteToThisHandler/delete)]
public async Task<IActionResult> Delete()
{
    //verify data and the do something with it
    //I like returning a JsonResult. Add whatever data you want. I like returning success 
    //with true or false and some other data if needed
    return new JsonResult(new { success: true, importantInfo: "This is important" });
}

[BindProperty]
公共类名称{get；set；}
//将处理程序设置为仅接受POST并为其设置URL。URL应该与您所在的文件夹相同
//路由中的“delete”不必与函数名匹配，但如果匹配，就不那么容易混淆了
[HttpPost，路由（“RouteToThisHandler/delete）]
公共异步任务删除（）
{
//验证数据并对其进行处理
//我喜欢返回JsonResult。添加您想要的任何数据。我喜欢返回成功
//如果需要，提供真或假以及其他一些数据
返回新的JsonResult（新的{success:true，importantInfo:“This is important”}）；
}

Ajax有更多的配置选项，可以为您提供有关发生的任何服务器错误的更多信息

关于防伪令牌，微软表示：

Antiforgery中间件被添加到依赖项注入容器中 在Startup.ConfigureServices中调用以下API之一时：

• AddMvc
• 地图地图
• 映射控制线
• MapBlazorHub

---

下面是一个关于防伪令牌的Microsoft链接：

我调查了一些事情，当您从AJAX传递字符串而不是整数时会发生什么，以及不同的路由如何影响调用（如果您有时间，请参阅下面有趣的注释）但最重要的是，我发现Razor页面非常宽容，似乎一切都正常。正如我所提到的，即使传递一个字符串，其中整数类型

id

仍然命中处理程序方法（它只给了我一个

默认值（int）

）

我创建此回购协议只是为了探索：

正如@Yan所指出的，主要的拦截器是防伪令牌。这实际上是导致处理程序未命中断点的唯一原因。正如所建议的，检查您的网络选项卡中是否有失败的请求，或检查控制台中是否有错误的JavaScript代码

要将代码片段更改为

OnPostDelete

，需要在AJAX调用中使用

POST

类型，并包含防伪令牌

$.ajax({
    type: 'POST',
    headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
    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
});

我没有看到讨论的另一个主题是这个令牌来自哪里？只要有

元素，Razor就会自动生成它。如果没有

元素，可以在需要时生成令牌，请查看

@functions{}

block在这里。也有CSRF无用或不需要的场景，如果您不需要，也可以关闭防伪功能（这是一个完全不同的讨论）

我对这种方法的批评是意见，所以要么接受，要么放弃

• 如果可以避免使用jQuery，就不要使用jQuery，因为JavaScript的改进可以说已经淘汰了jQuery
<> Laj> AJAX也显示了它的年龄。如果你只需要支持现代浏览器，请考虑
• 根本不要写任何JS！Blazor是新的和闪亮的。仍然有一些成长的痛苦，但我宁愿我的痛苦在C#而不是JavaScript=）

我遇到了一件有趣的事。。 对于这个演示，我使用了以下

@page

指令

@page“{id？}”

在表单的HTML部分，例如：

删除

我正在使用

asp页面处理程序
标记帮助程序来帮助生成正确的URL