Blazor 输入复选框

所以总体目标是我希望在表格上有复选框，所有不同的图案和不同类型的剪裁（男装、女装、通用），并且我希望能够检查图案 x、y 和 z，然后剪裁类型男士和女士。然后将我检查过的值传递或访问到一个方法，然后该方法执行所有独特的配置。然后调用我的数据访问库并将它们保存到我的 SQL Server。

我通过使用 EditForms 从由硬编码列表填充的下拉列表中获取数据，然后调用我的 InsertPattern 函数，一次插入一个模式。

我不确定如何使用 Blazors EditForms 中的 InputCheckBox 选项。我知道它必须与布尔值绑定，所以我尝试创建两个布尔值列表来匹配我的 PatternName 和 CutType / Gender，但似乎这不是处理它的方法。

我之前读过，我必须设置一个 onChange 函数才能使用我的编辑表单。这应该是调用与我的 PatternName 和 Patterncut 列表关联的布尔列表的列表吗？

所以我真正的问题是如何设置这些输入复选框？ 以下是我的列表和模型的示例。模式模型有 4 个部分：PatternID、PK PatternName、PatternType 和 Inactive，仅供将来实现。 当然，我的 callInserts 需要更改，但是一旦我弄清楚如何正确使用输入复选框，我应该知道如何去做。

    @page "/Pattern"

@using DataAccessLibrary
@using DataAccessLibrary.Models

@inject IPatternData _db


<h4>Current Patterns </h4>
@if (patternList is null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Pattern Name</th>
                <th>Pattern Cut</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var CurrentPatterns in patternList)
            {
                <tr>
                    <td>@CurrentPatterns.PatternName</td>
                    <td>@CurrentPatterns.PatternCut</td>
                </tr>
            }
        </tbody>
    </table>
}
<h3>Insert Patterns</h3>
<EditForm Model=@newPattern OnValidSubmit=@InsertPattern>
    <ValidationSummary />


    <InputSelect @bind-Value=newPattern.PatternName>
        <option value=" ">"..."</option>
        @foreach (string patName in AllPatternNames)
        {
            <option value=@patName>@patName</option>
        }
    </InputSelect>
    <InputSelect @bind-Value=newPattern.PatternCut>
        <option value=" ">"..."</option>
        @foreach (string cut in Gender)
        {
            <option value=@cut>@cut</option>
        }
    </InputSelect>

    <button type="submit" class="btn btn-primary"> Submit</button>
</EditForm>

<h3>Insert Patterns V2</h3>
<EditForm Model=@newPattern OnValidSubmit=@CallInserts>
    <ValidationSummary />
    @foreach (string patName in AllPatternNames)
    {
        <label>@patName</label>
        <InputCheckbox @bind-Value=@patName />

    }
    @foreach (string cut in Gender)
    {
        <label>@cut</label>
        <InputCheckbox @bind-Value=@cut />

    }



    <button type="submit" class="btn btn-primary"> Submit</button>
</EditForm>
@*@foreach (var cutType in Gender)
{
    <input type="checkbox" />
    @cutType
}

@foreach (var patternName in AllPatternNames)
{
    <input type="checkbox" />
    @patternName
}*@



@code {


    private List<PatternModel> patternList;
    private PatternModel newPattern = new PatternModel();
    private List<string> AllPatternNames = new List<string> {"Middle Weight Coverall",
   "Light Weight Coveral",
    "Winter Coverall",
    "Arctic Coverall",
    "Button Up Workshirt",
    "Henley Shirt’",
    "Welders Shirt",
    "Daily Bib",
    "Winter Bib",
    "Arctic Bib",
    "Jeans",
    "Work Pants",
    "Tactical Pant",
    "Parka",
    "Bomber",
    "Frost Jacket",
    "Fleece  ¼ / full zip",
    "Hat Liner",
    "Balaclava",
    "Lab Coats" };

    public List<string> Gender = new List<string>
{
        "Men",
        "Women",
        "Universal"
    };

    private List<bool> selectedPatterns = new List<bool>
{
        false, false, false, false, false,false, false, false, false, false,false, false, false, false, false,false, false, false, false, false,false, false, false, false, false,false, false, false, false, false
    };
    private List<bool> selectedCut = new List<bool> { false, false, false };

    protected override async Task OnInitializedAsync()
    {
        patternList = await _db.Get();

    }

    private async Task InsertPattern()
    {

        PatternModel NP = new PatternModel
        {
            PatternCut = newPattern.PatternCut,
            PatternName = newPattern.PatternName
        };

        await _db.Insert(NP);
        patternList.Add(NP);
        newPattern = new PatternModel();

    }
    private void CallInserts()
    {
        for (int i = 0; i < Gender.Count; i++)
        {
            if (selectedCut[i] == true)
            {
                for (int x = 0; i < AllPatternNames.Count; x++)
                {
                    if (selectedPatterns[x] == true)
                    {
                        PatternModel NP = new PatternModel
                        {
                            PatternCut = Gender[i],
                            PatternName = AllPatternNames[i]
                        };
                        patternList.Add(NP);
                        newPattern = new PatternModel();
                        //newPattern.PatternCut = Gender[i];
                        //newPattern.PatternName = AllPatternNames[i];
                    }
                }
            }
            //await InsertPattern();
        }
    }



    //private List<ClosuresModel> closure;

}

如果需要更多信息，请告诉我！

复选框需要绑定到bool多变的。或者，如果您不想创建bool变量，您可以将项目传递到事件处理程序并保留所选项目的单独列表。还有很多其他方法可以做到这一点，但希望您能明白这一点。

1. 创建一个载体类来保存您的列表项并添加IsSelected多变的。

@if (SelectablePatterns is not null)
{
    foreach (var item in SelectablePatterns)
    {
        <input type="checkbox" @bind-value="@item.IsSelected" />
        @item.Name
        <br />
    }
    <br />
    <div><b>Selected items:</b></div>
    foreach (var item in SelectablePatterns.Where(sp => sp.IsSelected))
    {
        <div>@item.Name</div>
    }
}

@code {
        private List<string> AllPatternNames = new List<string>
              { "Middle Weight Coverall", "Light Weight Coveral", "Bikini Briefs" };
        class SelectablePattern { public string Name; public bool IsSelected; }
        List<SelectablePattern> SelectablePatterns;
    
        protected override void OnInitialized()
        {
            SelectablePatterns = AllPatternNames.Select(pat => new SelectablePattern { Name = pat }).ToList();
        }
    }

2. 为所选项目保留一个单独的列表，并在复选框的事件处理程序中添加或删除它们。

@foreach (var item in AllPatternNames)
{
    <input type="checkbox" @onchange="args=>TogglePattern(args, item)" /> @item  <br />
}

<br />
<div><b>Selected items:</b></div>

@foreach (var item in SelectedPatterns)
{
    <div>@item</div>
}

@code {
    private List<string> AllPatternNames = new List<string> { "Middle Weight Coverall", "Light Weight Coveral", "Bikini Briefs" };
    List<string> SelectedPatterns = new List<string>();

    async Task TogglePattern(ChangeEventArgs args, string item)
    {
        bool IsSelected = (bool)args.Value;
        if (IsSelected) SelectedPatterns.Add(item);
        else SelectedPatterns.Remove(item);
    }
}