(C# ASP.NET Core) How to handle a click event in Razor Pages

What generates a click event?

A click on an anchor link generates an HTTP GET request that is often used for requesting/navigating to a new page. We have studied this in the previous chapters where we used an anchor tag helper to navigate to the login and register pages. But this is not the subject matter of this tutorial.

As in classic ASP.NET, an anchor link formed with a tag helper can also be used to generate a click event that can be handled by a C# function in the backing class of its razor page. This is the topic of interest now.

Please note that an anchor can be made to behave as a submit button to POST a FORM data by using javascript - but this also is not the point of discussion today.

Video Explanation

Please watch the following youtube video:

Steps to attach a click handler

First set the attribute asp-page-handler to the name of the function that handles the click event.

// razor page index.cshtml 


// handler name MUST be in pascal notation 
// i.e., start with uppercase and camelized 

<a asp-page="Index" asp-page-handler="MyOnClick">

  Click Me

</a>

Next define the handler in the backing class. ASP.NET Core requires that the handler be prefixed with the type of the request. So, if the request is an HTTP GET request, then the name of the handler will be OnGetMyOnClick

public class IndexModel : PageModel
{


  // the click event handler 
  // MUST be prefixed with OnGet if the 
  // request is of HTTP GET type 
  public void OnGetMyOnClick()
  {

    // code goes here 
  }

  // -- other parts of the class 
}

Purpose of this walkthrough

We shall show an anchor link to the user.

The anchor will be connected to a handler called "OnClick" on the backing class.

When the user clicks the anchor link, a server side C# code will execute through the "OnClick" method, and set a message to be shown to the user.

Step 1 of 3: Add a Razor Page called Index

Create a simple ASP.NET Core project and add a razor page called Index.

You will get two files - Index.cshtml and Index.cshtml.cs.

NOTE: The middleware must be configured to serve razor pages as explained in the starting tutorial - (C# ASP.NET Core) Beginner's Introduction to Razor Pages

Step 2 of 3: Complete the backing class

The name of the handler of the click event is OnClick, but ASP.NET Core requires that it must be prefixed with OnGet because the request will be an HTTP GET request. Secondly, the name of the handler must start with an upper-case letter, and the handler must be in camel notation.

Additionally, we have to show some message on the Index razor page.

For this a public property is declared and set in the backing class. This property is then read and displayed on the razor page. In the code below you can see that the property has been named as Message and it is set in the "OnGetOnClick" function.

using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MyRazorApp.Pages
{

  public class IndexModel : PageModel
  {

    // some message to be shown on the page 
    public string Message { get; set; }

    // the click event handler 
    // MUST be prefixed with OnGet if the 
    // request is of HTTP GET type 
    public void OnGetOnClick()
    {

      Message = "Hello";

    }

  }

}

Step 3 of 3: Complete the Index.cshtml Razor Page

The razor page is completed as shown. The property Message is displayed with the razor syntax @Model.Message. Please note that inside a razor page Model represents an instance of the backing class.

@page "{handler?}"

@model MyRazorApp.Pages.IndexModel

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

// handler name MUST be in pascal notation 
// i.e., start with uppercase and camelize 

<a asp-page="Index" asp-page-handler="OnClick">
  Click Me
</a>

<div>

  // some message from the server 
  // after the click is handled 
  @Model.Message

</div>

Run the project to verify that it works as expected.