In this article I will explain with an example, how to implement CheckBox changed event in ASP.Net Core (.Net Core 8) Razor Pages.
Note: For beginners in ASP.Net Core (.Net Core 8) Razor Pages, please refer my article ASP.Net Core 8 Razor Pages: Hello World Tutorial with Sample Program example.
 
 

Model

The Model class consists of the following property.
public class PersonModel
{
    [Display(Name = "Do you have Passport?")]
    public bool HasPassport { get; set; }
}
 
 

Index PageModel (Code-Behind)

The PageModel consists of following Handler method.

Handler method for handling GET operation

This Handler method left empty as it is not required.
 

Handler method for handling POST operation

Inside this Handler method, the HasPassport property is verified and based on whether CheckBox is checked or unchecked, its value is true or false respectively.
public class IndexModel : PageModel
{
    public PersonModel Person { get; set; }
 
    public void OnGet()
    {
    }
 
    public void OnPostSubmit(PersonModel person)
    {
        if (person.HasPassport)
        {
 
        }
    }
}
 
 

Razor Page (HTML)

HTML Markup

Inside the Razor Page, the ASP.Net TagHelpers is inherited.
method – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
 
The Razor Page consists of a HTML Table, which consists of input CheckBox, Submit Button and a Label.
The input CheckBox has been assigned with asp-for Tag Helper attribute and its value is set with the HasPassport property. Thus, this signifies that the checked value of the CheckBox will be set in this property.
Then Label has been assigned with asp-for Tag Helper attribute and here also its value is set with the HasPassport property which signifies that it is used for displaying the Model property name.
Here, the Submit Button is hidden as it will be used to Submit the Form when the CheckBox is checked or unchecked.
Finally, CheckBox has been assigned with an onchange event handler, and when the CheckBox is checked or unchecked, a JavaScript function OnPassportChanged which references the Button and clicks it which in turn submits the Form and calls the Controller’s Action method.
@page
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@model CheckBox_Changed_Core_Razor.Pages.IndexModel
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <form method="post">
        <table>
            <tr>
                <td><input asp-for="Person.HasPassport" type="checkbox" onchange="OnPassportChanged()" /></td>
                <td><label asp-for="Person.HasPassport"></label></td>
            </tr>
        </table>
        <input type="submit" id="btnSubmit" asp-page-handler="Submit" style="display:none" />
    </form>
    <script type="text/javascript">
        function OnPassportChanged() {
            document.getElementById("btnSubmit").click();
        };
    </script>
</body>
</html>
 
 

Screenshots

The Form

CheckBox Check Changed event in ASP.Net Core Razor Pages
 

Values captured in Controller when Form is submitted

CheckBox Check Changed event in ASP.Net Core Razor Pages
 

Values captured in Controller when Form is unchecked

CheckBox Check Changed event in ASP.Net Core Razor Pages
 
 

Downloads

Download Code