Click here to Skip to main content
15,670,350 members
Articles / Web Development / Blazor
Posted 6 Jun 2021


2 bookmarked

Blazor Confirmation Checkbox Component

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
6 Jun 2021CPOL2 min read
Custom component to handle checkbox after confirmation modal popup
This article shows how to build a custom Custom component to handle checkbox after confirmation modal popup using .NET Blazor.


In one of my assignments where we were using, few of the forms had input control as checkbox. As per the requirement, it was difficult to handle the checkbox value after the change event using InputCheckBox component in EditForm or <\input type="checkbox" />. Listed below is some of the logic which restricted using the default component:

  1. Revert the value of checkbox after the click of confirmation modal popup
  2. Handle the above functionality with minimal code handling

To achieve the above functionality, it was required to create a custom component which will handle the checkbox single handedly and avoid code duplication. The component uses third party package, i.e., Blazored Modal which is freely available Nuget package manager. Detailed configuration provided on their site can be reference to integrate the same in application. This can be replaced as per the usage in the application.

Below is the code for the same along with the explanation of how to use it in different scenarios.

Using the Code

The code works like a simple plugin by just configuring the component and using it in the application. Below is the code for the same.


Add service reference to blazored modal. Blazored modal related configuration.



Wrap the router tag with CascadingBlazoredModal. Blazored modal related configuration.

<Router AppAssembly="@typeof(Program).Assembly">


Provide reference to Blazored Modal script and style sheet. Blazored modal related configuration.

<link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
<script src="_content/Blazored.Modal/blazored.modal.js"></script>


Create a razor component as per the below code at a shared UI folder of the project. For example, BlazorApp/Pages/Component.

<div class="@Class">
    <input class="checkbox" type="checkbox" id="@Id"
            <label for="@Id"><span></span></label>


Create a razor.cs class same as above in the same folder as that of razor component. The below code acts as a backend code for the razor page created.

#region System References
using System;
using System.Threading.Tasks;
#region BlazorApp Reference
using BlazorApp.Pages.Modal;
using Blazored.Modal;
using Blazored.Modal.Services;
#region Microsoft References
using Microsoft.AspNetCore.Components;
namespace BlazorApp.Pages.Components
    public partial class ConfirmationCheckBox
        #region Parameter
        // Parameter for div that wraps the input checkbox
        [Parameter] public string Class {get;set;}
        // Parameter for Checkbox name
        [Parameter] public string Name {get;set;}
        // Parameter to defined message on popup when checkbox is checked
        [Parameter] public string PopupMessageForTrue {get;set;}
        // Parameter to defined message on popup when checkbox is unchecked
        [Parameter] public string PopupMessageForFalse {get;set;}
        // Parameter to defined event call back on Popup button action
        [Parameter] public EventCallback<bool> OnPopupClicked {get;set;}
        // Parameter to make the checkbox readonly
         [Parameter] public bool ReadOnly {get;set;}
        // Parameter to define id of the checkbox
        [Parameter] public string Id {get;set;}
        // Parameter to bind the value of checkbox
        [Parameter] public bool? Value{
                if(_value==value) return;

        // Parameter to handle two way binding
        [Parameter] public EventCallback<bool?> ValueChanged {get;set;}
        #region Inject
        [Inject] IModalService Modal {get;set;}
        bool? _value;
        string Message;
        #region  Protected Method
        protected override void OnInitialized(){
        #region  Private Method
        /// <summary>
        /// Method to change the Check box change event
        /// </summary>
        /// <param name="args">ChangeEventArgs</param>
        /// <returns></returns>
        private async Task OnChecked(ChangeEventArgs args){
            bool argsValue=Convert.ToBoolean(args.Value);

            Message= !argsValue ? PopupMessageForTrue : PopupMessageForFalse;
            Message = string.IsNullOrEmpty(Message) ? "Are you sure ?" : Message;

            var options= new ModalOptions() 
            ModalParameters parameter = new ModalParameters();
            parameter.Add("Body", Message);

            var formModal = Modal.Show<ConfirmationModal>("Confirm", parameter,options);
            var result= await formModal.Result;

                    await ValueChanged.InvokeAsync(argsValue);
                    await ValueChanged.InvokeAsync(!argsValue);
                await OnPopupClicked.InvokeAsync(Convert.ToBoolean(result.Data));

Below is the description of each and every variable and function:

Component Attribute Description
Value The model property to be passed
Name Name aligned to the checkbox component
ValueChanged Event call back which sets the model property on change of the value. Helps in two way binding
Id id attribute of the component to be set
Class class attribute of div that wraps the input checkbox
ReadOnly disable attribute to be set, i.e., disabled if true else enabled
PopupMessageForTrue Message to be displayed on modal popup if checkbox is checked
PopupMessageForFalse Message to be displayed on modal popup if checkbox is un-checked


Method Description
OnInitializedAsync Method to be executed on initialization of the component
OnChecked Method to be called on checkbox check of the input field

How to Use?

Below is the set of sample code that shows how to use the above component using two way binding.


Below is the sample code that displays how to use the able component.

@page "/ConfirmationCheckBox"
<div class="container">
    <div class="col-12">
        <div class="row">
            <div class="form-group">
                    PopupMessageForTrue="Are You sure ? It is checked."
                    PopupMessageForFalse="Are You sure ? It is unchecked." />
            <div class="row">
              <p>CheckBoxValue : @CheckBoxValue</p>
            <div class="row">
              <p>Popup Value : @PopupValue</p>
        private bool? CheckBoxValue{get;set;}
        private bool? PopupValue {get;set;}

        /// <summary>
        /// Method to be invoked on popup action by ConfirmationCheckBox component
        /// </summary>
        /// <param name="value">bool</param>
        /// <returns></returns>
        private void PopupClicked(bool value){

The sample code is available on GitHub.

If any of the readers have an improved and better workflow for the above requirement, I would like to add the same to my knowledge.



  • 6th June, 2021: Initial version


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

-- There are no messages in this forum --