EasyCheckBoxList 1.0.0

EasyCheckBoxList

EasyCheckBoxList is an ASP.NET Core Tag Helper that transforms standard checkbox collections into a modern, user-friendly dropdown with multi-selection support.

Features

• Multi-select checkbox dropdown
• ASP.NET Core MVC support
• Razor Pages support
• Bootstrap-friendly appearance
• Built-in CSS support
• Built-in JavaScript support
• Optional custom CSS
• Optional custom JavaScript
• Preselected values
• Custom text and value fields
• Additional information column
• Validation support
• Easy integration using asp-items

Installation

Package Manager

Install-Package EasyCheckBoxList

.NET CLI

dotnet add package EasyCheckBoxList

Example Code and Model

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace WebPortal10.Pages
{
    public class PrModel : PageModel
    {
        public PrModel()
        {

        }

        [BindProperty]
        public TestModel testModels { get; set; } = new();


        public async Task OnGetAsync()
        {
            var list1 = new List<TestModel1>();
            list1.Add(new TestModel1 { Name_1 = "Marco", Value_1 = "1000", Info_1 = "i1", Checked_1 = false });
            list1.Add(new TestModel1 { Name_1 = "Peter", Value_1 = "2000", Info_1 = "i2", Checked_1 = false });
            list1.Add(new TestModel1 { Name_1 = "John", Value_1 = "3000", Info_1 = "i3", Checked_1 = false });
            list1.Add(new TestModel1 { Name_1 = "Stephan", Value_1 = "4000", Info_1 = "i4", Checked_1 = false });

            var list2 = new List<TestModel2>();
            list2.Add(new TestModel2 { Name_2 = "Ana", Value_2 = "1100", Info_2 = "i-1", Checked_2 = false });
            list2.Add(new TestModel2 { Name_2 = "Sophia", Value_2 = "2200", Info_2 = "i-2", Checked_2 = false });
            list2.Add(new TestModel2 { Name_2 = "Helena", Value_2 = "3300", Info_2 = "i-3", Checked_2 = false });
            list2.Add(new TestModel2 { Name_2 = "Emilia", Value_2 = "4400", Info_2 = "i-4", Checked_2 = false });

            testModels.List1 = list1;
            testModels.List2 = list2;
        }

        public async Task OnPostAsync(string? action)
        {
            var actuel = testModels;
        }

        public class TestModel1
        {
            public string Name_1 { get; set; }
            public string Value_1 { get; set; }
            public string Info_1 { get; set; }
            public bool Checked_1 { get; set; }
        }
        public class TestModel2
        {
            public string Name_2 { get; set; }
            public string Value_2 { get; set; }
            public string Info_2 { get; set; }
            public bool Checked_2 { get; set; }

        }
        public class TestModel
        {
            public List<TestModel1> List1 { get; set; } = new();
            public List<TestModel2> List2 { get; set; } = new();
        }
    }
}

Usage - Multiple EasyCheckBoxList components can be placed on the same page.

@page "/pr"
@model WebPortal10.Pages.PrModel
@using Microsoft.AspNetCore.Mvc.Localization
@addTagHelper *, EasyCheckBoxList
@inject IViewLocalizer L
<style>
 
</style>
<main>
    <form method="post" id="f1">
        <div class="row mx-5 border">
            <div class="col-md-6 p-4">
                <table>
                    <tr>
                        <td style="width:250px">
                            <check-box-combo asp-items="testModels.List1"
                                             add-css="true"
                                             add-javascript="false"
                                             column-name="Name_1"
                                             column-value="Value_1"
                                             column-checked="Checked_1"
                                             column-info="Info_1"
                                             asp-title="Example 1">
                            </check-box-combo>
                        </td>
                        <td style="width:250px">
                            <table style="width:100%">
                                @foreach (var item in Model.testModels.List1)
                                {
                                    <tr>
                                        <td>@item.Name_1</td>
                                        <td>@item.Value_1</td>
                                        <td>@item.Checked_1  </td>
                                        <td>@item.Info_1</td>
                                    </tr>
                                }
                            </table>
                        </td>
                    </tr>

                    <tr>
                        <td style="width:250px; padding-top:40px">
                            <check-box-combo asp-items="testModels.List2"
                                             add-css="false"
                                             add-javascript="false"
                                             column-name="Name_2"
                                             column-value="Value_2"
                                             column-checked="Checked_2"
                                             column-info="Info_2"
                                             asp-title="Example 2">
                            </check-box-combo>
                        </td>
                        <td style="width:250px; padding-top:40px">
                            <table style="width:100%">
                                @foreach (var item in Model.testModels.List2)
                                {
                                    <tr>
                                        <td>@item.Name_2</td>
                                        <td>@item.Value_2</td>
                                        <td>@item.Checked_2</td>
                                        <td>@item.Info_2</td>
                                    </tr>
                                }
                            </table>
                        </td>
                    </tr>

                </table>
            </div>
        </div>
        <div class="row bg-primary-subtle pt-3 align-items-center mx-5 mb-3">
            <button type="submit" class="btn btn-primary me-2 px-3">
                Send
            </button>
        </div>

    </form>
</main>

Available Attributes

Using Custom CSS

Disable built-in CSS:

<check-box-combo asp-items="Model.List1"
                 add-css="false">
</check-box-combo>

Example CSS:

<style>
            [data-easycblist="start"] 
            {
              width:100%;
              position:relative;
            }

            [data-easycblist="container"] 
            {
                border-radius: 4px;
                border: 1px solid #dee2e6;
                min-height: 38px;
                display: flex;
                flex-wrap: wrap;
                gap: 4px;
                cursor: pointer;
                padding: 4px 30px 4px 4px;
                position: relative;
            }

            [data-easycblist="container"]::after
            {
                content: "▼";
                position: absolute;
                right: 10px;
                top: 50%;
                transform: translateY(-50%);
                color: #6c757d;
                font-size: 12px;
                pointer-events: none;
            }

            [data-easycblist="panel"] 
            {
             width:100%; border: 1px solid #dee2e6;
                        position:absolute;
                        top:100%;
                        left:0;
                        z-index:1000;
                    
                        max-height:250px;
                        overflow-y:auto;
            }
            [data-easycblist="start"] table
            {
                width:100%;
            }
            [data-easycblist="start"] table td
            {
                vertical-align: middle;
            }
            [data-easycblist="start"] input[type="checkbox"]
            {
                vertical-align: middle;
            }

            [data-easycblist="start"] table tr td:nth-child(1)
            {
                width:35px;
            }

            [data-easycblist="start"] table tr td:nth-child(3)
            {
                text-align: right;
                width: 40px;
            }

            [data-easycblist="start"] input[type="checkbox"]
            {
                width: 18px;
                height: 18px;
                accent-color: #0d6efd;
                cursor: pointer;
            }

            [data-easycblist="container"] button
            {
                background-color:#000;
                color:#fff;
                position:relative;
                border-radius:4px;
                padding-right:22px;       
            }
        
            [data-easycblist="container"] button::after
            {
               content: "✖";
                position: absolute;
                right: 6px;
                top: 50%;
                transform: translateY(-50%);
                color: #fff;
                font-size: 10px;
                pointer-events: none;
            }
            </style>

Using Custom JavaScript

Disable built-in JavaScript:

<check-box-combo asp-items="Model.List1"
                 add-javascript="false">
</check-box-combo>

Example JavaScript:

<script>
  class CheckDropDown {

    constructor(container) {

        this.container = container;
        this.content = container.querySelector('[data-easycblist="container"]'); 
        this.panel = container.querySelector('[data-easycblist="panel"]');
        this.placeholder = this.content?.dataset.placholder || '';

        this.BindEvents();
        this.Refresh();
    }

    BindEvents() {

        this.container.addEventListener('change', (e) => {
 //alert();
            if (e.target.matches('input[type="checkbox"]')) {
                this.Refresh();
            }
        });

        const header =
            this.content ||
            this.container.querySelector('[onclick*="FDropCheck"]');

        if (header) {
            header.addEventListener('click', (e) => {
               
                e.stopPropagation();
                this.Toggle();
            });
        }
    }

    Toggle() {

        if (!this.panel)
            return;

        const visible = getComputedStyle(this.panel).display !== 'none';
        this.panel.style.display = visible ? 'none' : '';
    }

     open() {
         alert("open");
         if (this.panel)
             this.panel.style.display = '';
     }

     close() {
  
         if (this.panel)
             this.panel.style.display = 'none';
     }

    Refresh() {

        if (!this.content)
            return;

        const checkedItems = this.GetCheckedItems();

        if (checkedItems.length === 0) {

            this.content.innerHTML = this.placeholder;
            return;
        }

        const fragment = document.createDocumentFragment();

        checkedItems.forEach(item => {
            fragment.appendChild(
                this.CreateButton(item.id, item.text)
            );
        });

        this.content.innerHTML = '';
        this.content.appendChild(fragment);
    }

    GetCheckedItems() {
        return [...this.container.querySelectorAll('input[type="checkbox"]:checked')]
            .map(chk => {

                const label =
                    this.container.querySelector(`label[for="${chk.id}"]`) ||
                    document.querySelector(`label[for="${chk.id}"]`);

                return {
                    id: chk.id,
                    text: label?.textContent?.trim() || ''
                };
            });
    }

    CreateButton(id, text) {
        const btn = document.createElement('button');
        btn.type = 'button';
        btn.dataset.checkid = id;
        btn.innerHTML = `${text}`;

        btn.addEventListener('click', (e) => {

            e.stopPropagation();
            const chk = document.getElementById(id);

            if (chk) {
                chk.checked = false;
            }

            this.Refresh();

            if (typeof Summ === 'function') {
                Summ();
            }
        });

        return btn;
    }
}

document.addEventListener('DOMContentLoaded', () => {

    const dropdowns =
        [...document.querySelectorAll('[data-easycblist="start"]')]
            .map(container => new CheckDropDown(container));

    window.addEventListener('click', (event) => {
        const active = event.target.closest('[data-easycblist="start"]');
        dropdowns.forEach(dropdown => {

            if (dropdown.container !== active) {
                dropdown.close();
            }
        });
    });

</script>