.NET CORE Razor Pages Ajax call to C# method

Question

I am currently making a site to display locations on a google map. I get the location addresses from an Airtable.com database and everything there is working fine. However because google only allow a certain number of request to geocode addresses, i want to save the coordinates in the same database, so i only use the geocode api when a new location(address) needs to be looked up. I got that all setup, but i can't seem to figure out how i call a cs method from js in razor pages. I have used WebMethod in the past but i can't use that here apparently.

When i try to use the examples i find online, it says i need the RequestVerificationToken, but that needs the call to come from within a form(am i right?), and my ajax call is prompted when the site loads and it gets a location from the database which does not have any coordinates yet.

This is my first time using Razor Pages, so bear with me if i have totally misunderstood something.

Picture of my cs method i would like to call (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 ####################################");
    }

Picture of Ajax call from JavaScript, which is called on page load basically: 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);
   })
 }

Im aware that some of the code is not exactly what i need, but i just copied from online and will edit when im ahead of this hurdle .

Solution 1

Try returning a proper IActionResult result.

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

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

Next when making the call you need to call the correct handler path and include the anti-forgery token becasue, Razor Pages are designed to be automatically protected from cross-site request forgery (CSRF/XSRF) attacks.

Updated Ajax call

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);
    })
}

Very helpful article for reference

Handle Ajax Requests in ASP.NET Core Razor Pages

Solution 2

After reading Handle Ajax Requests in ASP.NET Core Razor Pages more carefully i figured out that i had indeed misunderstood some of the principles and that you CAN add AntiForgeryToken explicitly without a "form" tag, using @Html.AntiForgeryToken()

My code look like this now:

And:

Comments

[Nkosi]

Show more of the PageModel in a minimal reproducible example. I would also suggest Reference Introduction to Razor Pages in ASP.NET Core

[Filip Cordas]

From what I can tell you are having problems with XSRF/CSRF depending on configuration I think you need to add the header in your ajax call

[Nikolaj Herting Olsen]

Oh, yes, that's just a typo. It shows the OnPostGeoLocation in the picture. When i change the ? to a slash(/) i get a 404 not found error instead of the no VerficationToken error. I will look into the links you both provided and get back if i still cant seem to figure it out. Thanks!

[Filip Cordas]

Just one thing you don't need to use before send you have headers object in the call. Also this can be configured globally so you don't need this for every ajax.

[Nkosi]

You are correct and I made a mistake in my answer with the handler as well. fixing.