Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

CheckboxList 多选框组

控件用于创建多选的复选框组

基础用法

通过数据绑定展现复选框组

Demo

使用说明:

  • 通过 bind-Value 设置双向绑定数据值
  • 通过 Items 设置候选数据源
  • 通过 OnSelectedChanged 回调方法获取改变项实例

客户端验证

内置于 ValidateForm 中使用

Demo

可以通过改变窗口大小,体验自适应布局

本例中绑定模型 BindItemName 字段,通过勾选项自动更改模型数据

由于内置于 ValidateForm 表单内,本例中增加了 RequiredAttribute 必选要求验证,当取消所有选项后提示验证结果

绑定值:
张三,李四

双向绑定集合

绑定值为集合

Demo

TValue 设置为 IEnumerable<int> 泛型集合,绑定集合的 ValueField 指定字段必须与泛型类型一致

绑定值:
9,10

TValue 设置为 IEnumerable<string> 泛型集合

绑定值:
13,15

双向绑定枚举

绑定值为枚举

Demo

CheckboxList 绑定一个枚举集合时,Items 不需要指定,Items 会被自动设置成枚举里面所有的值,如果需要绑定部分值时,请自行提供枚举集合 Items

绑定值:
Middel,Primary

Attributes

Loading...

事件 Events

Loading...
@page "/checkboxlists"

<h3>CheckboxList 多选框组</h3>

<h4>控件用于创建多选的复选框组</h4>

<Block Title="基础用法" Introduction="通过数据绑定展现复选框组">
    <p>使用说明:</p>
    <ul class="ul-demo">
        <li>通过 <code>bind-Value</code> 设置双向绑定数据值</li>
        <li>通过 <code>Items</code> 设置候选数据源</li>
        <li>通过 <code>OnSelectedChanged</code> 回调方法获取改变项实例</li>
    </ul>
    <CheckboxList @bind-Value="@Value1" Items="@Items1"
                  OnSelectedChanged="@OnSelectedChanged"></CheckboxList>
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="客户端验证" Introduction="内置于 ValidateForm 中使用">
    <p>可以通过改变窗口大小,体验自适应布局</p>
    <p>本例中绑定模型 <code>BindItem</code> 的 <code>Name</code> 字段,通过勾选项自动更改模型数据</p>
    <p>由于内置于 <code>ValidateForm</code> 表单内,本例中增加了 <code>RequiredAttribute</code> 必选要求验证,当取消所有选项后提示验证结果</p>
    <ValidateForm Model="@Dummy">
        <div class="form-inline">
            <div class="row">
                <div class="form-group col-12">
                    <CheckboxList @bind-Value="@Dummy.Name" Items="@Items2" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-auto col-form-label">
                <div>绑定值:</div>
            </div>
            <div class="col">
                <div class="form-control">@Dummy.Name</div>
            </div>
        </div>
    </ValidateForm>
</Block>

<Block Title="双向绑定集合" Introduction="绑定值为集合">
    <p>TValue 设置为 <code>IEnumerable&lt;int&gt;</code> 泛型集合,绑定集合的 <code>ValueField</code> 指定字段必须与泛型类型一致</p>
    <CheckboxList TValue="IEnumerable<int>" Items="@Items3" @bind-Value="@Value2" />
    <div class="row mt-3">
        <div class="col-auto col-form-label">
            <div>绑定值:</div>
        </div>
        <div class="col">
            <div class="form-control">@(string.Join(",", Value2))</div>
        </div>
    </div>
    <p class="mt-3">TValue 设置为 <code>IEnumerable&lt;string&gt;</code> 泛型集合</p>
    <CheckboxList TValue="IEnumerable<string>" Items="@Items4" @bind-Value="@Value3" />
    <div class="row mt-3">
        <div class="col-auto col-form-label">
            <div>绑定值:</div>
        </div>
        <div class="col">
            <div class="form-control">@(string.Join(",", Value3))</div>
        </div>
    </div>
</Block>

<Block Title="双向绑定枚举" Introduction="绑定值为枚举">
    <p>当 <code>CheckboxList</code> 绑定一个枚举集合时,<code>Items</code> 不需要指定,<code>Items</code> 会被自动设置成枚举里面所有的值,如果需要绑定部分值时,请自行提供枚举集合 <code>Items</code></p>
    <CheckboxList @bind-Value="@SelectedEnumValues" />
    <div class="row mt-3">
        <div class="col-auto col-form-label">
            <div>绑定值:</div>
        </div>
        <div class="col">
            <div class="form-control">@(string.Join(",", SelectedEnumValues))</div>
        </div>
    </div>
</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 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; }

        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 Logger? 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 static IEnumerable<AttributeItem> GetAttributes()
        {
            return new AttributeItem[]
            {
                new AttributeItem() {
                    Name = "Items",
                    Description = "数据源",
                    Type = "IEnumerable<SelectedItem>",
                    ValueList = " — ",
                    DefaultValue = " — "
                },
                new AttributeItem(){
                    Name = "Value",
                    Description = "组件值用于双向绑定",
                    Type = "TValue",
                    ValueList = " — ",
                    DefaultValue = " — "
                }
            };
        }

        /// <summary>
        /// 获得事件方法
        /// </summary>
        /// <returns></returns>
        private static IEnumerable<EventItem> GetEvents() => new EventItem[]
        {
            new EventItem()
            {
                Name = "OnSelectedChanged",
                Description="复选框状态改变时回调此方法",
                Type ="EventCallback<IEnumerable<SelectedItem>, TValue, Task>"
            }
        };
    }
}

B 站相关视频链接

暂无

交流群

QQ群: BootstrapAdmin & Blazor(795206915)欢迎加群讨论
An error has occurred. This application may no longer respond until reloaded. Reload