by SamProf
@page "/" <div class="row"> <div class="col-md-6"> <div> <button @onclick="Change">Set config Values</button> <button @onclick="Clear">Clear Checks</button> </div> @for (int i = 0; i < NumberOfControls; i++) { int x = i; // need to make a copy here or everything thinks it is the last one whrn 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 configValue in ConfigurationString) { string localc = configValue; 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 } }
namespace BlazorFiddleProject { using Microsoft.AspNetCore.Components.Builder; using Microsoft.Extensions.DependencyInjection; public class Startup { public void ConfigureServices(IServiceCollection services) { } public void Configure(IComponentsApplicationBuilder app) { app.AddComponent<App>("app"); } } }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width"> <title>BlazorFiddleProject</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <style> app { } </style> <script type="text/javascript"> </script> </head> <body> <app>Loading...</app> <script src="_framework/blazor.webassembly.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>

Add component

BlazorFiddle was updated from Blazor 0.7 to .NET 6.0. Your old source code could not work. You need to upgrade to latest.