如何ASP.NET Core Razor中處理Ajax請求
在ASP.NET Core Razor(以下簡稱Razor)剛出來的時候,看了一下官方的文檔,一直沒怎么用過。
今天閑來無事,準備用Rozor做個項目熟練下,結(jié)果寫第一個頁面就卡住了。。折騰半天才搞好,下面給大家分享下解決方案。先來給大家簡單介紹下Razor Razor Pages是ASP.NET Core的一項新功能，可以使編頁面的編程方案更簡單，更高效。Razor頁面使用處理程序方法來處理傳入的HTTP請求（GET / POST / PUT / Delete）。這些類似于ASP.NET MVC或WEB API的Action方法。Razor Pages遵循特定的命名約定，Handler方法也是如此。他們也遵循特定的命名約定，并與“On”前綴：和HTTP動詞一樣OnGet()，OnPost()等處理方法也有異步版本：OnGetAsync()，OnPostAsync()等。介紹完Razor,直接上圖
功能很簡單，就是個登錄。用戶點擊"登錄按鈕"后利用Jquery獲取文本框的值,異步提交到服務(wù)器。很簡單的功能，相信大家都寫過很多次了。啪啪啪幾下代碼就擼出來了。
##前臺代碼
<form method="post">
<div class="login-ic">
<i></i>
<input asp-for="Login.UserName" />
<div class="clear"> </div>
</div>
<div class="login-ic">
<i class="icon"></i>
<input asp-for="Login.PassWord" />
<div class="clear"> </div>
</div>
<div>
<ul>
<li>
<input type="checkbox" value="">
<label for="brand1">記得我</label>
</li>
</ul>
<a href="#" rel="external nofollow" >
忘記密碼?
</a>
</div>
<div class="log-bwn">
<input type="button" value="登錄">
</div>
<div class="log-bwn">
<input type="button" value="注冊">
</div>
</form>
##Script代碼
$("#btnLogin").click(function () {
$.post('/user/Login?hanler=LoginIn', { UserName:$("#UserName").val(), PassWord:$("#PassWord").val() }, function (data) {
console.log(data);
});
});
##后臺代碼
public class LoginModel : PageModel
{
private UserServiciCasee _userService;
public LoginModel(UserServiciCasee userService)
{
_userService = userService;
}
public void OnGet()
{
}
[BindProperty]
public UserLoginDto Login { get; set; }
public async Task<ActionResult> OnPostLoginInAsync()
{
//if (ModelState.IsValid)
//{
// var user = await _userService.LoginAsync(Login);
// if (user != null)
// {
// return new JsonResult(ApiResult.ToSucess("登錄成功!"));
// }
// return new JsonResult(ApiResult.ToFail("帳號密碼錯誤!"));
//}
return new JsonResult(ApiResult.ToFail("參數(shù)填寫錯誤,請檢查!"));
}
}
首先解釋下/user/Login?hanler=LoginIn這個Url是什么意思,user是我Page下的一個目錄,Login是一個頁面,LoginIn是頁面里面對應(yīng)的一個方法。這個url的就是把這個請求交給OnPostLoginInAsync()方法處理。至于為什么是LoginIn而不是OnPostLoginInAsync,在文章開頭也提到過,這是Rozar的語法限定,不清楚的朋友可以去看下微軟的官方文檔，寫的肯定比我好。。這個代碼乍一看，思路很清晰,項目跑起來,走一波看看。
是的,你沒看錯，響應(yīng)碼400。各種姿勢試了半天，就是400,你現(xiàn)在一定想知道，上面的代碼有什么問題。那么，上面的代碼沒有錯。原因是，Razor被設(shè)計為可以自動防止跨站請求偽造（CSRF / XSRF）攻擊。你不必編寫任何其他代碼。Razor頁面中自動包含防偽令牌生成和驗證。這里請求失敗，是因為POST沒有提交AntiForgeryToken。有兩種方法可以添加AntiForgeryToken。
在ASP.NET Core MVC 2.0中，F(xiàn)ormTagHelper為HTML表單元素注入反偽造令牌。例如，Razor文件中的以下標記將自動生成防偽標記：
<form method="post"> <!-- form markup --> </form>
明確添加使用 @Html.AntiForgeryToken()
要添加AntiForgeryToken，我們可以使用任何方法。這兩種方法都添加了一個隱藏名稱的輸入類型__RequestVerificationToken。Ajax請求應(yīng)將請求頭中的防偽標記發(fā)送到服務(wù)器。所以，修改后的Ajax請求看起來像這個樣子:
$("#btnLogin").click(function () {
$.ajax({
type: "POST",
url: "/user/Login?handler=LoginIn",
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
},
data: { UserName: $("#UserName").val(), PassWord: $("#PassWord").val() },
success: function (response) {
console.log(response);
},
failure: function (response) {
alert(response);
}
});
});
改良后的代碼在發(fā)送請求前在請求頭中增加了"XSRF-TOKEN"標識,值為表單自動生成的防偽標記。由于“XSRF-TOKEN”是我們自己加的,框架本身不會識別,所以我們需要把這個標記添加到框架：
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc();
services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");
}
現(xiàn)在服務(wù)端就可以正常收到Post請求了。折騰了半天總算解決了。。。。解決了之后發(fā)現(xiàn)自己之前鉆了牛角尖，，，其實還有更簡單的方法。。太晚了,明天測試一下,可行的話補回來。
相關(guān)文章
用了asp.net隨機數(shù),獲取指定位數(shù)的字母或數(shù)字以后，進行圖片輸出的驗證碼函數(shù)。2009-12-12
淺談ASP.NETCore統(tǒng)一處理404錯誤都有哪些方式
本文主要介紹了ASP.NETCore統(tǒng)一處理404錯誤都有哪些方式，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2022-04-04
本人將從另一個角度來解析.NET分層架構(gòu)的真正奧秘。分層，一些技術(shù)功底比較薄弱的程序員聽到分層就會聯(lián)想到三層架構(gòu)(BLL,DAL之類的)，其實不是，分層是一個很大的技術(shù)框架思想，三層架構(gòu)只不過是對普通的信息系統(tǒng)來說，將信息的流轉(zhuǎn)通過三層來分解，2015-06-06
asp.net 在global中攔截404錯誤的實現(xiàn)方法
asp.net 在global中攔截404錯誤，增加用于體驗，不會因為提示找不到信息而直接退出的尷尬。2010-03-03
.NET Core3.0 日志 logging的實現(xiàn)
這篇文章主要介紹了.NET Core3.0 日志 logging的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2020-10-10
這篇文章介紹了.net前臺調(diào)用后臺函數(shù)的簡單實例，有需要的朋友可以參考一下2013-09-09
asp.net使用母版頁中使用ajax腳本取數(shù)據(jù)
因母版頁繼承自UserControl，我們無法像正常頁面那樣使用Jquey或Ajax的PageMethods等無刷新方法取數(shù)據(jù)。不過可以使用ajax提供的Sys.Net.WebRequest來解決這一問題。2010-09-09
本文介紹了，幾種using 的使用方法，需要的朋友可以參考一下2013-03-03
ASP.NET開發(fā)者使用jQuery應(yīng)該了解的幾件事情
如果你是有著APS.NET開發(fā)背景的人員,那么jQuery的幾個概念建議你應(yīng)該忘掉。像使用其它的framework一樣,你應(yīng)該學(xué)習一下jQuery的所有語法等約定來讓它更好的為你服務(wù)。2009-09-09
這篇文章主要為大家介紹了ADO.NET通用數(shù)據(jù)庫訪問類，利用ADO.NET的體系架構(gòu)打造通用的數(shù)據(jù)庫訪問通用類，感興趣的小伙伴們可以參考一下2016-03-03