Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

CheckboxList

The control is used to create a multi-select check box group

Basic usage

Show check box groups by data binding

Demo

Set bidirectional binding data value through bind-Value
Set candidate data sources through Items
Get the changed item instance through the onSelectedChanged callback method

Name

Item 1

Item 2

Item 3

Item 4

@inject IStringLocalizer<CheckboxListNormal> Localizer

<CheckboxList TValue="string" @bind-Value="@Value1" Items="@Items" ShowLabel="true" DisplayText="@Localizer[nameof(Foo.Name)]" OnSelectedChanged="@OnSelectedChanged" />
<BlockLogger class="mt-3" @ref="Trace" />

@code {
    private string Value1 { get; set; } = "1,3";

    private BlockLogger? Trace { get; set; }

    [NotNull]
    private IEnumerable<SelectedItem>? Items { get; set; } = new List<SelectedItem>(new List<SelectedItem>
    {
        new SelectedItem { Text = "Item 1", Value = "1" },
        new SelectedItem { Text = "Item 2", Value = "2" , IsDisabled = true },
        new SelectedItem { Text = "Item 3", Value = "3" },
        new SelectedItem { Text = "Item 4", Value = "4" },
    });

    private Task OnSelectedChanged(IEnumerable<SelectedItem> items, string value)
    {
        Trace?.Log($"{Localizer["Header"]} {items.Count(i => i.Active)} {Localizer["Counter"]}：{value}");
        return Task.CompletedTask;
    }
}

Client Validation

Built in validateform

Demo

You can experience adaptive layout by changing the window size

In this example, the Name field of the binding model binditem is automatically changed by checking the option

Because it is built into the ValidateForm form, in this example, RequiredAttribute required for verification is added. When all options are cancelled, the verification result will be prompted

@inject IStringLocalizer<CheckboxListValidateForm> Localizer

<ValidateForm Model="@Dummy">
    <div class="row g-3">
        <div class="col-12">
            <CheckboxList @bind-Value="@Dummy.Name" Items="@Items" />
        </div>
        <div class="col-12">
            <label class="form-label">@Localizer["Foo.BindValue"]</label>
            <div class="form-control flex-fill">@Dummy.Name</div>
        </div>
    </div>
</ValidateForm>

@code {
    /// <summary>
    /// Foo 类为Demo测试用，如有需要请自行下载源码查阅
    /// Foo class is used for Demo test, please download the source code if necessary
    /// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
    /// </summary>
    private Foo Dummy { get; set; } = new Foo();

    [NotNull]
    private IEnumerable<SelectedItem>? Items { get; set; }

    /// <summary>
    /// OnInitialized method
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Items = new List<SelectedItem>(new List<SelectedItem>
        {
            new SelectedItem { Text = Localizer["item1"], Value = Localizer["item1"] },
            new SelectedItem { Text = Localizer["item2"], Value = Localizer["item2"] },
            new SelectedItem { Text = Localizer["item3"], Value = Localizer["item3"] },
            new SelectedItem { Text = Localizer["item4"], Value = Localizer["item4"] },
        });

        Dummy = new Foo() { Name = Localizer["Foo"] };
    }
}

ShowLabelTitle

ShowLabelIntro

Demo

Tvalue is set to IEnumerable<int> generic collection, the ValueField specified field of the bound collection must be consistent with the generic type

Name

Item 9

Item 10

Item 11

Item 12

Foo.BindValue

9,10

TValue is set to IEnumerable<string> generic collection

Name

Item 13

Item 14

Item 15

Item 16

Foo.BindValue

13,15

@inject IStringLocalizer<CheckboxListShowLabel> Localizer

<div class="row g-3">
    <div class="col-12">
        <CheckboxList TValue="IEnumerable<int>" Items="@Items1" @bind-Value="@Value1" ShowLabel="true" DisplayText="@Localizer[nameof(Foo.Name)]" />
    </div>
    <div class="col-12">
        <label class="form-label">@Localizer["Foo.BindValue"]</label>
        <div class="form-control">@(string.Join(",", Value1))</div>
    </div>
</div>
<p class="mt-3">@((MarkupString)Localizer["Description"].Value)</p>
<div class="row g-3">
    <div class="col-12">
        <CheckboxList TValue="IEnumerable<string>" Items="@Items2" @bind-Value="@Value2" ShowLabel="true" DisplayText="@Localizer[nameof(Foo.Name)]" />
    </div>
    <div class="col-12">
        <label class="form-label">@Localizer["Foo.BindValue"]</label>
        <div class="form-control flex-fill">@(string.Join(",", Value2))</div>
    </div>
</div>

@code {
    [NotNull]
    private IEnumerable<SelectedItem>? Items1 { get; set; }

    [NotNull]
    private IEnumerable<SelectedItem>? Items2 { get; set; }

    private IEnumerable<int> Value1 { get; set; } = new int[] { 9, 10 };

    private IEnumerable<string> Value2 { get; set; } = new string[] { "13", "15" };

    /// <summary>
    /// OnInitialized method
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Items1 = new List<SelectedItem>(new List<SelectedItem>
        {
            new SelectedItem { Text = "Item 9", Value = "9" },
            new SelectedItem { Text = "Item 10", Value = "10" },
            new SelectedItem { Text = "Item 11", Value = "11" },
            new SelectedItem { Text = "Item 12", Value = "12" },
        });

        Items2 = new List<SelectedItem>(new List<SelectedItem>
        {
            new SelectedItem { Text = "Item 13", Value = "13" },
            new SelectedItem { Text = "Item 14", Value = "14" },
            new SelectedItem { Text = "Item 15", Value = "15" },
            new SelectedItem { Text = "Item 16", Value = "16" },
        });
    }
}

Bidirectional binding enumeration

The binding value is enumeration

Demo

When CheckboxList binds an enumeration set, Items does not need to be specified, Items will be automatically set to all values in the enumeration. If you need to bind some values, please provide the enumeration set Items

Name

小学

中学

Foo.BindValue

Middle,Primary

@inject IStringLocalizer<CheckboxListEnum> Localizer

<div class="row g-3">
    <div class="col-12">
        <CheckboxList @bind-Value="@SelectedEnumValues" ShowLabel="true" DisplayText="@Localizer[nameof(Foo.Name)]" />
    </div>
    <div class="col-12">
        <label class="form-label">@Localizer["Foo.BindValue"]</label>
        <div class="form-control">@(string.Join(",", SelectedEnumValues))</div>
    </div>
</div>

@code {
    private IEnumerable<EnumEducation> SelectedEnumValues { get; set; } = new List<EnumEducation>
    {
        EnumEducation.Middle, EnumEducation.Primary
    };

    enum EnumEducation
    {
        [Display(Name = "小学")]
        Primary,
        [Display(Name = "中学")]
        Middle
    }
}

No border

By setting ShowBorder='false' do not display borders

Demo

Displays a red border when validation fails

@inject IStringLocalizer<CheckboxListNoBorder> Localizer

<ValidateForm Model="@Dummy">
    <CheckboxList @bind-Value="@Dummy.Name" ShowBorder="false" Items="@Items" />
</ValidateForm>

@code {
    /// <summary>
    /// Foo 类为Demo测试用，如有需要请自行下载源码查阅
    /// Foo class is used for Demo test, please download the source code if necessary
    /// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
    /// </summary>
    private Foo Dummy { get; set; } = new Foo();

    [NotNull]
    private IEnumerable<SelectedItem>? Items { get; set; }

    /// <summary>
    /// OnInitialized method
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Items = new List<SelectedItem>(new List<SelectedItem>
        {
            new SelectedItem { Text = Localizer["item1"], Value = Localizer["item1"] },
            new SelectedItem { Text = Localizer["item2"], Value = Localizer["item2"] },
            new SelectedItem { Text = Localizer["item3"], Value = Localizer["item3"] },
            new SelectedItem { Text = Localizer["item4"], Value = Localizer["item4"] },
        });

        Dummy = new Foo() { Name = Localizer["Foo"] };
    }
}

Vertical arrangement

Arrange checkboxes vertically by setting IsVertical = 'true'

Demo

Pat

Argo

Doom

Simon

@inject IStringLocalizer<CheckboxListVertical> Localizer

<CheckboxList @bind-Value="@Dummy.Name" IsVertical="true" ShowBorder="false" Items="@Items" />

@code {
    /// <summary>
    /// Foo 类为Demo测试用，如有需要请自行下载源码查阅
    /// Foo class is used for Demo test, please download the source code if necessary
    /// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
    /// </summary>
    private Foo Dummy { get; set; } = new Foo();

    [NotNull]
    private IEnumerable<SelectedItem>? Items { get; set; }

    /// <summary>
    /// OnInitialized method
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Items = new List<SelectedItem>(new List<SelectedItem>
        {
            new SelectedItem { Text = Localizer["item1"], Value = Localizer["item1"] },
            new SelectedItem { Text = Localizer["item2"], Value = Localizer["item2"] },
            new SelectedItem { Text = Localizer["item3"], Value = Localizer["item3"] },
            new SelectedItem { Text = Localizer["item4"], Value = Localizer["item4"] },
        });

        Dummy = new Foo() { Name = Localizer["Foo"] };
    }
}

Disable

Disable by setting IsDisabled='true'

Demo

Pat

Argo

Doom

Simon

@inject IStringLocalizer<CheckboxListDisabled> Localizer

<CheckboxList @bind-Value="@Dummy.Name" IsDisabled="true" ShowBorder="false" Items="@Items" />

@code {
    /// <summary>
    /// Foo 类为Demo测试用，如有需要请自行下载源码查阅
    /// Foo class is used for Demo test, please download the source code if necessary
    /// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
    /// </summary>
    private Foo Dummy { get; set; } = new Foo();

    [NotNull]
    private IEnumerable<SelectedItem>? Items { get; set; }

    /// <summary>
    /// OnInitialized method
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Items = new List<SelectedItem>(new List<SelectedItem>
        {
            new SelectedItem { Text = Localizer["item1"], Value = Localizer["item1"] },
            new SelectedItem { Text = Localizer["item2"], Value = Localizer["item2"] },
            new SelectedItem { Text = Localizer["item3"], Value = Localizer["item3"] },
            new SelectedItem { Text = Localizer["item4"], Value = Localizer["item4"] },
        });

        Dummy = new Foo() { Name = Localizer["Foo"] };
    }
}

Attributes

Event

B station related video link

交流群

QQ Group：BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion

CheckboxList

The control is used to create a multi-select check box group

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Attributes

Event

Bootstrap Blazor Component library updated to 7.4.4-beta01