Activate multiple checkbox in a loop using Blazor

Question

I have a form with about 60 checkboxes of which I have to activate some checkboxes randomly based on a user profile that I acquire from a database. I have the IDs of the checkboxes to select. Is there any way to do that with Blazor?

The first element is a select where I can choose a certain user role for which I receive a list of checkbox IDs that have to be activated for that specific role

    <select class="form-control" @bind:event="onInput" @bind="@D5UserTitle" @onchange="PopulateAccessRights">
        <option selected disabled>Please select role...</option>
        @foreach (var title in Titles) {

        <option value="@title.PkId">@title.Jobtitle1</option>
        }
    </select>

    <input type="checkbox" id="sma" />
    <input type="checkbox" id="smb" />
    <input type="checkbox" id="smc" />
    <input type="checkbox" id="smd" /> 

    @code{

    protected override async Task OnInitializedAsync()
    {
    D5Users = await us.GetUsersAsync();
    Titles = await us.GetJobTitlesAsync();
    ADUsers = await us.GetADUsersAsync();
    }

    private void PopulateAccessRights()
    {

// Here we acquire a list of the IDs of every checkbox to tick for that specific role. The result looks like this: sma;smd;CM_A;CESAR_A;MBKSO_A;OTB_A;VPLUS_A;MW_A;OD_A;XP_A
Every corresponding checkbox must be ticked.

List<string> ConfigurationString = Titles.Where(s => s.PkId == 25).First().ConfigurationString.Split(";").ToList();

// Here's where I'd like to activate the checkboxes                    
    }

}

Answer 1

You can do something like this:

@foreach (var employee in employees)
{
    <input type="checkbox" id="@employee.ID" @bind="@employee.Checked" />
}



@code{ 

    IList<Employee> employees = new List<Employee>() { new Employee { ID=1, Name="Nanacy", Checked=true},
                                                       new Employee { ID=2, Name="Andrew", Checked=true},
                                                       new Employee { ID=2, Name="Bill", Checked=false}};


    public class Employee
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public bool Checked  { get; set; }
    }

} 

Answer 2

Make you own checkbox control with properties Text ValidValue and its own OnChange event also with a public property of Checked.

<input type="checkbox"  @bind="@Checked" >@Text<br>
@code {

    [Parameter] public String Text { get; set; }
    [Parameter] public String ValidValue { get; set; }


    [Parameter] public Action OnChange { get; set; }


    private bool _Checked = false;
    public bool Checked
    {

        get
        {
            return _Checked;
        }
        set
        {
            _Checked = value;
            OnChange.Invoke(); //this just tells the  parent control something happened 
    so it can redraw
        }

    }


}

then you can to this, This creates a list of MyCheckBox Controls then using the @ref property replaces these with the ones added by the for loop in the HTML after this you can use these like any other list.

<div class="row">
    <div class="col-md-6">
        <button @onclick="Change">Set config Values</button>
        <button @onclick="Clear">Clear Checks</button>
        @for (int i = 0; i < NumberOfControls; i++)
        {
            int x = i; // need to make a copy here  or everything thinks it is the last one when you click it 
            String Value = $"sms{i}";
            String Text = "This is for " + Value;
            <MyCheckBox @ref="Checkboxes[x]" ValidValue="@Value" Text="@Text" OnChange="Changed" />
        }
    </div>
    <div class="col-md-6">
       <h4>List of Checked Boxes</h4>
        @foreach (MyCheckBox cb in Checkboxes.Where(c => c.Checked == true))
        {
            <div>@cb.ValidValue --- @cb.Checked</div>
        }
    </div>
</div>


@code{

    private int NumberOfControls = 100;

    List<MyCheckBox> Checkboxes = new List<MyCheckBox>();

    List<string> ConfigurationString = new List<string>() { "sms5", "sms6", "sms7", "sms8", "sms10", "sms22", "sms21", "sms29" };

    protected override void OnInitialized()
    {
        // create place holders in the list that will be replaced  by the actual controls when the page renders
        for (int i = 0; i < NumberOfControls; i++)
        {
            Checkboxes.Add(new MyCheckBox());
        }
        base.OnInitialized();
    }


    void Change()
    {
        foreach (var c in ConfigurationString)
        {
            string localc = c;
            MyCheckBox x = Checkboxes.Where(c => c.ValidValue == localc).FirstOrDefault();
            if (x != null)
            {
                x.Checked = !x.Checked;
            }
        }
    }

    void Clear()
    {
        @foreach (MyCheckBox cb in Checkboxes)
        {
            cb.Checked = false;
        }
    }

    void Changed()
    {
        StateHasChanged(); //redraw this page
    }

}

This is hard to read here so I have put it in BlazorFiddle https://blazorfiddle.com/s/0gn657dn so you can play with it it also generated 100 checkboxes so you can see that it is fast , and the left hand list only shows true values so you could use something like this when you want to write back to the db.

I hope this helps.