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

Posted 凌风95

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了.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);
    }
});

 

以上是关于.NET Core Razor Pages中ajax get和post的使用的主要内容,如果未能解决你的问题,请参考以下文章

插入到 EF Core ASP.NET Core Razor Pages .NET6 中自动生成的 Bridge 表

我无法在 asp.net core 2.0 razor pages 中执行下载操作

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

在 ASP.net core 3.1 Razor Pages 中打印 PDF

带有 id 的 asp.net core 2 razor pages 路由

如何在 ASP.NET Core Razor Pages 项目的 _layout.cshtml 文件中使用 Razor Page Using Entity Framework 作为部分视图?