Blazor InputCheckBox

Solution for Blazor InputCheckBox
is Given Below:

So the overall goal is I want to have check boxes on a form that all the different Patterns and the different types of cuts (Mens, Womens, Universal) and I want to be able to check Patterns x, y, and z then cut type Mens and Womens. Then pass or access the values I have checked to a method that then does all of the unique configurations. That then calls my Data Access Library and saves them to my SQL Server.

I have my insert one Pattern at a time working by getting data from a drop down populated by a hard coded list using EditForms then calling my InsertPattern Function.

I am not sure how to use the InputCheckBox option in Blazors EditForms. I understand it has to be tied to a boolean so I tried creating two lists of booleans to match my PatternName and CutType / Gender but it seems that is not the way to approach it.

I had read previously that I have to setup a onChange function to work with my edit form. It this supposed to be the one that calls the boolean list associated to my PatternName and Patterncut lists?

So My real question is how do I approach setting up these input check box?
Below is the examples of my lists and models. Pattern model has 4 parts PatternID the PK PatternName, PatternType and Inactive which is just for future implementation.
Of course my callInserts will need to be changed but once I figure out how to use the input checkboxes correctly I should know how to do it.

    @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 [email protected] [email protected]>
    <ValidationSummary />


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

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

<h3>Insert Patterns V2</h3>
<EditForm [email protected] [email protected]>
    <ValidationSummary />
    @foreach (string patName in AllPatternNames)
    {
        <label>@patName</label>
        <InputCheckbox @[email protected] />

    }
    @foreach (string cut in Gender)
    {
        <label>@cut</label>
        <InputCheckbox @[email protected] />

    }



    <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;

}

If any more info is needed please let me Know!!

A checkbox needs to be bound to a bool variable. Or, if you don’t want to make a bool variable, you can pass the item through to your event handler and keep a separate list of selected items. There are many other ways to do this, but hopefully you can get the idea.

1. Create a carrier class to hold your list items with an added IsSelected variable.

@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. Keep a separate list for selected items, and add or remove them in the event handler for the checkbox.

@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);
    }
}