ASP.NETCore中怎么利用Razor处理Ajax请求

这篇文章将为大家详细讲解有关ASP.NET Core中怎么利用 Razor处理Ajax请求,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

新和网站建设公司创新互联公司,新和网站设计制作,有大型网站制作公司丰富经验。已为新和数千家提供企业网站建设服务。企业网站搭建\外贸网站建设要多少钱,请找那个售后服务好的新和做网站的公司定做!

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,直接上图

ASP.NET Core中怎么利用 Razor处理Ajax请求

功能很简单,就是个登录。用户点击"登录按钮"后利用Jquery获取文本框的值,异步提交到服务器。很简单的功能,相信大家都写过很多次了。啪啪啪几下代码就撸出来了。

##前台代码
                                   
               
                   
  •                                                          
  •                
                                   忘记密码?                            
           
                           
           
                           
##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 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的语法限定,不清楚的朋友可以去看下微软的官方文档,写的肯定比我好。。这个代码乍一看,思路很清晰,项目跑起来,走一波看看。

ASP.NET Core中怎么利用 Razor处理Ajax请求

是的,你没看错,响应码400。各种姿势试了半天,就是400,你现在一定想知道,上面的代码有什么问题。那么,上面的代码没有错。原因是,Razor被设计为可以自动防止跨站请求伪造(CSRF / XSRF)攻击。你不必编写任何其他代码。Razor页面中自动包含防伪令牌生成和验证。这里请求失败,是因为POST没有提交AntiForgeryToken。

有两种方法可以添加AntiForgeryToken。

  • 在ASP.NET Core MVC 2.0中,FormTagHelper为HTML表单元素注入反伪造令牌。例如,Razor文件中的以下标记将自动生成防伪标记:

  • 明确添加使用 @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");
}

关于ASP.NET Core中怎么利用 Razor处理Ajax请求就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


标题名称:ASP.NETCore中怎么利用Razor处理Ajax请求
本文路径:http://scyanting.com/article/gggpic.html