如何ASP.NET Core Razor中处理Ajax请求
在asp.net core razor(以下简称razor)刚出来的时候,看了一下官方的文档,一直没怎么用过。
今天闲来无事,准备用rozor做个项目熟练下,结果写第一个页面就卡住了。。折腾半天才搞好,下面给大家分享下解决方案。先来给大家简单介绍下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获取文本框的值,异步提交到服务器。很简单的功能,相信大家都写过很多次了。啪啪啪几下代码就撸出来了。
##前台代码 <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("参数填写错误,请检查!")); } }
首先解释下/user/login?hanler=loginin这个url是什么意思,user是我page下的一个目录,login是一个页面,loginin是页面里面对应的一个方法。这个url的就是把这个请求交给onpostlogininasync()方法处理。至于为什么是loginin而不是onpostlogininasync,在文章开头也提到过,这是rozar的语法限定,不清楚的朋友可以去看下微软的官方文档,写的肯定比我好。。这个代码乍一看,思路很清晰,项目跑起来,走一波看看。
是的,你没看错,响应码400。各种姿势试了半天,就是400,你现在一定想知道,上面的代码有什么问题。那么,上面的代码没有错。原因是,razor被设计为可以自动防止跨站请求伪造(csrf / xsrf)攻击。你不必编写任何其他代码。razor页面中自动包含防伪令牌生成和验证。这里请求失败,是因为post没有提交antiforgerytoken。有两种方法可以添加antiforgerytoken。
在asp.net core mvc 2.0中,formtaghelper为html表单元素注入反伪造令牌。例如,razor文件中的以下标记将自动生成防伪标记:
<form method="post"> <!-- form markup --> </form>
明确添加使用 @html.antiforgerytoken()
要添加antiforgerytoken,我们可以使用任何方法。这两种方法都添加了一个隐藏名称的输入类型__requestverificationtoken。ajax请求应将请求头中的防伪标记发送到服务器。所以,修改后的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); } }); });
改良后的代码在发送请求前在请求头中增加了"xsrf-token"标识,值为表单自动生成的防伪标记。由于“xsrf-token”是我们自己加的,框架本身不会识别,所以我们需要把这个标记添加到框架:
public void configureservices(iservicecollection services) { services.addmvc(); services.addantiforgery(o => o.headername = "xsrf-token"); }
现在服务端就可以正常收到post请求了。折腾了半天总算解决了。。。。解决了之后发现自己之前钻了牛角尖,,,其实还有更简单的方法。。太晚了,明天测试一下,可行的话补回来。
上一篇: JS实现的数组去除重复数据算法小结
推荐阅读
-
如何ASP.NET Core Razor中处理Ajax请求
-
如何在Asp.Net Core MVC中处理null值的实现
-
asp.net core webapi处理Post请求中的request payload
-
如何处理ASP.NET Core中HTML5客户端路由回退的问题
-
《ASP.NET Core In Action》读书笔记系列三 ASP.NET Core如何处理请求的?
-
如何在Asp.Net Core MVC中处理null值的实现
-
如何ASP.NET Core Razor中处理Ajax请求
-
asp.net core webapi处理Post请求中的request payload
-
Ajax请求响应中打开新窗口被拦截应该如何处理
-
Ajax请求响应中打开新窗口被拦截应该如何处理