如何ASP.NET Core Razor中处理Ajax请求

 更新时间:2018年01月22日 16:39:17   投稿:laozhang  
本篇技术文章主要给大家讲述了如何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请求了。折腾了半天总算解决了。。。。解决了之后发现自己之前钻了牛角尖,,,其实还有更简单的方法。。太晚了,明天测试一下,可行的话补回来。

相关文章

  • asp.net下生成英文字符数字验证码的代码

    asp.net下生成英文字符数字验证码的代码

    用了asp.net随机数,获取指定位数的字母或数字以后,进行图片输出的验证码函数。
    2009-12-12
  • 浅谈ASP.NETCore统一处理404错误都有哪些方式

    浅谈ASP.NETCore统一处理404错误都有哪些方式

    本文主要介绍了ASP.NETCore统一处理404错误都有哪些方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • .NET逻辑分层架构总结

    .NET逻辑分层架构总结

    本人将从另一个角度来解析.NET分层架构的真正奥秘。分层,一些技术功底比较薄弱的程序员听到分层就会联想到三层架构(BLL,DAL之类的),其实不是,分层是一个很大的技术框架思想,三层架构只不过是对普通的信息系统来说,将信息的流转通过三层来分解,
    2015-06-06
  • asp.net 在global中拦截404错误的实现方法

    asp.net 在global中拦截404错误的实现方法

    asp.net 在global中拦截404错误,增加用于体验,不会因为提示找不到信息而直接退出的尴尬。
    2010-03-03
  • .NET Core3.0 日志 logging的实现

    .NET Core3.0 日志 logging的实现

    这篇文章主要介绍了.NET Core3.0 日志 logging的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • .net前台调用后台函数的简单实例

    .net前台调用后台函数的简单实例

    这篇文章介绍了.net前台调用后台函数的简单实例,有需要的朋友可以参考一下
    2013-09-09
  • asp.net使用母版页中使用ajax脚本取数据

    asp.net使用母版页中使用ajax脚本取数据

    因母版页继承自UserControl,我们无法像正常页面那样使用Jquey或Ajax的PageMethods等无刷新方法取数据。不过可以使用ajax提供的Sys.Net.WebRequest来解决这一问题。
    2010-09-09
  • 几种using 的用法小结

    几种using 的用法小结

    本文介绍了,几种using 的使用方法,需要的朋友可以参考一下
    2013-03-03
  • ASP.NET开发者使用jQuery应该了解的几件事情

    ASP.NET开发者使用jQuery应该了解的几件事情

    如果你是有着APS.NET开发背景的人员,那么jQuery的几个概念建议你应该忘掉。像使用其它的framework一样,你应该学习一下jQuery的所有语法等约定来让它更好的为你服务。
    2009-09-09
  • ADO.NET通用数据库访问类

    ADO.NET通用数据库访问类

    这篇文章主要为大家介绍了ADO.NET通用数据库访问类,利用ADO.NET的体系架构打造通用的数据库访问通用类,感兴趣的小伙伴们可以参考一下
    2016-03-03

最新评论