如何ASP.NET Core Razor中處理Ajax請(qǐng)求
在ASP.NET Core Razor(以下簡(jiǎn)稱(chēng)Razor)剛出來(lái)的時(shí)候,看了一下官方的文檔,一直沒(méi)怎么用過(guò)。
今天閑來(lái)無(wú)事,準(zhǔn)備用Rozor做個(gè)項(xiàng)目熟練下,結(jié)果寫(xiě)第一個(gè)頁(yè)面就卡住了。。折騰半天才搞好,下面給大家分享下解決方案。先來(lái)給大家簡(jiǎn)單介紹下Razor Razor Pages是ASP.NET Core的一項(xiàng)新功能,可以使編頁(yè)面的編程方案更簡(jiǎn)單,更高效。Razor頁(yè)面使用處理程序方法來(lái)處理傳入的HTTP請(qǐng)求(GET / POST / PUT / Delete)。這些類(lèi)似于ASP.NET MVC或WEB API的Action方法。Razor Pages遵循特定的命名約定,Handler方法也是如此。他們也遵循特定的命名約定,并與“On”前綴:和HTTP動(dòng)詞一樣OnGet(),OnPost()等處理方法也有異步版本:OnGetAsync(),OnPostAsync()等。介紹完Razor,直接上圖

功能很簡(jiǎn)單,就是個(gè)登錄。用戶點(diǎn)擊"登錄按鈕"后利用Jquery獲取文本框的值,異步提交到服務(wù)器。很簡(jiǎn)單的功能,相信大家都寫(xiě)過(guò)很多次了。啪啪啪幾下代碼就擼出來(lái)了。
##前臺(tái)代碼
<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="注冊(cè)">
</div>
</form>
##Script代碼
$("#btnLogin").click(function () {
$.post('/user/Login?hanler=LoginIn', { UserName:$("#UserName").val(), PassWord:$("#PassWord").val() }, function (data) {
console.log(data);
});
});
##后臺(tái)代碼
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("帳號(hào)密碼錯(cuò)誤!"));
//}
return new JsonResult(ApiResult.ToFail("參數(shù)填寫(xiě)錯(cuò)誤,請(qǐng)檢查!"));
}
}
首先解釋下/user/Login?hanler=LoginIn這個(gè)Url是什么意思,user是我Page下的一個(gè)目錄,Login是一個(gè)頁(yè)面,LoginIn是頁(yè)面里面對(duì)應(yīng)的一個(gè)方法。這個(gè)url的就是把這個(gè)請(qǐng)求交給OnPostLoginInAsync()方法處理。至于為什么是LoginIn而不是OnPostLoginInAsync,在文章開(kāi)頭也提到過(guò),這是Rozar的語(yǔ)法限定,不清楚的朋友可以去看下微軟的官方文檔,寫(xiě)的肯定比我好。。這個(gè)代碼乍一看,思路很清晰,項(xiàng)目跑起來(lái),走一波看看。
是的,你沒(méi)看錯(cuò),響應(yīng)碼400。各種姿勢(shì)試了半天,就是400,你現(xiàn)在一定想知道,上面的代碼有什么問(wèn)題。那么,上面的代碼沒(méi)有錯(cuò)。原因是,Razor被設(shè)計(jì)為可以自動(dòng)防止跨站請(qǐng)求偽造(CSRF / XSRF)攻擊。你不必編寫(xiě)任何其他代碼。Razor頁(yè)面中自動(dòng)包含防偽令牌生成和驗(yàn)證。這里請(qǐng)求失敗,是因?yàn)镻OST沒(méi)有提交AntiForgeryToken。有兩種方法可以添加AntiForgeryToken。
在ASP.NET Core MVC 2.0中,F(xiàn)ormTagHelper為HTML表單元素注入反偽造令牌。例如,Razor文件中的以下標(biāo)記將自動(dòng)生成防偽標(biāo)記:
<form method="post"> <!-- form markup --> </form>
明確添加使用 @Html.AntiForgeryToken()
要添加AntiForgeryToken,我們可以使用任何方法。這兩種方法都添加了一個(gè)隱藏名稱(chēng)的輸入類(lèi)型__RequestVerificationToken。Ajax請(qǐng)求應(yīng)將請(qǐng)求頭中的防偽標(biāo)記發(fā)送到服務(wù)器。所以,修改后的Ajax請(qǐng)求看起來(lái)像這個(gè)樣子:
$("#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ā)送請(qǐng)求前在請(qǐng)求頭中增加了"XSRF-TOKEN"標(biāo)識(shí),值為表單自動(dòng)生成的防偽標(biāo)記。由于“XSRF-TOKEN”是我們自己加的,框架本身不會(huì)識(shí)別,所以我們需要把這個(gè)標(biāo)記添加到框架:
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc();
services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");
}
現(xiàn)在服務(wù)端就可以正常收到Post請(qǐng)求了。折騰了半天總算解決了。。。。解決了之后發(fā)現(xiàn)自己之前鉆了牛角尖,,,其實(shí)還有更簡(jiǎn)單的方法。。太晚了,明天測(cè)試一下,可行的話補(bǔ)回來(lái)。
- ASP.NET Core中的Razor頁(yè)面實(shí)現(xiàn)路由功能
- ASP.NET?Core中Razor頁(yè)面與MVC區(qū)別介紹
- ASP.NET?Core中Razor頁(yè)面的Handlers處理方法詳解
- ASP.NET?Core?Razor頁(yè)面用法介紹
- ASP.NET?Core中的Razor頁(yè)面介紹
- asp.net core razor自定義taghelper的方法
- ASP.NET Core 2.0中Razor頁(yè)面禁用防偽令牌驗(yàn)證
- ASP.NET Core Razor 頁(yè)面路由詳解
- ASP.NET Core中的Razor頁(yè)面使用視圖組件
相關(guān)文章
ASP.NET Core中間件會(huì)話狀態(tài)讀寫(xiě)及生命周期示例
這篇文章主要為大家介紹了ASP.NET Core中間件會(huì)話狀態(tài)讀寫(xiě)及生命周期示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-04-04
ASP.NET?MVC打印表格并實(shí)現(xiàn)部分視圖表格打印
這篇文章介紹了ASP.NET?MVC打印表格并實(shí)現(xiàn)部分視圖表格打印的方法,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08
IIS服務(wù)器發(fā)布ASP.NET項(xiàng)目
如何在云服務(wù)器上部署一個(gè)項(xiàng)目,需要做哪些配置準(zhǔn)備,本文就來(lái)介紹一下IIS服務(wù)器發(fā)布ASP.NET項(xiàng)目,具有一定的參考價(jià)值,感興趣的可以了解一下2024-03-03
Asp.Net實(shí)現(xiàn)FORM認(rèn)證的一些使用技巧(必看篇)
下面小編就為大家?guī)?lái)一篇Asp.Net實(shí)現(xiàn)FORM認(rèn)證的一些使用技巧(必看篇)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
VS2015開(kāi)發(fā)環(huán)境的安裝和配置
本文主要是給大家把C#開(kāi)發(fā)環(huán)境各種版本的更新和安裝過(guò)程重新整理一下貢獻(xiàn)出來(lái),希望對(duì)小伙伴們能夠有所幫助2016-07-07
ASP.NET?Core中的Ocelot網(wǎng)關(guān)介紹
這篇文章介紹了ASP.NET?Core中的Ocelot網(wǎng)關(guān),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
ASP.NET實(shí)現(xiàn)用圖片進(jìn)度條顯示投票結(jié)果
ASP.NET實(shí)現(xiàn)用圖片進(jìn)度條顯示投票結(jié)果...2007-06-06
ASP.NET Core中修改配置文件后自動(dòng)加載新配置的方法詳解
這篇文章主要給大家介紹了關(guān)于ASP.NET Core中修改配置文件后自動(dòng)加載新配置的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用ASP.NET Core具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
ASP.NET MVC用存儲(chǔ)過(guò)程批量添加修改數(shù)據(jù)操作
這篇文章主要介紹了ASP.NET MVC用存儲(chǔ)過(guò)程批量添加修改數(shù)據(jù)的方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02

