Blazor 输入复选框

Question

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

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

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

我之前读到我必须设置一个 onChange 函数来处理我的编辑表单。这应该是调用与我的 PatternName 和 Patterncut 列表关联的布尔列表的那个？

所以我真正的问题是如何设置这些输入复选框？以下是我的列表和模型的示例。 Pattern 模型有 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.创建一个载体 class 来保存您的列表项并添加 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);
    }
}

Blazor 输入复选框

Blazor InputCheckBox

c#

asp.net

checkbox

blazor

blazor-server-side