(C# ASP.NET Core) CRUD with a Checkbox in a Razor Form

Objective of this Tutorial

This tutorial adds a check-box to the form of one text-box that we completed in the previous tutorial (C# ASP.NET Core) Editing Records on the same Razor Page with EF Core

Step 1 of 3: Modify the Model

A checkbox binds to a boolean true/false type of property.

Add a boolean field to your model class. Nothing else needs to be changed.

public class Product
{

  // auto-increment Primary ID key 
  [Key]
  [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
  public int ID { get; set; }

  // binds to a textbox 
  public String Name { get; set; }

  // ADD THIS NOW: a checkbox boolean 
  public bool IsActive { get; set; }
}

Video Explanation with a Working Example

Please watch the following youtube video:

Step 2 of 3: How does the Database Modify?

We already know that DbContext automatically creates your database on the basis of your model. Please refer this for a complete explanation: (C# ASP.NET Core) Getting Started with Database INSERT of Form data

But what if a database already exists?

Option 1: If it is a simple project, or if it is possible easily, then the best option is to allow your DbContext to create a new, empty database on the basis of the modified model, and then copy your existing data into your new database.

Option 2: But if the project is too large, then EF Migrations have to be done, and I suggest that the migrations be done using a program written separately. This is beyond the scope of this tutorial.

Step 3 of 3: Modify the Razor FORM

Add an input tag helper for the boolean property. Notice that the tag helper automatically generates a checkbox on the basis of the data-type of the boolean property.

@page "{handler?}/{id?}"

@model Modular.Pages.IndexModel

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<form method="post">

  Name: <input asp-for="Prod.Name" />

  <input asp-for="Prod.ID" type="hidden" />

  <br />

   // ADD THIS NOW: checkbox is deduced 
   // on the basis of the boolean data-type 
  <label asp-for="Prod.IsActive">Active</label>
  <input asp-for="Prod.IsActive" />

  <br />

  <input type="submit" />

</form>

<h1>Display of Data</h1>

@foreach (var prod in Model.Products)
{
  <div>
    @prod.Name, @(prod.IsActive ? "Active" : "InActive")
    |
    <a asp-route-id="@prod.ID"
       asp-page-handler="Delete">Delete</a>
    |
    <a asp-route-id="@prod.ID"
       asp-page-handler="Edit">Edit</a>
  </div>

  <hr />
}

WHY WAS IT SO SIMPLE?

Ans: Right from the creation of database till the CRUD operations, the EF Core framework works on the basis of your model. You just have to add a property to your model + a corresponding input tag helper to your form, and make no changes elsewhere. In simple words: The property travels everywhere with the model.