Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

CheckboxList

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

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

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

张三,李四

Binding values are collections

Demo

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

9,10

TValue is set to IEnumerable<string> generic collection

13,15

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

Middel,Primary

By setting ShowBorder='false' do not display borders

Demo

Displays a red border when validation fails

Arrange checkboxes vertically by setting IsVertical = 'true'

Demo

Disable by setting IsDisabled='true'

Demo

Attributes

Loading...

Event

Loading...
@page "/checkboxlists"
@inject IStringLocalizer<CheckboxLists> LLocalizer

<h3>@LLocalizer["Title"]</h3>

<h4>@LLocalizer["H1"]</h4>

<Block Title="@LLocalizer["Blok1Title"]" Introduction="@LLocalizer["Block1Intro"]">
    <p></p>
    <ul class="ul-demo">
        <li>@((MarkupString)LLocalizer["Li1"].Value)</li>
        <li>@((MarkupString)LLocalizer["Li2"].Value)</li>
        <li>@((MarkupString)LLocalizer["Li3"].Value)</li>
    </ul>
    <CheckboxList @bind-Value="@Value1" Items="@Items1" ShowLabel="true" DisplayText="@Localizer[nameof(Foo.Name)]"
                  OnSelectedChanged="@OnSelectedChanged"></CheckboxList>
    <BlockLogger class="mt-3" @ref="Trace" />
</Block>

<Block Title="@LLocalizer["Block2Title"]" Introduction="@LLocalizer["Block2Intro"]">
    <p>@((MarkupString)LLocalizer["P2"].Value)</p>
    <p>@((MarkupString)LLocalizer["P3"].Value)</p>
    <p>@((MarkupString)LLocalizer["P4"].Value)</p>
    <ValidateForm Model="@Dummy">
        <div class="row g-3">
            <div class="col-12">
                <CheckboxList @bind-Value="@Dummy.Name" Items="@Items2" />
            </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>
</Block>

<Block Title="@LLocalizer["Block3Title"]" Introduction="@LLocalizer["Block3Intro"]">
    <p>@((MarkupString)LLocalizer["P5"].Value)</p>
    <div class="row g-3">
        <div class="col-12">
            <CheckboxList TValue="IEnumerable<int>" Items="@Items3" @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">@(string.Join(",", Value2))</div>
        </div>
    </div>
    <p class="mt-3">@((MarkupString)LLocalizer["P6"].Value)</p>
    <div class="row g-3">
        <div class="col-12">
            <CheckboxList TValue="IEnumerable<string>" Items="@Items4" @bind-Value="@Value3" 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(",", Value3))</div>
        </div>
    </div>
</Block>

<Block Title="@LLocalizer["Block4Title"]" Introduction="@LLocalizer["Block4Intro"]">
    <p>@((MarkupString)LLocalizer["P7"].Value)</p>
    <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>
</Block>

<Block Title="@LLocalizer["Block5Title"]" Introduction="@LLocalizer["Block5Intro"]">
    <p>@LLocalizer["P8"]</p>
    <ValidateForm Model="@Dummy">
        <CheckboxList @bind-Value="@Dummy.Name" ShowBorder="false" Items="@Items2" />
    </ValidateForm>
</Block>

<Block Title="@LLocalizer["Block6Title"]" Introduction="@LLocalizer["Block6Intro"]">
    <CheckboxList @bind-Value="@Dummy.Name" IsVertical="true" ShowBorder="false" Items="@Items2" />
</Block>

<Block Title="@LLocalizer["Block7Title"]" Introduction="@LLocalizer["Block7Intro"]">
    <CheckboxList @bind-Value="@Dummy.Name" IsDisabled="true" ShowBorder="false" Items="@Items2" />
</Block>

<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/

using BootstrapBlazor.Components;
using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Pages.Components;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Localization;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Linq;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public partial class CheckboxLists
    {
        [NotNull]
        private IEnumerable<SelectedItem>? Items1 { get; set; }

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

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

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

        [Inject]
        [NotNull]
        private IStringLocalizer<Foo>? Localizer { get; set; }

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

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

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

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

        private BlockLogger? Trace { get; set; }

        /// <summary>
        /// OnInitialized 方法
        /// </summary>
        /// <returns></returns>
        protected override void OnInitialized()
        {
            base.OnInitialized();

            Items1 = new List<SelectedItem>(new List<SelectedItem> {
                new SelectedItem { Text = "Item 1", Value = "1" },
                new SelectedItem { Text = "Item 2", Value = "2" },
                new SelectedItem { Text = "Item 3", Value = "3" },
                new SelectedItem { Text = "Item 4", Value = "4" },
            });

            Items2 = new List<SelectedItem>(new List<SelectedItem>
            {
                new SelectedItem { Text = "张三", Value = "张三" },
                new SelectedItem { Text = "李四", Value = "李四" },
                new SelectedItem { Text = "王五", Value = "王五" },
                new SelectedItem { Text = "赵六", Value = "赵六" },
            });

            Items3 = 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" },
            });

            Items4 = 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" },
            });
        }

        private Task OnSelectedChanged(IEnumerable<SelectedItem> items, string value)
        {
            Trace?.Log($"共 {items.Where(i => i.Active).Count()} 项被选中 组件绑定值 value:{value}");
            return Task.CompletedTask;
        }

        private Foo Dummy { get; set; } = new Foo() { Name = "张三,李四" };

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

        /// <summary>
        /// 获得事件方法
        /// </summary>
        /// <returns></returns>
        private IEnumerable<EventItem> GetEvents() => new EventItem[]
        {
            new EventItem()
            {
                Name = "OnSelectedChanged",
                Description = LLocalizer["Event1"]!,
                Type ="Func<IEnumerable<SelectedItem>, TValue, Task>"
            }
        };
    }
}

B 站相关视频链接

暂无

交流群

QQ Group:BootstrapAdmin & Blazor 795206915( Full) 675147445 Welcome to join the group discussion
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
Motronic (已集成)
An error has occurred. This application may no longer respond until reloaded. Reload