ASP.NET芯剃刀(以下简称剃刀)刚出来的时候,我看了官方文件,没用过。
今天,我无事可做。我打算用Rozor作为项目,写第一页的时候就卡住了。做好需要很长时间。让我们与您分享解决方案。首先简单介绍一下ASP.NET Core的新功能Razor Razor Pages,它可以让页面编译的编程方案更加简单高效。Razor页面使用处理程序方法来处理传入的HTTP请求(GET/POST/PUT/Delete)。这些类似于ASP.NET MVC或WEB API的Action方法。如同Handler方法一样,Razor Pages遵循特定的命名约定。它们还遵循特定的命名约定,并以“on”作为前缀:像HTTP动词一样,OnGet()和OnPost()等处理方法也有异步版本:OnGetAsync()、OnPostAsync()等。介绍完Razor,直接上图
功能很简单,只需一次登录。用户点击“登录按钮”,然后使用Jquery获取文本框的值,并异步提交给服务器。很简单的功能,相信大家都写过很多次了。几下点击,代码就出来了。
# #前台代码form method=' post ' div class=' log in-IC ' I/I input tap-for=' log in . username '/div class=' clear '/div/div class=' log in-IC ' I class=' icon '/I input ASP-for=' log in . password '/div class=' clear '/div/div ul Li input type=' checkbox ' value=' label for=' brand 1 '记住我/label/Li/ul a href=' # ' rel=' external nofollow '忘记了我的密码?/a/div class=' log-bwn '输入类型=' button '值=' log in '/div class=' log-bwn '输入类型=' button '值=' register '/div/form # # Script code $(' # btnlogin ')。单击(function () hanler=LoginIn ',{ UserName:$('#UserName ')。val(),PassWord : $(' # PassPort ')。val() },函数(数据){ console.log(数据);});});# #背景代码公共类登录模型: page model { private user service see _ user service;public LoginModel(userservisiccsee user service){ _ user service=user service;} public void OnGet(){ }[BindProperty]public Userlogindto log in { get;设置;} public async TaskActionResult onpostlogininsync(){//if(model state。is valid)//{//var user=await _ user service。登录同步;//if(用户!=null)//{//返回新的JSON结果(apiresult。tosuccess('登录成功!' ));//}//返回新的JSON结果(apiresult。tofail('错误的帐户密码!' ));//}返回新的jsonresult (apiresult。tofail('参数填写不正确,请检查!' ));}}首先解释/用户/登录?Hanler=LoginIn这个Url是什么意思?用户是我的页面下的一个目录,登录是一个页面,LoginIn是页面中对应的方法。此url的目的是将此请求提供给OnPostLoginInAsync()方法。至于为什么是LoginIn而不是OnPostLoginInAsync,文章开头也提到了,这是Rozar的语法限制。不清楚的朋友可以看看微软的官方文档,肯定比我的好。乍一看,这段代码的思路非常清晰。项目运行并进行查看。
是的,你没看错。回应代码是400。我尝试了很久各种姿势,也就是400。现在你一定想知道上面的代码有什么问题。那么,上面的代码没有问题。原因是Razor旨在自动防止跨站点请求伪造(CSRF/XSRF)攻击。您不必编写任何其他代码。Razor页面自动包括防伪令牌生成和验证。此处请求失败,因为开机自检未提交防伪令牌。有两种方法可以添加防伪标签。
在ASP.NET核心MVC 2.0中,FormTagHelper将防伪令牌注入到HTML表单元素中。例如,Razor文件中的以下标签将自动生成防伪标签:
form方法='post '!-表单标记-/表单
显式添加并使用@Html。防伪Token()
要添加防伪标志,我们可以使用任何方法。这两种方法都添加了一个具有隐藏名称的输入类型__RequestVerificationToken。Ajax请求应该将请求头中的防伪标记发送给服务器。因此,修改后的Ajax请求看起来像这样:
$('#btnLogin ')。单击(function () { $)。ajax({ type: 'POST ',url: '/user/Login?handler=LoginIn ',beforeSend:函数(xhr){ xhr . setrequestheader(' XSRF-TOKEN ',$(' input : hidden[name=' _ _ RequestVerificationToken ']')。val());},data : { UserName : $(' # UserName ')。val(),PassWord : $(' # PassPort ')。val() },success:函数(响应){ console.log(响应);},failure:函数(响应){ alert(响应);} });});改进后的代码在发送请求前在请求头中加入‘XSRF-TOKEN’,值为表单自动生成的防伪标识。由于“XSRF-TOKEN”是我们自己添加的,框架本身不会识别它,所以我们需要在框架中添加这个标签:
public void ConfigureServices(IServiceCollection services){ services。AddMvc();服务。添加防伪(o=o . header name=' XSRF-TOKEN ');}现在服务器可以正常接收Post请求。经过长时间的折腾,终于解决了。解决问题后,我发现我以前经历过困难。其实还有更简单的方法。太晚了。明天测试一下,如果可能的话再补上。