web-dev-qa-db-ja.com

Asp.net Core 2.0 Razor Pages Ajax Post

Razorページからユーザーのリストを取得するためのjquery ajax呼び出しだけを試みています。

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エラーが返されます。私が間違っていることを理解しようとしています。

ajaxrazorasp.net-core-2.0
5
Jason Webber

AjaxリクエストのURL構成は正しいです。注意すべきことの1つは、Razorページは（CSRF/XSRF）攻撃から保護されるように設計されていることです。したがって、偽造防止トークンの生成と検証は、Razorページに自動的に含まれます。ここが問題だと思います。 HTMLにフォームタグがある場合、ページの偽造防止トークンがページに存在する可能性があります。しかし、Ajaxリクエストで同じものを渡す必要があります。

まず、存在しない場合は、@Html.AntiForgeryToken()を使用して偽造防止トークンを追加します。

次に、Ajaxリクエストを変更して、リクエストヘッダーで同じものを送信します。

お気に入り、

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

この投稿を読む ASP.NET Core RazorページでAjaxリクエストを処理する ASP.NET CoreかみそりページでのAjaxリクエストの作成について詳しく知る。

6
VirendraJ

.net core 2.1の場合、このブログのソリューションが役立ちました https://www.thereformedprogrammer.net/asp-net-core-razor-pages-how-to-implement-ajax-requests/

ページにメソッドpostのフォームが含まれていない場合は、偽造防止トークン@Html.AntiForgeryToken()を追加します

そして、あなたはajaxリクエストを発し始めることができます、重要な部分はここにheadersを設定することです。

$.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");
            });
3
Muflix

デフォルトでは、RazorページはCSRF攻撃から保護されるように設計されています。

偽造防止トークンをajaxリクエストに適切に挿入する必要があります。

ドキュメントを参照してください。

ASP.NET Core 2.0では、次のようになります...

まず、このコードをかみそりビューの上部に配置します。

// At the top of your page
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@functions{
    public string GetAntiXsrfRequestToken()
    {
        return Xsrf.GetAndStoreTokens(Context).RequestToken;
    }
}

次に、ajaxリクエストでトークンヘッダーを設定します。

$.ajax({
    type: "post",
    headers: {
        "RequestVerificationToken": '@GetAntiXsrfRequestToken()'
    },
    url: '@Url.Action("Antiforgery", "Home")',
    success: function (result) {
        alert(result);
    },
    error: function (err, scnd) {
        alert(err.statusText);
    }
});
2
brthornbury

$ .ajaxの使用経験が悪かったので、代わりに$ .postを使用しました。 validateAntiforgeryTokenを使用しましたが、必要ありません

    $("#emailSubmit").click(function () {

        $.post("/Projects/SendInvite",
            {
                Email: $("#email").val(),
                Message: $("#message").val(),
                __RequestVerificationToken: $('input[name="__RequestVerificationToken"]').val()
            }

        )
        return false;

    });

そしてこれは正味のコアアクションです：

    [HttpPost]
    [ValidateAntiForgeryToken]
    public IActionResult SendInvite(string Email, string Message)
{

        //MailTest();
        var json = new List<string>
        {
        Email,
        Message
        };
        return new JsonResult(json);
   }
0
Eda Jede

アクションに[HttpPost]を追加

  [HttpPost]
    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);
    }

Users.cshtml.csでこのScriptを使用しました

<script>
  var url='@(Url.Action("OnPostList","ControllerName"))';
  var firstName= $("#txtFirstName").val();
  var lastName= $("#txtLastName").val();
  var isActive= $("#ddActive").val();
  $.post(Url,{FirstName:firstName,LastName=lastName,IsActive=isActive},function(data){
      var d = data.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);
       });
    });
</script>
0
Farhad Bagherlo

OnPostListをHttpPost属性でマークし、ajax呼び出しのURLを/ Security/OnPostListに変更します。

0
Rob