Blazor InputCheckBox

Question

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

}

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

Bennyboy1973 · Accepted Answer · 2021-07-31 02:50:53Z

4

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

edited Jul 31, 2021 at 2:50

answered Jul 31, 2021 at 2:39

Bennyboy1973

4,3372 gold badges16 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

zachary.miller18 Over a year ago

Thank you so much! The first option I felt the most comfortable with and worked perfectly!

zachary.miller18 Over a year ago

I had a question about does this just ittorate through the string list of AllPatternNames adding them to the SelectablePatterns class? SelectablePatterns = AllPatternNames.Select(pat => new SelectablePattern { Name = pat }).ToList();

Bennyboy1973 Over a year ago

Yes, that's right. If that code looks cryptic to you, you can look up Linq or Lambda expressions in C#. They're a bit tricky, but very useful.

Ishikawa Over a year ago

Is there anyway to make it work with <label for="{inputCheckId}"></label> ? It looks like Blazor components don't support complex content for id attribute.

Collectives™ on Stack Overflow

Blazor InputCheckBox

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related