Search results

Getting Started

This section briefly explains about how to create a simple CheckBox in your ASP.NET Core application. You can refer ASP.NET Core Getting Started documentation page for introduction part of the system requirements and configure the common specifications.

Add CheckBox to the project

To create simple CheckBox add the ejs-checkbox tag with id attribute as element in your Index.cshtml page.

tagHelper
default.cs
<ejs-checkbox id="default" label="Default"></ejs-checkbox>
public IActionResult Default()
    {
            return View();
    }

Output be like the below.

CheckBox Sample

Run the application

After successful compilation of your application, simply press F5 to run the application.

The following example shows a default rendering of CheckBox.

tagHelper
default.cs
<ejs-checkbox id="default" label="Default"></ejs-checkbox>
public IActionResult Default()
    {
            return View();
    }

Change the CheckBox state

The Essential JS 2 CheckBox contains 3 different states visually, they are:

  • Checked
  • Unchecked
  • Indeterminate

The CheckBox checked property is used to handle the checked and unchecked state. In checked state a tick mark will be added to the visualization of CheckBox.

Indeterminate

The CheckBox indeterminate state can be set through indeterminate property. CheckBox indeterminate state masks the real value of CheckBox visually. The Checkbox cannot be changed to indeterminate state through the user interface, this state can be achieved only through the property.

tagHelper
state.cs
@section ControlsSection{
    <ejs-checkbox id="checked" checked="true" label="Checked State"></ejs-checkbox>
    <ejs-checkbox id="unchecked" label="Unchecked State"></ejs-checkbox>
    <ejs-checkbox id="indeterminate" indeterminate="true" label="Intermediate State"></ejs-checkbox>
}

<style>

.e-checkbox-wrapper {
  margin-top: 18px;
}

li {
  list-style: none;
}

</style>
public IActionResult State()
    {
            return View();
    }