.NET CORE Razor Pages Ajax 调用 C# 方法

Question

我目前正在制作一个网站以在 google 地图上显示位置。我从 Airtable.com 数据库中获取位置地址，那里的一切都工作正常。但是因为 google 只允许一定数量的地址地理编码请求，我想将坐标保存在同一个数据库中，所以我只在需要新位置（地址）时使用地理编码 api抬头。我得到了所有设置，但我似乎无法弄清楚如何在剃须刀页面中从 js 调用 cs 方法。我过去使用过 WebMethod，但显然我不能在这里使用它。

当我尝试使用我在网上找到的示例时，它说我需要 RequestVerificationToken，但这需要调用来自一个表单（对吗？），我的 ajax 调用是当网站加载时提示，它从数据库中获取一个位置，但还没有任何坐标。

这是我第一次使用 Razor Pages，如果我完全误解了某些内容，请多多包涵。

我想调用的 cs 方法的图片 (Index.cshtml.cs) I tried with the httpPost tag, but it didn't make a difference

    [HttpPost] // RequestVerificationToken
    public void OnPostGeoLocation()
    {
        // Just to test that it actually gets called
        Console.WriteLine("OnPostGeoLocation CALLED ####################################");
        Console.WriteLine("OnPostGeoLocation CALLED ####################################");
        Console.WriteLine("OnPostGeoLocation CALLED ####################################");
        Console.WriteLine("OnPostGeoLocation CALLED ####################################");
    }

来自 JavaScript 的 Ajax 调用的图片，基本上在页面加载时调用：AjaxCall

function updateRow(recordID, latLng) {
   console.log("REC_ID: " + recordID);
   console.log("LatLng: " + latLng);
   $.ajax({
       type: "POST",
       url: '/Index?OnPostGeoLocation', 
       contentType: "application/json; charset=utf-8",
       dataType: "json"
   }).done(function (data) {
       console.log(data.result);
   })
 }

我知道有些代码并不完全是我需要的，但我只是从网上复制的，当我领先于这个障碍时会进行编辑。

Answer 1

尝试返回正确的 IActionResult 结果。

[HttpPost]
public IActionResult OnPostGeoLocation() {
    // Just to test that it actually gets called
    Console.WriteLine("OnPostGeoLocation CALLED ####################################");

    return new JsonResult("OnPostGeoLocation CALLED ####################################");
}

接下来，在进行调用时，您需要调用正确的处理程序路径并包括防伪令牌，因为 Razor 页面旨在自动保护免受跨站点请求伪造 (CSRF/XSRF) 攻击。

已更新 Ajax 通话

function updateRow(recordID, latLng) {
    console.log("REC_ID: " + recordID);
    console.log("LatLng: " + latLng);
    $.ajax({
        type: "POST",
        url: '/Index?handler=GeoLocation', 
        beforeSend: function (xhr) {
            xhr.setRequestHeader("XSRF-TOKEN",
                $('input:hidden[name="__RequestVerificationToken"]').val());
        },
        contentType: "application/json; charset=utf-8",
        dataType: "json"
    }).done(function (data) {
        console.log(data.result);
    })
}

很有帮助的文章供参考

Handle Ajax Requests in ASP.NET Core Razor Pages

Answer 2

仔细阅读 Handle Ajax Requests in ASP.NET Core Razor Pages 后，我发现我确实误解了一些原则，您可以使用 @Html.AntiForgeryToken( )

我的代码现在看起来像这样：

并且：

.NET CORE Razor Pages Ajax 调用 C# 方法

.NET CORE Razor Pages Ajax call to C# method

c#

ajax

asp.net-core

razor-pages