Ajax based POST of a Razor Page in ASP.NET Core 5

How to POST an ASP.NET Core 5 Razor Page through an Ajax Request. We discuss a practical approach that is to-the-point and easy to understand. The given code is ready to copy-paste!

Categories | About |     |  


First create an ASP.NET Core 5 project using the empty template. An empty template will add just the required files. So it will be easier to work with and easier to understand also.

Step 1 of 3: Configure the Startup.cs File

Configure the Startup.cs file to add support for razor pages.

using Microsoft.AspNetCore.Builder;

using Microsoft.AspNetCore.Hosting;

using Microsoft.Extensions.DependencyInjection;

using Microsoft.Extensions.Hosting;

namespace AjaxForm

  public class Startup

    public void ConfigureServices(IServiceCollection services)

      // add support for razor pages 


    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)

      if (env.IsDevelopment())




      // set razor pages as the 
      // terminal middleware 
      app.UseEndpoints(endpoints =>






don't have time? Watch this Video Explanation
[Steps 2, 3 continue after this video]

Please watch, write your comments and discussion on the following youtube video:

Step 2 of 3: Add a razor page called Index

Next add a folder called "Pages" to the project and right click it to add a new razor page called Index. For details and the images please refer the linked video below.

Write this markup in the index.cshtml razor page -


@model AjaxForm.Pages.IndexModel

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<h1>Ajax Form</h1>

<span id="pw" style="color:red"></span>

<form method="post">


        <label asp-for="Name"></label>
        <input asp-for="Name" />

      <td colspan="2" style="text-align:right">

        <input type="submit" />




<script type="text/javascript">

  (function () {

    // only one form - select it! 
    const form = document.forms[0];

    // attach onsubmit 
    form.addEventListener("submit", async function (event)


      // show please wait, a gif can be used instead 
      pw.innerHTML = "please wait...";

      // aysnchronous fetch ajax 
          method: form.method,

          body: new FormData(form)
        // if any exceptions - log them 
        .catch(err => console.log("network error: " + err))

        .then(response => {

          // read json from the response stream 
          // and display the data 
          response.json().then(data => { pw.innerHTML = data });




The above markup creates a simple form with just one html5 input text bound to a property called Name. We have used asp.net tag helpers for creating this form.

Ajax communication is being executed with the help of fetch method of javascript. I have found it to be very simple to use.

Step 3 of 3: The Index.cshtml.cs backing class

Open the file index.cshtml.cs and write this code in the IndexModel backing class:

IMPORTANT NOTE: The return type of the OnPost method MUST be Task<JsonResult>, otherwise it will NOT receive the Ajax call!
using Microsoft.AspNetCore.Mvc;

using Microsoft.AspNetCore.Mvc.RazorPages;

using System.ComponentModel.DataAnnotations;

using System.Threading.Tasks;

namespace AjaxForm.Pages

  public class IndexModel : PageModel

    public string Name { get; set; }

    // OnPost return type is JsonResult 
    public async Task<JsonResult> OnPost()

      // artifical delay 
      await Task.Delay(500);

      if (!ModelState.IsValid)

        return new JsonResult("JSONResponse: Error occurred. Please retry.");


      return new JsonResult("JSONResponse: (OK) " + Name);




Run the project to see that the form gets posted as an Ajax call. It shows a "please wait" message and echoes back the data that was posted.

This Blog Post/Article "Ajax based POST of a Razor Page in ASP.NET Core 5" by Parveen is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.