如何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"  id="UserName" /><div class="clear"> </div></div><div class="login-ic"><i class="icon"></i><input  id="PassWord" asp-for="Login.PassWord" /><div class="clear"> </div></div><div style="margin-top:-0.5em;"><ul><li><input type="checkbox" id="brand1" value=""><label for="brand1">记得我</label></li></ul><a href="#">忘记密码?</a></div><div class="log-bwn" style="margin-top:4em;"><input type="button" value="登录" id="btnLogin"></div><div class="log-bwn" style="margin-top:1em;"><input type="button" value="注册" onclick="location.href='/user/register'"></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请求了。折腾了半天总算解决了。。。。解决了之后发现自己之前钻了牛角尖,,,其实还有更简单的方法。。太晚了,明天测试一下,可行的话补回来。

原文地址:https://www.cnblogs.com/dazhuangtage/p/8322452.html


.NET社区新闻,深度好文,欢迎访问公众号文章汇总 http://www.csharpkit.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/322272.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Sentinel(十一)之黑白名单控制

转载自 黑白名单控制 很多时候&#xff0c;我们需要根据调用来源来判断该次请求是否允许放行&#xff0c;这时候可以使用 Sentinel 的来源访问控制&#xff08;黑白名单控制&#xff09;的功能。来源访问控制根据资源的请求来源&#xff08;origin&#xff09;限制资源是否通…

Loj2687,jzoj3320-文本编辑器【线头dp】

正题 题目链接:https://loj.ac/problem/2687 题目大意 三个操作: hhh光标向前移动一格xxx删除光标处字母fcf\ cf c移动到下一个字符ccc(算两次操作) 然后fff操作不能对字符eee使用&#xff0c;然后求最少操作次数删除所有的eee。 解题思路 线头dpdpdp。 设fi,jf_{i,j}fi,j​…

小白带你入坑xamarin系列之环境搭建和准备

序言&#xff1a;移动端的跨平台百花齐放&#xff0c;各种技术方案和方法都是层出不穷。目前xamarin确实是一套成熟可靠&#xff0c;完全值得信赖的开发框架。尤其是对传统做WPF ASP.NET的开发团队来说要节约成本开始移动端开发。这个是很好的一个选项。开始之前回答2个问题。1…

P3402-[模板]可持久化并查集【主席树】

正题 题目链接:https://www.luogu.org/problemnew/show/P3402 题目大意 合并x,yx,yx,y所在的两个集合回到操作kkk之后询问x,yx,yx,y是否在同一个集合 解题思路 正常的并查集&#xff0c;不使用路径压缩&#xff0c;但是使用按秩合并&#xff0c;将深度小的合并到深度大的上面…

Sentinel(十二)之实时监控

转载自 实时监控 Sentinel 提供对所有资源的实时监控。如果需要实时监控&#xff0c;客户端需引入以下依赖&#xff08;以 Maven 为例&#xff09;&#xff1a; <dependency><groupId>com.alibaba.csp</groupId><artifactId>sentinel-transport-sim…

Dora.Interception,为.NET Core度身打造的AOP框架:全新的版本

Dora.Interception 1.0&#xff08;可以访问GitHub地址&#xff1a;https://github.com/jiangjinnan/Dora&#xff09;推出有一段时间了&#xff0c;最近花了点时间将它升级到2.0&#xff0c;主要有如下的改进&#xff1a;提供了原生的动态代理生成底层框架Dora.DynamicProxy&a…

欢乐纪中某A组赛【2019.7.8】

前言 你以为我是jzojjzojjzoj&#xff0c;其实我是GMojGMojGMoj哒 成绩 JJJ表示初中&#xff0c;HHH表示高中后面加的是几年级 上至222分XJQXJQXJQ,下至200ZZY200ZZY200ZZY都有我们SSLSSLSSL的人(滑稽) |RankRankRank|PersonPersonPerson|ScoreScoreScore|AAA|BBB|CCC| RankR…

Sentinel(十四)之控制台

转载自 Sentinel 控制台 1. 概述 Sentinel 提供一个轻量级的开源控制台&#xff0c;它提供机器发现以及健康情况管理、监控&#xff08;单机和集群&#xff09;&#xff0c;规则管理和推送的功能。这里&#xff0c;我们将会详细讲述如何通过简单的步骤就可以使用这些功能。 …

C# 这些年来受欢迎的特性

原文地址:http://www.dotnetcurry.com/csharp/1411/csharp-favorite-features在写这篇文章的时候&#xff0c;C# 已经有了 17 年的历史了&#xff0c;可以肯定地说它并没有去任何地方。C# 语言团队不断致力于开发新特性&#xff0c;改善开发人员的体验。在这篇文章中&#xff0…

P2657-[SCOI2009]windy数【数位dp,dfs】

正题 题目链接:https://www.luogu.org/problemnew/show/P2657 题目大意 求A∼BA\sim BA∼B中不含前导零且没两个相邻的位数相差至少为222的数字个数。 解题思路 考虑记忆化搜索&#xff0c;用fi,jf_{i,j}fi,j​表示到第iii位数字为jjj时的方案数。 然后用1∼B1\sim B1∼B中…

Sentinel(十三)之动态规则扩展

转载自 动态规则扩展 规则 Sentinel 的理念是开发者只需要关注资源的定义&#xff0c;当资源定义成功后可以动态增加各种流控降级规则。Sentinel 提供两种方式修改规则&#xff1a; 通过 API 直接修改 (loadRules)通过 DataSource 适配不同数据源修改 手动通过 API 修改比较…

AspectCore动态代理中的拦截器详解(一)

前言在上一篇文章使用AspectCore动态代理中&#xff0c;简单说明了AspectCore.DynamicProxy的使用方式&#xff0c;由于介绍的比较浅显&#xff0c;也有不少同学留言询问拦截器的配置&#xff0c;那么在这篇文章中&#xff0c;我们来详细看一下AspectCore中的拦截器使用。两种配…

P3279-[SCOI2013]密码【Manacher】

正题 题目链接:https://www.luogu.org/problemnew/show/P3279 题目大意 一个字符串满足: 有nnn个字符仅包含小写字母告诉你每个字符为中心的最大回文串长度告诉你每个两个字符的间隙为中心的最大回文串长度 求满足要求的字典序最小的字符串。 解题思路 因为字典序最小&…

Actor-ES框架:Ray

并发1. 并发和并行并发&#xff1a;两个或多个任务在同一时间段内运行。关注点在任务分割。并行&#xff1a;两个或多个任务在同一时刻同时运行。关注点在同时执行。本文大多数情况下不会严格区分这两个概念&#xff0c;默认并发就是指并行机制下的并发。2. 好处随着多核处理器…

Sentinel(十五)之在生产环境中使用 Sentinel

转载自 在生产环境中使用 Sentinel 引言 Sentinel 目前已可用于生产环境&#xff0c;除了阿里巴巴以外&#xff0c;也有很多企业在生产环境中广泛使用 Sentinel。 生产环境的 Sentinel Dashboard 需要具备下面几个特性: 规则管理及推送&#xff0c;集中管理和推送规则。se…

P3934-Nephren Ruq Insania【欧拉定理,树状数组】

正题 题目链接:https://www.luogu.org/problemnew/show/P3934 题目大意 长度为nnn的序列aaa 1lrw:1\ l\ r\ w:1 l r w:让l∼rl\sim rl∼r这个区间增加www。2lrp:2\ l\ r\ p:2 l r p:求alal1al2...%pa_l^{a_{l1}^{a_{l2}^{...}}}\% palal1al2...​​​%p直到ara_rar​ 解题思路…

Entity Framework Core 懒加载

众所周知在EF 6 及以前的版本中&#xff0c;是支持懒加载&#xff08;Lazy Loading&#xff09;的&#xff0c;可惜在EF Core 并不支持&#xff0c;必须使用Include方法来支持导航属性的数据加载。不过现在EF Core的开发团队打算恢复对这一功能的支持&#xff08;目前还未发布&…

Sentinel(十六)之AHAS Sentinel 控制台

转载自 AHAS Sentinel 控制台 AHAS Sentinel 是 Sentinel 的阿里云上版本&#xff0c;提供企业级的高可用防护服务&#xff0c;包括&#xff1a; 可靠的实时监控和历史秒级监控数据查询&#xff0c;包含 QPS、RT、load、CPU 使用率等指标&#xff0c;支持按照调用类型分类&a…

和各路巨佬の随机挑战3总结

第三次挑战\huge \texttt{\color{purple}第\color{blue}三\color{green}次\color{block}挑\color{red}战}第三次挑战 规则 随机挑取一蓝一紫一黑来做&#xff0c;拥有两次换题机会&#xff0c;若黑题是暂未学过的算法可以拥有无限次换题机会。 van♂van♂van♂成记录 过程 晚…

浅析Entity Framework Core2.0的日志记录与动态查询条件

一、 Entity Framework Core2.0的日志记录早在Entity Framework Core1.0 ,我们就使用相关的ILoggerProvider ILogger 这些基础接口类.来实现过日志记录.在Entity Framework Core2.0 估计是为了配合ASP.NET Core的日志.所以对这些接口进行了更进一步的包装,也弃用了一些接口和类…