Implement an Ajax handler in your Razor page

Question

Implement an Ajax handler in your Razor page

While I have experience with the customary MyPage.cshtml and MyPage.cshtml.cs files containing OnGetAsync and OnPostAsync methods, I am curious about how to incorporate an additional handler into the model page that can be invoked using JavaScript without the need for a complete form submission. Can anyone provide guidance on this?

javascript ajax asp.net-core razor-pages

Answer 1

Answer №1

using System.Collections.Generic;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.Antiforgery;
using Microsoft.AspNetCore.Mvc;

namespace MyApp.Pages;

public class ListModel : PageModel
{
    private readonly IAntiforgery _antiForgery;

    public AntiforgeryTokenSet AntiForgeryToken {get; private set;}

    public ListModel(
        IAntiforgery antiForgery
    )
    {
        this._antiForgery = antiForgery;
    }

    public async Task OnGet()
    {
        AntiForgeryToken = _antiForgery.GetAndStoreTokens(HttpContext);
    }

    public async Task<JsonResult> OnPostWafflesAsync(bool test)
    {
        System.Console.WriteLine("Test approval result="+test);
        return new JsonResult(new {
            received = true,
            test,
        });
    }
}

<script>
const formData = new FormData();
formData.append('test', false);
fetch(
    `${window.location}?handler=Waffles`,
    {
        method: "POST",
        headers: {
            RequestVerificationToken:`@Model.AntiForgeryToken.RequestToken`,
        },
        body: formData,
});
</script>

In this scenario, we are sending a JsonResult for easier consumption by JavaScript, although the example does not utilize the result.

Please note that in the script referenced above, the handler is Waffles and not OnPostWafflesAsync, related

References:

https://learn.microsoft.com/en-us/aspnet/core/razor-pages/?tabs=visual-studio&view=aspnetcore-6.0#multiple-handlers-per-page

Answer 2

using System.Collections.Generic;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.Antiforgery;
using Microsoft.AspNetCore.Mvc;

namespace MyApp.Pages;

public class ListModel : PageModel
{
    private readonly IAntiforgery _antiForgery;

    public AntiforgeryTokenSet AntiForgeryToken {get; private set;}

    public ListModel(
        IAntiforgery antiForgery
    )
    {
        this._antiForgery = antiForgery;
    }

    public async Task OnGet()
    {
        AntiForgeryToken = _antiForgery.GetAndStoreTokens(HttpContext);
    }

    public async Task<JsonResult> OnPostWafflesAsync(bool test)
    {
        System.Console.WriteLine("Test approval result="+test);
        return new JsonResult(new {
            received = true,
            test,
        });
    }
}

<script>
const formData = new FormData();
formData.append('test', false);
fetch(
    `${window.location}?handler=Waffles`,
    {
        method: "POST",
        headers: {
            RequestVerificationToken:`@Model.AntiForgeryToken.RequestToken`,
        },
        body: formData,
});
</script>

In this scenario, we are sending a JsonResult for easier consumption by JavaScript, although the example does not utilize the result.

Please note that in the script referenced above, the handler is Waffles and not OnPostWafflesAsync, related

References:

https://learn.microsoft.com/en-us/aspnet/core/razor-pages/?tabs=visual-studio&view=aspnetcore-6.0#multiple-handlers-per-page

Implement an Ajax handler in your Razor page

Answer №1

Similar questions

Challenges in Producing a Dynamic Table from a Pre-existing Table

Challenges faced during the implementation of a personalized transport system in Sentry

Is there a way to stop a setTimeout function in React before it is triggered?

combine array elements with corresponding timestamps

Identify when objects in kineticJS are dropped

Effective File Matching: How to Target Specific File Extensions While Excluding Others

Deliver JSX components that match one or more keys in the array of strings

javascript code to sort an array of objects within a nested array

changing up the format of nested blockquotes

Ways to access a conditional rendered ref element in Vue using v-if

Is there a way I can incorporate v-for with a computed variable?

Set a variable to a specific cell within a table

Obtaining numerous values through PHP with the help of jQuery and Ajax

Adding a CSS class dynamically to a table cell in the backend using Vb.net

What is the correct way to define a variable in Jade?

JQuery validation for phone number format 01x-xxxxxxxx

Looking to pre-load an image before making a getJson call?

Having issues with Bootstrap affix functionality malfunctioning

What is the best location to store common utility functions that will be utilized by various Vue.js components?

The action of Array.splice unexpectedly changes numerous values, despite being designed to replace just one