Blazor EditForm中InputCheckbox多选绑定及批量保存到SQL Server的实现方法

核心实现思路 #

不要单独维护和选项列表匹配的布尔列表，很容易出现索引错位、数据不同步的问题。正确的做法是给每个可选项封装选中状态，直接用InputCheckbox双向绑定封装后的选中字段，提交时直接筛选选中项即可，不需要额外配置EditForm全局的onChange函数。

具体实现步骤 #

• 第一步：定义通用的可选项目包装类，用来同时存选项值和选中状态

// 可复用的泛型可选包装类，适配Pattern、剪裁类型等所有多选场景
public class SelectableItem<T>
{
    public T Value { get; set; }
    public bool IsSelected { get; set; }
    public string DisplayText { get; set; }
}

• 第二步：在页面中声明两个多选列表的绑定字段

// Pattern多选列表
private List<SelectableItem<string>> PatternOptions { get; set; }
// 剪裁类型多选列表
private List<SelectableItem<string>> CutTypeOptions { get; set; }

protected override void OnInitialized()
{
    // 初始化Pattern选项，替换成你的实际数据源
    PatternOptions = new List<SelectableItem<string>>
    {
        new() { DisplayText = "Pattern A", Value = "PatternA" },
        new() { DisplayText = "Pattern B", Value = "PatternB" },
        // 其他Pattern...
    };

    // 初始化剪裁类型选项
    CutTypeOptions = new List<SelectableItem<string>>
    {
        new() { DisplayText = "男款", Value = "Male" },
        new() { DisplayText = "女款", Value = "Female" },
        new() { DisplayText = "通用款", Value = "Unisex" }
    };
}

• 第三步：在EditForm中渲染InputCheckbox组件，直接绑定每个项的IsSelected属性

<EditForm Model="this" OnValidSubmit="HandleSubmit">
    <h4>选择Pattern</h4>
    @foreach (var pattern in PatternOptions)
    {
        <div>
            <InputCheckbox @bind-Value="pattern.IsSelected" />
            <label>@pattern.DisplayText</label>
        </div>
    }

    <h4>选择剪裁类型</h4>
    @foreach (var cutType in CutTypeOptions)
    {
        <div>
            <InputCheckbox @bind-Value="cutType.IsSelected" />
            <label>@cutType.DisplayText</label>
        </div>
    }

    <button type="submit">生成配置并保存</button>
</EditForm>

• 第四步：提交时筛选选中项，生成Pattern对象后调用存储逻辑

private void HandleSubmit()
{
    // 拿到所有选中的Pattern
    var selectedPatterns = PatternOptions.Where(p => p.IsSelected).Select(p => p.Value).ToList();
    // 拿到所有选中的剪裁类型
    var selectedCutTypes = CutTypeOptions.Where(c => c.IsSelected).Select(c => c.Value).ToList();

    // 遍历生成唯一配置，替换成你实际的生成规则
    foreach (var pattern in selectedPatterns)
    {
        foreach (var cutType in selectedCutTypes)
        {
            var newPattern = new Pattern
            {
                PatternName = pattern,
                PatternType = cutType,
                Inactive = false
            };
            // 调用你的DAL方法插入到SQL Server
            InsertPattern(newPattern);
        }
    }

    // 后续的成功提示、表单重置逻辑
}

可选扩展 #

如果你需要实现勾选复选框时的实时联动逻辑（比如选了某类Pattern自动禁用对应的剪裁类型），才需要给InputCheckbox加ValueChanged事件处理，普通多选场景直接用双向绑定即可。

内容的提问来源于stack exchange，提问作者zachary.miller18