Blazor 输入检查框

Question

所以总体目标是我希望在所有不同图案和不同类型切割（男装、女装、通用）的表单上都有复选框，并且我希望能够检查图案 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;

}

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

Answer 1

复选框需要绑定到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);
    }
}