ajax - OnDelete Handler 总是触发一个错误的请求

问题描述

为了与 HTTP 动词更一致，我试图通过 AJAX 在 Razor 页面上调用删除处理程序；

这是我的 AJAX 代码，然后是我页面上的 C# 代码：

return new Promise(function (resolve: any, reject: any) {
  let ajaxConfig: JQuery.UrlAjaxSettings =
  {
    type: "DELETE",
    url: url,
    data:  JSON.stringify(myData),
    dataType: "json",
    contentType: "application/json",
    success: function (data) { resolve(data); },
    error: function (data) { reject(data); }

  };

  $.ajax(ajaxConfig);
});

我的cshtml页面上的处理程序：

public IActionResult OnDeleteSupprimerEntite(int idEntite, string infoCmpl)
{
    // my code
}

从来没有达到...得到一个bad request代替！

当我切换到“GET”时——ajax 请求的类型和我的处理程序函数的名称（OnGetSupprimerEntite）——它确实像一个魅力。

有任何想法吗？谢谢！

标签： ajaxasp.net-corerazor-pages

简短回答：400 bad request表示请求不满足服务器端的需求。

首先，您的服务器需要一个表单；

public IActionResult OnDeleteSupprimerEntite(int idEntite, string infoCmpl)
{
  // my code
}

但是，您正在以application/json格式发送有效负载。

其次，当您发送表单数据时，不要忘记添加csrf 令牌：

@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf

<script>
    function deleteSupprimerEntite(myData){
        var url = "Index?handler=SupprimerEntite";
        return new Promise(function (resolve, reject) {
            let ajaxConfig = {
                type: "DELETE",
                url: url,
                data: myData ,
                success: function (data) { resolve(data); },
                error: function (data) { reject(data); }
            };
            $.ajax(ajaxConfig);
        })
    }
    document.querySelector("#testbtn").addEventListener("click",function(e){
        var myData ={
            idEntite:1,
            infoCmpl:"abc",
            __RequestVerificationToken: "@(Xsrf.GetAndStoreTokens(HttpContext).RequestToken)",
        };
        deleteSupprimerEntite(myData);
    });
</script>

工作演示：

最后，如果您想以json 格式发送，您可以将服务器端 Handler 更改为：

public class MyModel {
    public int idEntite {get;set;}
    public string infoCmpl{get;set;}
}

public IActionResult OnDeleteSupprimerEntite([FromBody]MyModel xmodel)
{
    return new JsonResult(xmodel);
}

js代码应该是：

function deleteSupprimerEntiteInJson(myData){
    var url = "Index?handler=SupprimerEntite";
    return new Promise(function (resolve, reject) {
        let ajaxConfig = {
            type: "DELETE",
            url: url,
            data: JSON.stringify(myData) ,
            contentType:"application/json",
            headers:{
                "RequestVerificationToken": "@(Xsrf.GetAndStoreTokens(HttpContext).RequestToken)",
            },
            success: function (data) { resolve(data); },
            error: function (data) { reject(data); }
        };
        $.ajax(ajaxConfig);
    })
}

document.querySelector("#testbtn").addEventListener("click",function(e){
    var myData ={
        idEntite:1,
        infoCmpl:"abc",
    };
    deleteSupprimerEntiteInJson(myData);
});

ajax - OnDelete Handler 总是触发一个错误的请求

问题描述

解决方案

推荐阅读