我的编程空间,编程开发者的网络收藏夹
学习永远不晚

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

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

ASP.NET Core中怎么利用 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获取文本框的值,异步提交到服务器。很简单的功能,相信大家都写过很多次了。啪啪啪几下代码就撸出来了。

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

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

是的,你没看错,响应码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");}

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

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

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

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

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

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

ASP.NET中怎么利用Routing处理请求

ASP.NET中怎么利用Routing处理请求,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。ASP.NET Routing是一个通用的组件,它不涉及到任何具体的
2023-06-17

如何在 ASP.NET Core Web API 中处理 Patch 请求

这篇文章主要介绍了在 ASP.NET Core Web API中处理Patch请求,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-05-20

如何在 ASP.NET Core Web API 中处理 Patch 请求

本篇文章详细介绍了如何使用ASP.NETCoreWebAPI处理Patch请求。Patch请求用于对资源进行局部更新,它比PUT请求更灵活。这篇文章提供了分步说明,包括启用Patch方法、绑定模型、查询数据库、更新实体、保存更改和返回响应。文章还强调了版本控制、模型状态验证、请求记录和幂等性等最佳实践的重要性。通过遵循这些步骤,开发者可以轻松实现资源的局部更新,并为客户端应用程序提供更好的用户体验。
如何在 ASP.NET Core Web API 中处理 Patch 请求
2024-04-02

在 ASP.NET Core Web API 中处理Patch请求的方法

今天小编给大家分享的是在 ASP.NET Core Web API 中处理Patch请求的方法,相信很多人都不太了解,为了让大家更加了解,所以给大家总结了以下内容,一起往下看吧。一定会有所收获的哦。一、概述PUT 和 PATCH 方法用于更
2023-07-06

ASP.NET Core 中的拦截器:实现请求的中间处理

虽然ASP.NET Core没有名为“拦截器”的明确概念,如同Java的Spring框架中的拦截器,但可以通过中间件来实现类似的功能。

ASP.NET Core怎么使用IHttpClientFactory发出HTTP请求

今天小编给大家分享一下ASP.NET Core怎么使用IHttpClientFactory发出HTTP请求的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获
2023-06-29

SpringBoot+SpringSecurity怎么处理Ajax登录请求

这篇文章主要讲解了“SpringBoot+SpringSecurity怎么处理Ajax登录请求”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“SpringBoot+SpringSecurity
2023-06-19

怎么在FormData中利用Ajax请求上传文件

这篇文章将为大家详细讲解有关怎么在FormData中利用Ajax请求上传文件,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。Servlet3.0开始提供了一系列的注解来配置Servlet、Fi
2023-06-08

Java中的跨域请求怎么利用Ajax jsonp 实现

这篇文章将为大家详细讲解有关Java中的跨域请求怎么利用Ajax jsonp 实现,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。1、什么是JSONP一般来说位于 server1.exampl
2023-05-31

怎么利用promise及参数解构封装ajax请求

这篇文章主要介绍怎么利用promise及参数解构封装ajax请求,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1.前端代码
2023-06-08

Postman中怎么处理跨域请求

在Postman中处理跨域请求主要有两种方法:使用Postman Interceptor:Postman Interceptor是一个Chrome浏览器插件,可以将浏览器中的请求转发到Postman中进行调试。通过安装Postman Int
Postman中怎么处理跨域请求
2024-03-13

编程热搜

  • Python 学习之路 - Python
    一、安装Python34Windows在Python官网(https://www.python.org/downloads/)下载安装包并安装。Python的默认安装路径是:C:\Python34配置环境变量:【右键计算机】--》【属性】-
    Python 学习之路 - Python
  • chatgpt的中文全称是什么
    chatgpt的中文全称是生成型预训练变换模型。ChatGPT是什么ChatGPT是美国人工智能研究实验室OpenAI开发的一种全新聊天机器人模型,它能够通过学习和理解人类的语言来进行对话,还能根据聊天的上下文进行互动,并协助人类完成一系列
    chatgpt的中文全称是什么
  • C/C++中extern函数使用详解
  • C/C++可变参数的使用
    可变参数的使用方法远远不止以下几种,不过在C,C++中使用可变参数时要小心,在使用printf()等函数时传入的参数个数一定不能比前面的格式化字符串中的’%’符号个数少,否则会产生访问越界,运气不好的话还会导致程序崩溃
    C/C++可变参数的使用
  • css样式文件该放在哪里
  • php中数组下标必须是连续的吗
  • Python 3 教程
    Python 3 教程 Python 的 3.0 版本,常被称为 Python 3000,或简称 Py3k。相对于 Python 的早期版本,这是一个较大的升级。为了不带入过多的累赘,Python 3.0 在设计的时候没有考虑向下兼容。 Python
    Python 3 教程
  • Python pip包管理
    一、前言    在Python中, 安装第三方模块是通过 setuptools 这个工具完成的。 Python有两个封装了 setuptools的包管理工具: easy_install  和  pip , 目前官方推荐使用 pip。    
    Python pip包管理
  • ubuntu如何重新编译内核
  • 改善Java代码之慎用java动态编译

目录