Checkbox List

The <checkbox-list> tag helper is a wrapper for checkbox input elements. For a correct rendering it is necessary to embedding all checkboxes into a checkbox list.

Mecons Checkbox List

<checkbox-list bc-label="Default Checkboxes">
    <input type="checkbox" bc-label="Default" />
    <input type="checkbox" bc-label="Disabled" disabled />
    <input type="checkbox" bc-label="Checked" checked />
</checkbox-list>

Configuration

Inline

Checkboxes can rendered on the same horizontal row by adding the bc-inline attribute to the list wrapper.

Inline Checkbox List

<checkbox-list bc-inline="true">
    ...
</checkbox-list>

Label

To set an label for the list of checkboxes use the bc-label attribute.

Checkbox List Label

<checkbox-list bc-label="Default Checkboxes">
    ...
</checkbox-list>

Help

To set a help text for a list of checkboxes use the bc-help attribute.

Checkbox List Help

<checkbox-list bc-label="Inline Checkboxes" bc-help="Some help text goes here" bc-inline="true">
    ...
</checkbox-list>

Items

To bind a list of items to a Checkbox List use the bc-items attribute. This attribute accepts an object of List<SelectListItem>.

Checkbox List Items

<!-- VIEW -->
@model BSolutions.Mecons.Test.Models.DataBindingViewModel

<checkbox-list bc-label="Equipment" bc-items="Model.Equipments"></checkbox-list>

// VIEW MODEL
public class DataBindingViewModel
{
    public List<SelectListItem> Equipments { get; set; } = new List<SelectListItem>();

    public DataBindingViewModel()
    {
        this.Equipments.Add(new SelectListItem { Value = "0", Text = "Laptop" });
        this.Equipments.Add(new SelectListItem { Value = "1", Text = "Smartphone" });
        this.Equipments.Add(new SelectListItem { Value = "2", Text = "PC" });
    }
}

Data Binding

Model binding in ASP.NET Core MVC maps data from HTTP requests to action method parameters. With asp-for attribute of the Checkbox List it is possible to bind checked options to a model parameter.

<!-- VIEW -->
@model BSolutions.Mecons.Test.Models.DataBindingViewModel

<checkbox-list asp-for="Equipment" bc-items="Model.Equipments"></checkbox-list>

// VIEW MODEL
public class DataBindingViewModel
{
    // Selected Equipment
    [Display(Name = "Equipment")]
    public List<string> Equipment { get; set; }

    // Available Equipment
    public List<SelectListItem> Equipments { get; set; } = new List<SelectListItem>();
}

// CONTROLLER
public IActionResult DataBinding()
{
    var model = new DataBindingViewModel();
    model.Equipments.Add(new SelectListItem { Value = "0", Text = "Laptop" });
    model.Equipments.Add(new SelectListItem { Value = "1", Text = "Smartphone" });
    model.Equipments.Add(new SelectListItem { Value = "2", Text = "PC" });

    return View(model);
}

[HttpPost]
public IActionResult DataBinding(DataBindingViewModel model)
{
    foreach(var equipment in model.Equipment)
    {
        // Do something with selected equipment
    }
}