Skip to main content
 首页 » 编程设计

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

2024年01月29日29sxdcgaq8080

我目前正在制作一个网站以在谷歌地图上显示位置。我从 Airtable.com 数据库中获取位置地址,一切正常。但是因为谷歌只允许一定数量的地址地理编码请求,我想将坐标保存在同一个数据库中,所以我只在需要查找新位置(地址)时使用地理编码 api。我得到了所有设置,但我似乎无法弄清楚如何在 Razor 页面中从 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); 
   }) 
 } 

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

请您参考如下方法:

尝试返回正确的 IActionResult 结果。

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

接下来,在进行调用时,您需要调用正确的处理程序路径并包括防伪 token ,因为 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