What is the “url” to ajax-call a C# function in an asp.net core razor pages application

Question

In the auto-generated site.js file of the ASP.NET Core Razor Pages project in Visual Studio, I am trying to call with Ajax

    $.ajax
        ({
            type: "POST",
            url: "",
            data: "asdsad",
            dataType: "text",
            success: function (result) {
                alert(result);
            },
            error: function (status, ex) {
                alert("Error Code: Status: " + status + " Ex: " + ex);
            }
        });

a C# function. My project tree looks like this:

The builder.cshtml.cs file was also auto-generated by Visual Studio when I added the builder.cshtml page. Inside my builder.cshtml.cs there is this code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MyProjectName.Pages
{
    public class Index1Model : PageModel
    {
        public string Message { get; set; } = "Initial Request";
        public void OnGet()
        {
            Message = "Test1";
        }

        public void HelloFunc()
        {
            Message = "BuilderJob";
        }
    }
}

I added the function HelloFunc() and the Message variable. I don't understand after going through the ASP.NET Core documentation by Microsoft what is the "url" to call the HelloFunc from my Ajax code. It is not /builder/HelloFunc (doesn't work). How do I access this HelloFunc from my Ajax call?

The answer is to change HelloFunc to OnPostHelloFunc() and use this url: /builder?handler=HelloFunc and if you are just testing and not using a validation token, to insert [IgnoreAntiforgeryToken(Order = 1001)] as instructed here test .net core 2 page using Postman return 400 bad request

Answer 1

Please refer this Razor Pages in ASP.NET Core documentation , Here they have mentioned file name and path map with its matching url.

For exa.

/Pages/Index.cshtml => / or /Index

/Pages/Contact.cshtml => /Contact

Another thing is Razor Pages follow particular naming convention. It prefixed with " On " followed by HTTP Verb like OnGet() , OnPost() etc. However, we can also specify custom names. For example -

• OnGetPatientList()
• OnPostHelloFunc()

Now if we talk about your case then you need to do the following change in your builder.cshtml.cs file.

namespace MyProjectName.Pages
{
    public class Index1Model : PageModel
    {
        public string Message { get; set; } = "Initial Request";
        public void OnGet()
        {
            Message = "Test1";
        }

        public IActionResult OnPostHelloFunc()
        {
            return Content("BuilderJob");
        }
    }
}

and your ajax function look like this -

$.ajax
({
    type: "POST",
    url: "/builder?handler=HelloFunc",
    dataType: "text",
    beforeSend: function (xhr) {
            xhr.setRequestHeader("XSRF-TOKEN",
                $('input:hidden[name="__RequestVerificationToken"]').val());
    },
    success: function (result) {
        alert(result);
    },
    error: function (status, ex) {
        alert("Error Code: Status: " + status + " Ex: " + ex);
    }
});

Answer 2

Razor Pages is using page handlers for this. So if you want to POST to your page, create a method with the name OnPost{HandlerName} or OnPost{HandlerName}Async , if its an async method.

As an exmaple, if you have a form and want to delete something, You'd need a page handler like this:

public async Task<IActionResult> OnPostDeleteAsync(int id)
{
    var itemToDelete = await _mapRepo.GetByIdAsync(id);
    if (itemToDelete == null)
    {
        //...
    }

    await _mapRepo.Delete(itemToDelete);
    return RedirectToPage("Maps");
}

The OnPost declares, that asp.net core will listen for a POST request, Delete is the name, while Async is a naming convention for async handlers.

In your form, you would then simply declare an input element, that would call this handler during the onclick event:

<button type="submit" class="btn btn-danger btn-block" asp-page-handler="Delete" asp-route-id="@Model.Id">Delete</button>

Doing this with ajax:

$.ajax
({
    type: "POST",
    url: "/builder?handler=HelloFunc",
    dataType: "text",
    success: function (result) {
        alert(result);
    },
    error: function (status, ex) {
        alert("Error Code: Status: " + status + " Ex: " + ex);
    }
});

With a handler method:

public void OnPostHelloFunc()
{
    //...
}

Here is a good read on named handlers: https://www.learnrazorpages.com/razor-pages/handler-methods