.NET Core Razor Pages中ajax get和post的使用

ASP.NET Core Razor Pages Web项目大部分情况下使用继承与PageModel中的方法直接调用就可以(asp-page),但是有些时候需要使用ajax调用,更方便些。那么如何使用ajax调用呢??

1.Razor Pages普通页面的跳转

<a asp-page="About">About</a>
<form asp-page="./Index" method="get">
    <div class="form-actions no-color">
        <p>
            Find By Name:
            <input type="text" name="searchString" value="@Model.CurrentFilter" />
            <input type="submit" value="Search" class="btn btn-primary" />|
            <a asp-page="./Index">Back to full list</a>
        </p>
    </div>
</form>

form默认为post提交,asp-page跳转的页面,首先获取的是get方法,如:OnGetAsync或者OnGet,同时存在运行会报错

2. 针对一个页面的多个处理

<form method="POST">
    <div>Name: <input asp-for="Customer.Name" /></div>
    <input type="submit" asp-page-handler="JoinList" value="Join" />
    <input type="submit" asp-page-handler="JoinListUC" value="JOIN UC" />
</form>

指向当前页面的JoinList方法和JoinListUC方法,增加了handle,将跳转到OnPost[handler]Async方法。

3. Razor Pages中ajax的Get使用

$.get("?handler=Filter", { id: $(this).attr("data-id") },
    function (result) {
        console.log(result);
});
$.ajax({
    type: ‘GET‘,
    contentType: "application/json",
    dataType: "json",
    url: "?handler=Filter",
    success: function (result) {
        alert(result);
    }
});

跳转到OnGetFilterAsync方法,url写的需要注意(handler=)就可以了

4. Razor Pages中ajax的Post使用

Razor Pages 由防伪造验证保护,FormTagHelper 将防伪造令牌注入 HTML 窗体元素,防止跨站点请求伪造 (XSRF/CSRF)。
XSS:跨站脚本(Cross-site scripting,通常简称为XSS)是一种网站应用程序的安全漏洞攻击,是代码注入的一种。它允许恶意用户将代码注入到网页上,其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。
CSRF:跨站请求伪造(英语:Cross-site request forgery),也被称为 one-click attack 或者 session riding,通常缩写为 CSRF 或者 XSRF, 是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。
由于以上的问题,直接ajax post请求会出错,错误这里就不贴图了。

解决办法1:

1. Startup.cs中的ConfigureServices方法增加

services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");

2. ***.cshmtl你的页面增加

@Html.AntiForgeryToken()

3. ajax post请求

$.ajax({
    url: ‘?handler=Filter2‘,
    type: ‘POST‘,
    contentType: ‘application/json; charset=utf-8‘,
    headers: {
        "XSRF-TOKEN":$(‘input:hidden[name="__RequestVerificationToken"]‘).val()
    },
    success: function (result) {
        alert(result);
    }
});

解决方法2:不推荐

1. Startup.cs中的ConfigureServices方法增加

services.AddRazorPages().AddRazorPagesOptions(o=> { o.Conventions.ConfigureFilter(new IgnoreAntiforgeryTokenAttribute()); });

2. ajax post请求

$.ajax({
    url: ‘?handler=Filter2‘,
    type: ‘POST‘,
    contentType: ‘application/json; charset=utf-8‘,
    success: function (result) {
        alert(result);
    }
});

原文地址:https://www.cnblogs.com/zhao123/p/11765642.html

时间: 2024-09-29 08:33:23

.NET Core Razor Pages中ajax get和post的使用的相关文章

ASP.NET Core Razor Pages 教程六 处理表单

处理表单 任何成功的电子商务网站都需要能够处理订单.如果你没有客户的联系方式和送货地址就很难做到这一点.网站收集这类信息的方式是使用表单. 在本节中,你将向 Order 页面添加一个表单,同时还将向表单中添加验证,以确保信息的收集是有效和完整的. 准备工作 首先,添加以下的样式声明到 wwwroot/css 中的 site.css 文件: label[for="OrderQuantity"]{ padding-left: 15px; } #OrderQuantity{ margin:

ASP.NET Core Razor Pages 教程五 使用数据

使用数据 第一次使用数据时,你将重点关注于使用 BakeryContext 检索要在主页和订购页上显示的数据, 这些数据还没有添加到应用程序中. 提醒一下,主页应该类似于此处的 ASP.NET Web Pages 版本: 所有产品的描述.图片和价格一起显示,随机选择其中一个产品作为特色产品出现在页面的顶部. 管理数据的显示需要少量的准备工作.首先,将以下代码添加到位于 wwwroot/css 中的现有 site.css 文件中: body{ color: #696969; } a:link {

【翻译】介绍 ASP.NET Core 中的 Razor Pages

介绍 ASP.NET Core 中的 Razor Pages 原文地址:Introduction to Razor Pages in ASP.NET Core         译文地址:介绍 asp.net core 中的 Razor Pages          翻译:ganqiyin Razor Pages 是 ASP.NET Core MVC 的一个新功能,可以让基于页面的编程方案更容易,更高效. 如果您正在寻找使用 Model-View-Controller 的教程,请参阅ASP.NET

在 ASP.NET Core 中向 Razor Pages 应用显示模型

以下是实现也一个asp.net core Razor Pages的基本步骤 1.定义模型元素 using System; using System.ComponentModel.DataAnnotations; namespace RazorPagesMovie.Models { public class Movie { public int ID { get; set; } public string Title { get; set; } [DataType(DataType.Date)]

Razor Page中的AJAX

1.由于Razor Pages自带提供防伪令牌/验证,用来防止跨站点请求伪造(称为XSRF或CSRF),所以和MVC框架中API使用方式有稍许的不同. 2.所以在我们使用Razor Pages中的form表单提交数据时,框架会自动帮我们生成一个隐藏的Input,并在我们提交表单时加入在请求报文头中. <input name="__RequestVerificationToken" type="hidden" value="CfDJ8P-uB18ojy

在Asp.net Razor Pages/MVC程序中集成Blazor

今天试了一下在Asp.net core Razor Pages/MVC程序中集成Blazor(Server-side),还是可以完美整合的,这里以Razor Pages为例(.net core 3.1),记录下相关过程. 1. 配置StartUp,添加Blazor服务 public void ConfigureServices(IServiceCollection services){    services.AddRazorPages();    services.AddServerSideB

基于ASP.NET Core 3.0快速搭建Razor Pages Web应用

前言 虽然说学习新的开发框架是一项巨大的投资,但是作为一个开发人员,不断学习新的技术并快速上手是我们应该掌握的技能,甚至是一个.NET Framework开发人员,学习.NET Core 新框架可以更快速掌握其中的编写,构建,测试,部署和维护应用程序. 您现有的.NET Framework应用程序可以在其他操作系统上工作.对于希望扩大类库的受众平台,或者希望在分布式应用程序的其他领域使用相同代码的开发人员来说,这是非常好的选择. .NET Core是为了重新启动某些Framework组件而为其他

说说ASP.Net Core 2.0中的Razor Page

随着.net core2.0的发布,我们可以创建2.0的web应用了.2.0中新东西的出现,会让我们忘记老的东西,他就是Razor Page.下面的这篇博客将会介绍ASP.Net Core 2.0中的Razor Page. 在ASP.Net Core 2.0新特点之一就是支持Razor Page.今天的Razor Page是ASP.Net Core MVC中的一个子集.ASP.Net Core MVC 支持Razor Page意味着Razor Page应用从技术上来说就是MVC应用,同时Razo

Use Razor pages and webapi in the same project @ .net core 3.0

I created a web app (razor pages) in .net core 3.0. Then I added an api controller to it (both from templates, just few clicks). When I run app, razor page works, but api call returns 404.I get the answer on stackoverflow:https://stackoverflow.com/qu