Razor Page how to give condition to checkbox values?

Question

I'm learning Razor Pages and building a project but stuck somewhere. Simply, I want user to select only 2 sports form checkboxes. There are total 4 sport checkbox and must be selected only 2 of them or program should give error.

I have a Student table that has FirstBranch and SecondBranch.Selected 2 checkboxes should go there.

Here is my Register.cshtml file (front-side)

@page  
@using StudentRegisterProject.Web.Model  
@model StudentRegisterProject.Web.Pages.Student.RegisterModel  
@{  
}  
  
<h1>Sport Registration Form</h1>  
<hr />  
  
<div class="container">  
    <form method="post">  
        <div class="mb-3">  
            <label for="name" class="form-label">Name</label>  
            <input type="text" class="form-control" id="name">  
        </div>  
        <div class="mb-3">  
            <label for="email" class="form-label">E-Mail</label>  
            <input type="email" class="form-control" id="email">  
        </div>  
  
        <div class="form-check mb-2">  
            <input class="form-check-input" type="checkbox" asp-for="Branches.Football">  
            <label class="form-check-label">  
                Football  
            </label>  
        </div>  
        <div class="form-check mb-2">  
            <input class="form-check-input" type="checkbox" asp-for="Branches.Basketball">  
            <label class="form-check-label">  
                Basketball  
            </label>  
        </div>  
        <div class="form-check mb-2">  
            <input class="form-check-input" type="checkbox" asp-for="Branches.Volleyball">  
            <label class="form-check-label">  
                Volleyball  
            </label>  
        </div>  
        <div class="form-check mb-2">  
            <input class="form-check-input" type="checkbox" asp-for="Branches.Tennis">  
            <label class="form-check-label">  
                Tennis  
            </label>  
        </div>  
                 
        <button type="submit" class="btn btn-primary">Submit</button>  
    </form>  
</div>  

And this is the Register.cshtml.cs file (model file)

using Microsoft.AspNetCore.Mvc;  
using Microsoft.AspNetCore.Mvc.RazorPages;  
using Microsoft.AspNetCore.Mvc.Rendering;  
using StudentRegisterProject.Web.Data;  
using StudentRegisterProject.Web.Model;  
  
  
namespace StudentRegisterProject.Web.Pages.Student  
{  
    [BindProperties]  
    public class RegisterModel : PageModel  
    {         
        private readonly StudentDbContext _studentDbContext;  
  
        public RegisterModel(StudentDbContext studentDbContext)  
        {  
            _studentDbContext = studentDbContext;  
        }  
  
        public Model.Student Student { get; set; }  
  
        public Branch Branches { get; set; }  
  
        public void OnGet()  
        {  
              
        }  
  
        public void OnPost()  
        {  
              
        }  
    }  

I got the values in Branches property but need to give condition to them and can't use it.
And also my Student.cs model file in database

namespace StudentRegisterProject.Web.Model  
{  
    public class Student  
    {  
        public Guid Id { get; set; }  
        public string Name { get; set; }  
        public string Email { get; set; }  
        public string FirstBranch { get; set; }  
        public string SecondBranch { get; set; }  
    }  
}  

And this is Branch.cs file

namespace StudentRegisterProject.Web.Model  
{  
    public class Branch  
    {  
        public string Football { get; set; }  
        public string Basketball { get; set; }  
        public string Tennis { get; set; }  
        public string Volleyball { get; set; }  
    }  
}  

I don't know my approach is wrong or not? I hold the true/false values from checkboxes in Braches property but don't know how to give condition to them like if Branches.Football is true, Student.FirstBranch = "Football".

Answer 1

Hi @Ozan Başkaya ,

From your description, the Branch model will list the available branches, I think it is better use Enum or a List of Object to display the Branches.

You can change the Branch Model as below:

public class Branch  
{  
    public string BranchName { get; set; }   
}  

In the Register.cshtml.cs file, you can add the initial data like this: Or in the OnGet method, you can query the database and get the Branches. View the page code:

Then, in the Register.cshtml page, you can use the foreach statement to loop and display the Branches: View the Page code:

The result as below: I use JS to select only one item in the group and disable the same item in another group.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Dillion

Answer 2

Hi @Ozan Başkaya ,

Can you also show me the solution on back-end side? The user should select more than 2 checkboxes but after the submit button, OnPost method should give error.How can I do that?

To only use the back-end code to validate the selected value, you can modify the code as below:

1. Remove the JS code
2. In the Student model, use a List<string> to store the FirstBranch and SecondBranch:

      public class Student  
      {  
           public Guid Id { get; set; }  
           public string Name { get; set; }  
           public string Email { get; set; }  
   
           //use list<stirng> to store multiple selected values  
           public List<string> FirstBranch { get; set; }  
           public List<string> SecondBranch { get; set; }  
       }  
   

3. Change the Register.cshtml.cs code as below: add if statement to validate the value, then use a ViewData to return the validate message to the Register.cshtml page. View the source code.
4. In Register.cshtml page, use an if statement to display the validate message.

The output as below:

Best regards,
Dillion

Answer 3

Mastering the intricacies of Razor Pages, especially understanding how to give conditions to checkbox values, is crucial for website developers. It's these nuanced details that make a website dynamic and user-friendly. Incorporating conditional logic into checkboxes can significantly enhance user experience, ensuring that the website responds intuitively to user input. Learning these skills not only refines web development abilities but also elevates the quality of the websites we create. Here's to mastering Razor Pages and crafting seamless, responsive websites for all users