Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Example Razor C#Video

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

@page "/checkboxlists"

<h3>CheckboxList</h3>

<h4>The control is used to create a multi-select check box group</h4>

<DemoBlock Title="Basic usage" Introduction="Show check box groups by data binding" Name="Normal" Demo="typeof(Demos.CheckboxList.CheckboxListNormal)">
    <ul class="ul-demo mb-3">
        <li>Set bidirectional binding data value through <code>bind-Value</code ></li>
        <li>Set candidate data sources through <code>Items</code></li>
        <li>Get the changed item instance through the <code>onSelectedChanged</code> callback method</li>
    </ul>
</DemoBlock>

<DemoBlock Title="Client Validation" Introduction="Built in validateform" Name="ValidateForm" Demo="typeof(Demos.CheckboxList.CheckboxListValidateForm)">
    <p>You can experience adaptive layout by changing the window size</p>
    <p>In this example, the <code>Name</code> field of the binding model <code>binditem</code> is automatically changed by checking the option</p>
    <p>Because it is built into the <code>ValidateForm</code> form, in this example, <code>RequiredAttribute</code> required for verification is added. When all options are cancelled, the verification result will be prompted</p>
</DemoBlock>

<DemoBlock Title="@Localizer["ShowLabelTitle"]" Introduction="@Localizer["ShowLabelIntro"]" Name="ShowLabel" Demo="typeof(Demos.CheckboxList.CheckboxListShowLabel)">
    <p>Tvalue is set to <code>IEnumerable<int></code> generic collection, the <Code>ValueField</Code> specified field of the bound collection must be consistent with the generic type</p>
</DemoBlock>

<DemoBlock Title="Bidirectional binding enumeration" Introduction="The binding value is enumeration" Name="Enum" Demo="typeof(Demos.CheckboxList.CheckboxListEnum)">
    <p>When <code>CheckboxList</code> binds an enumeration set, <code>Items</code> does not need to be specified, <code>Items</code> will be automatically set to all values in the enumeration. If you need to bind some values, please provide the enumeration set <code>Items</code></p>
</DemoBlock>

<DemoBlock Title="No border" Introduction="By setting <code>ShowBorder='false'</code> do not display borders" Name="NoBorder" Demo="typeof(Demos.CheckboxList.CheckboxListNoBorder)">
    <p>Displays a red border when validation fails</p>
</DemoBlock>

<DemoBlock Title="Vertical arrangement" Introduction="Arrange checkboxes vertically by setting <code>IsVertical = 'true' </code >" Name="Vertical" Demo="typeof(Demos.CheckboxList.CheckboxListVertical)" />

<DemoBlock Title="Disable" Introduction="Disable by setting <code>IsDisabled='true'</code>" Name="Disabled" Demo="typeof(Demos.CheckboxList.CheckboxListDisabled)" />

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />

// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// CheckboxLists
/// </summary>
public partial class CheckboxLists
{
    [Inject]
    [NotNull]
    private IStringLocalizer<CheckboxLists>? Localizer { get; set; }

    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
        new AttributeItem() {
            Name = "Items",
            Description = Localizer["Att1"],
            Type = "IEnumerable<SelectedItem>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "IsDisabled",
            Description = Localizer["Att1"],
            Type = "boolean",
            ValueList = " — ",
            DefaultValue = "false"
        },
        new AttributeItem(){
            Name = "Value",
            Description = Localizer["Att1"],
            Type = "TValue",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem(){
            Name = "IsVertical",
            Description = Localizer["Att1"],
            Type = "boolean",
            ValueList = " true / false ",
            DefaultValue = " false "
        }
    };

    /// <summary>
    /// Get event method
    /// </summary>
    /// <returns></returns>
    private IEnumerable<EventItem> GetEvents() => new EventItem[]
    {
        new EventItem()
        {
            Name = "OnSelectedChanged",
            Description = Localizer["Event1"],
            Type ="Func<IEnumerable<SelectedItem>, TValue, Task>"
        }
    };
}

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.2.5-beta02