BLAZOR PLAYGROUND SERIES PART 5- How to Create Checkbox in Blazor

In part, we are going to learn how to create a checkbox with a blazor.

If you are new to Blazor then you must see

• PART 1 :- What is Blazor
• PART 2 :- How To Create Blazor Server Application
• PART 3 :- How To Create DropdownList in Blazor
• PART 4 :- How To Create Radio Buttons in Blazor

Here we have Already Created an Application with the name BlazorPlayGround1.

Complete Source Code on Github

Below is a Snapshot of the Application that we have created

Adding ViewModel Folder

Adding the ViewModel folder to the project.

Adding ViewModel

Adding ViewModel with the class name CheckboxViewModel , which will have bool property in it.

namespace BlazorPlayGround1.ViewModel
{
    public class CheckboxViewModel
    {
        public bool Status { get; set; }
    }
}

Next, the step we are going to add Component.

Adding Component

We are going to add a Component with the name CheckboxComponent.razor.

Adding Base Class for CheckboxComponent Component

We will add a class with the name CheckboxComponentBase, and then we will inherit it with ComponentBase.

Next, we are going to add the CheckboxViewModel property in the CheckboxComponentBase component.

using BlazorPlayGround1.ViewModel;
using Microsoft.AspNetCore.Components;

namespace BlazorPlayGround1.Pages
{
    public class CheckboxComponentBase : ComponentBase
    {
        protected CheckboxViewModel CheckboxViewModel { get; set; } = new CheckboxViewModel();
    }
}

After adding in the Next step, we will set the checkbox property in the OnInitialized method.

INITIALIZING STATUS IN ONINITIALIZED METHOD

using BlazorPlayGround1.ViewModel;
using Microsoft.AspNetCore.Components;

namespace BlazorPlayGround1.Pages
{
    public class CheckboxComponentBase : ComponentBase
    {
        public CheckboxViewModel CheckboxViewModel { get; set; } = new CheckboxViewModel();
        protected override void OnInitialized()
        {
            CheckboxViewModel.Status = true;
        }
        protected async void FormSubmitted()
        {
        }
    }
}

SETTING UP CHECKBOXCOMPONENT.RAZOR PAGE  

In this part, we will work on CheckboxComponent.razor page, which we have added earlier.

1. Going to add the @page Razor directive and specify the route for Component (CheckboxExample)
2. Adding @inherits directive and set base class for Component (CheckboxComponentBase).
3. Adding Edit form which Renders a form element and set Model and OnValidSubmit Properties of it.
4. Adding InputCheckbox and setting @bind-Value=” CheckboxViewModel.Status“.
5. At last, we will show the label based on the checkbox selected value CheckboxViewModel.Status.

CHECKBOXCOMPONENT.RAZOR PAGE

@page "/CheckboxExample"
@inherits CheckboxComponentBase

<EditForm Model="@CheckboxViewModel" OnValidSubmit="@FormSubmitted">
    <div class="card">
        <div class="card-header">
            <h5 class="card-title">Checkbox</h5>
        </div>
        <div class="card-body">
            <div class="form-group col-md-4">
                <label for="Status">Status: </label>
                <InputCheckbox @bind-Value="CheckboxViewModel.Status" />
            </div>
        </div>
        <div class="card-footer">
            @if (CheckboxViewModel.Status)
            {
                <label> Selected Value :- </label>   <label>True</label>
            }
            else
            {
                <label> Selected Value :- </label>   <label>False</label>
            }
        </div>
    </div>
</EditForm>