Asp.net Core 2.0 Razor Pages Ajax Post

Question

我试图只是jquery ajax调用以从Razor页面检索用户列表。

Users.cshtml.cs页面：

public ActionResult OnPostList(string FirstName, string LastName,string IsActive)
{
        var data=(from s in _db.SecurityUser
                 where s.FirstName.Contains(FirstName) && s.LastName.Contains(LastName) && (IsActive=="" || (IsActive =="Y" && s.IsActive==true) || (IsActive == "N" && s.IsActive == false))
                 select s).OrderBy(s=>s.FirstName);
        return new JsonResult(data);
}

JS通话：

$.ajax({
    type: "POST",
    url: "/Security/Users?handler=List",
    data: JSON.stringify({
        FirstName: $("#txtFirstName").val(),
        LastName: $("#txtLastName").val(),
        IsActive: $("#ddActive").val()
    }),
    contentType: "application/json",
    dataType: "json",
    success: function (response) {
        var d = response.d;
        var tblBody = $("#tblUsers > tbody");
        tblBody.empty();
        $.each(d, function (i, item) {
            var modifiedDate = new Date(parseInt(item.ModifiedDate.substr(6)));
            var $tr = $('<tr>').append(
                $('<td>').html("<a href='javascript:void(0)' onclick='fnDialogShow(" + item.UserID + ")'>Edit</a>"),
                $('<td>').text(item.FirstName),
                $('<td>').text(item.LastName),
                $('<td>').text(item.IsActive ? "Yes" : "No")
            ).appendTo(tblBody);

        });
    },
    failure: function (response) {
        alert(response.d);
    }

});

当它调用时，我会收到一个400错误。试图弄清楚我在做什么错。

Answer 1

对于 .net core 2.1，此博客中的解决方案帮助 https://www.therformedprogrammer.net/asp-net-core-razor-pages-how-to-implement-ajax-requests/

如果页面不包含带有方法 post 的表单，请添加防伪令牌 @Html.AntiForgeryToken()

你可以开始触发ajax请求，重要的部分是在这里设置标题。

$.ajax({
                type: "POST",
                url: "/Customers?handler=Delete",
                data: { id: id },
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                // AntiforgeryToken is required by RazorPages
                headers: {
                    RequestVerificationToken: $('input:hidden[name="__RequestVerificationToken"]').val()
                }
            })
            .done(function () {
                alert("success");
            })
            .fail(function () { 
                alert("error");
            });

Answer 2

您对Ajax请求的URL格式正确。需要注意的一件事是，Razor Pages被设计为受到（CSRF / XSRF）攻击的保护。因此，防伪令牌的生成和验证会自动包含在Razor页面中。我相信这就是这里的问题。如果您的HTML中有表单标记，则页面上可能存在防伪令牌。但是您需要在Ajax请求中传递相同的内容。

首先，使用@Html.AntiForgeryToken()（如果不存在）添加防伪令牌。

然后，修改您的Ajax请求以在请求标头中发送相同的请求。

喜欢，

beforeSend: function (xhr) {
       xhr.setRequestHeader("XSRF-TOKEN",
          $('input:hidden[name="__RequestVerificationToken"]').val());
},

阅读这篇文章在ASP.NET Core剃须刀页面中处理Ajax请求， 以了解有关使用ASP.NET Core剃须刀页面进行Ajax请求的更多信息。

Answer 3

使用 HttpPost 属性标记您的 OnPostList 并将 ajax 调用中的 URL 更改为 /Security/OnPostList