2017-10-18 113 views
1

我想只是jQuery的ajax調用來檢索剃刀頁面的用戶列表。Asp.net核心2.0 Razor頁面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錯誤回來。試圖找出我做錯了什麼。

+0

您所呼叫的行動 「* *的用戶」 而不是 「* OnPostList *」。 – Werner

回答

1

馬克你有HttpPost屬性和更改Ajax調用您的網址/安全/ OnPostList

0

在行動中添加[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); 
    } 

使用此ScriptUsers.cshtml.cs

<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> 
OnPostList
1

您的Aj的URL形成ax請求是正確的。有一點需要注意的是,Razor Pages旨在防止(CSRF/XSRF)攻擊。因此,Antiforgery令牌生成和驗證會自動包含在Razor Pages中。我相信這是這裏的問題。如果您的HTML中有表單標籤,您的網頁可能會在網頁上顯示防僞標記。但是您需要在Ajax請求中傳遞相同的內容。

首先,使用@Html.AntiForgeryToken()添加防僞標記(如果不存在)。

然後,修改您的Ajax請求以在請求標頭中發送相同的請求。

一樣,

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

閱讀此篇Handle Ajax Requests in ASP.NET Core Razor Pages瞭解更多有關使Ajax請求與ASP.NET核心剃刀頁。

+0

這對我不起作用,請參閱工作示例的微軟文檔https://docs.microsoft.com/zh-cn/aspnet/core/security/anti-request-forgery#javascript – brthornbury

0

默認情況下,Razor頁面被設計爲受保護的CSRF攻擊。

您必須在您的ajax請求中正確插入防僞令牌。

See the Documentation.

在ASP.NET 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); 
    } 
}); 
0

我對$ .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); 
    }