asp.net core mvc ajax,asp.net core 的 razor pages 如何使用ajax调用后台方法

本文介绍了如何在ASP.NET Core中利用jQuery Ajax调用RazorPages的后端方法,包括禁用AntiForgeryToken保护和发送POST请求的示例代码。通过在Startup.cs配置过滤器,可以简化Ajax请求的处理。示例展示了如何从前端发送数据并接收返回的JSON响应。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Razor 是一种允许您向网页中嵌入基于服务器的代码(Visual Basic 和 C#)的标记语法。

当网页被写入浏览器时,基于服务器的代码能够创建动态内容。

在网页加载时,服务器在向浏览器返回页面之前,会执行页面内的基于服务器代码。

由于是在服务器上运行,这种代码能执行复杂的任务,比如访问数据库。

razor pages 的渲染是由服务器完成的,后端Razor直接渲染模版,这就会导致服务器端的压力,

所以在遇到数据量过大的地方,还是由前端来渲染比较好,这就牵涉到了如何利用ajax调用 razor pages的后端代码了,

基于我的搜索结果,方式有两种:

方式一

这个方式我个人认为比麻烦,大家可以自行查看链接

方式二

参考:https://www.learnrazorpages.com/security/request-verification#ajax-post-requests

这个方式也是我接受的方式:

操作步骤如下:

1、Startup文件的ConfigureServices方法,添加下段:

services.AddMvc().AddRazorPagesOptions(o =>

{

o.Conventions.ConfigureFilter(new IgnoreAntiforgeryTokenAttribute());

});

整体如下:

services.AddMvc()

.SetCompatibilityVersion(CompatibilityVersion.Version_2_1)

.AddRazorPagesOptions(o =>

{

o.Conventions.ConfigureFilter(new IgnoreAntiforgeryTokenAttribute());

});

2、Ajax请求

var postSubmit = $.ajax({

type: "POST",

url: "/yourformhandler",

data: JSON.stringify({ ... }),

contentType: "application/json"

}).done(function(response){

//...

});

举个栗子:

后端代码:

public class Index1Model : PageModel

{

public void OnGet()

{

}

//url:"Index"

public IActionResult OnPost([FromBody]MyClass my)

{

return new JsonResult("Hello Response Back");

}

//url: "Index?handler=Send"

public ActionResult OnPostSend([FromBody] MyClass my)

{

return new JsonResult(my);

}

public class MyClass

{

public int speakerId { get; set; }

public bool currentYear { get; set; }

}

}

前端Ajax调用:

Index1

click me

@section Scripts

{

$('#clickme').click(function (e) {

var _data = {

"speakerId": ,

"currentYear": true

};

var postSubmit = $.ajax({

type: "POST",

url: "Index1?handler=Send",

data: JSON.stringify(_data),

contentType: "application/json"

}).done(function (response) {

alert(response);

});

})

}

asp.net如何在前台利用jquery Ajax调用后台方法

一 :最近因为帮同事开发项目使用到了asp.net,而我又想实现Ajax异步请求....从网上查询了一下资料之后,原来在asp.net中利用Ajax调用后台方法同样很简单,为了便于自己以后查看,特将此 ...

Asp.net中JQuery、ajax调用后台方法总结

通过上一篇文章实例的实现,整个过程当中学习到很多知识点,了解了Jquery.Ajax在asp.net中的运用,加以总结,其实原理都是一样的,理解了一种,其他的注意很少的区别就可以了.灵活运用: 1.有 ...

[译]ASP.NET Core揭秘 - Razor Pages

原文 什么是Razor Pages? Razor pages是ASP.NET Core 2.0的新特性,它被设计用来更快的开发页面,比传统的MVC模式更便捷. 创建项目 为了使用Razor Pages ...

Asp.Net Core SignalR 用泛型Hub优雅的调用前端方法及传参

继续学习 最近一直在使用Asp.Net Core SignalR(下面成SignalR Core)为小程序提供websocket支持,前端时间也发了一个学习笔记,在使用过程中稍微看了下它的源码,不得不 ...

asp.net core 通过ajax调用后台方法(非api)

1.    在Startup.cs文件中添加:        services.AddMvc();            services.AddAntiforgery(o => o.Heade ...

asp.net ajax 调用后台方法

js代码

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值