In this article I will explain with an example, how to send AntiForgeryToken with AJAX requests in ASP.Net Core Razor Pages.
The AntiForgeryToken is used to prevent cross-site request forgery (CSRF) attacks and this article will illustrate how to configure and use the AntiForgeryToken during jQuery AJAX POST call in ASP.Net Core Razor Pages.
Note: For beginners in ASP.Net Core Razor Pages, please refer my article ASP.Net Core Razor Pages: Hello World Tutorial with Sample Program example.
 
 
Configuring the Anti-Forgery Token and JSON Serializer setting
The first step is to configure the Anti-Forgery Token and JSON Serializer settings in the Startup.cs file.
1. Open the Startup.cs class from the Solution Explorer window.
Sending AntiForgeryToken with AJAX requests in ASP.Net Core Razor Pages
 
2. Add the following namespaces.
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json.Serialization;
 
3. Then inside the ConfigureServices method, you will have to add the following code which will instruct the program to:
1. Add MVC Services for Razor Pages.
2. Use Newtonsoft JSON for serialization.
3. Add Anti-Forgery Token with specific name to the Form.
public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc()
            .SetCompatibilityVersion(CompatibilityVersion.Version_2_1)
            .AddJsonOptions(options => options.SerializerSettings.ContractResolver = new DefaultContractResolver());
    services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");
}
 
 
Model
Following is a Model class named PersonModel with two properties i.e. Name and DateTime.
public class PersonModel
{
    ///<summary>
    /// Gets or sets Name.
    ///</summary>
    public string Name { get; set; }
 
    ///<summary>
    /// Gets or sets DateTime.
    ///</summary>
    public string DateTime { get; set; }
}
 
 
Razor PageModel (Code-Behind)
The PageModel consists of two Action Handler methods.
Handler method for handling GET operation
This Handler method handles the GET calls, for this particular example it is not required and hence left empty.
 
Handler method for handling jQuery AJAX operation
This Handler method handles the call made from the jQuery AJAX function from the View.
Attributes
ValidateAntiForgeryToken: The ValidateAntiForgeryToken attribute is used to prevent cross-site request forgery attacks.
Note: A cross-site request forgery is an attack is done by sending harmful script element, malicious command, or code from the user’s browser.
 
The value of the name parameter is assigned to the Name property of the PersonModel object along with the Current DateTime and finally the PersonModel object is returned back as JSON to the jQuery AJAX function.
Note: The following Handler method handles AJAX calls and hence the return type is set to JsonResult.
 
public class IndexModel : PageModel
{
    public void OnGet()
    {
    }
 
    [ValidateAntiForgeryToken]
    public IActionResult OnPostGetTime(string name)
    {
        PersonModel person = new PersonModel
        {
            Name = name,
            DateTime = DateTime.Now.ToString()
        };
        return new JsonResult(person);
    }
}
 
 
Razor Page (HTML)
The HTML of Razor Page consists of an HTML TextBox element and a Button.
The Button has been assigned a jQuery click event handler and when the Button is clicked a jQuery AJAX called is made to the Controller’s action method.
The Anti-Forgery Token has been added to the Razor Page using the AntiForgeryToken function of the HTML Helper class.
The URL for the jQuery AJAX call is set to the Handler method of the Razor PageModel i.e. /Index?handler=GetTime.
Note: In the Razor PageModel, the Handler method name is OnPostGetTime but here it will be specified as GetTime when calling from the Razor HTML Page.
 
The value of the Anti-Forgery Token is read from the Hidden Field and passed as Request Header in the jQuery AJAX call.
Note: Without passing Anti-Forgery Token, the AJAX call to the Handler method of the Razor PageModel will not work.
 
The value of the TextBox is passed as parameter and the returned response is displayed using JavaScript Alert Message Box.
@page
@model Razor_jQuery_AJAX.Pages.IndexModel
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    @Html.AntiForgeryToken()
    <input type="text" id="txtName" />
    <input type="button" id="btnGet" value="Get Current Time" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnGet").click(function () {
                $.ajax({
                    type: "POST",
                    url: "/Index?handler=GetTime",
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader("XSRF-TOKEN",
                            $('input:hidden[name="__RequestVerificationToken"]').val());
                    },
                    data: { "name": $("#txtName").val() },
                    success: function (response) {
                        alert("Hello: " + response.Name + " .\nCurrent Date and Time: " + response.DateTime);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    },
                    error: function (response) {
                        alert(response.responseText);
                    }
                });
            });
        });
    </script>
</body>
</html>
 
 
Screenshot
Sending AntiForgeryToken with AJAX requests in ASP.Net Core Razor Pages
 
 
Downloads
Download Code