@page "/" @using Microsoft.AspNetCore.Components.Web <div class="margins"> <h2>Selectable Table</h2> </div> <div class="col-sm-6 margins" > <table class="table-container"> <thead> <tr> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> @if(valueList != null) { int count = valueList.Count; for (var i=0; i < count; i++) { int current = i; // don't use loop variable in binding var values = valueList[current]; <tr class="@values.Class" @onclick="((e) => SelectItems(current, true))"> <td>@values.Name</td> <td>@values.Age</td> </tr> } } </tbody> </table> </div> <div class="margins"> <h4>Show selected table values</h4> <button type="button" class="btn btn-info alignment" @onclick="showSelected">Click</button> </div> <hr/> @if(events != null) { <ul> @foreach(var evt in events) { <li>@evt</li> } </ul> } @code { //Declare various lists and classes. private List<Value> valueList; private List<string> events = new List<string>(); class Value { public string Name {get;set;} public string Age {get;set;} public string Class {get;set;} } //OnInitialized function to instantiated the valueList. protected override void OnInitialized() { valueList = new List<Value>(); valueList.Add( new Value() { Name = "James", Age ="38" }); valueList.Add( new Value() { Name = "John", Age ="32" }); } //Function to show the selected items. void showSelected() { events.Clear(); foreach (var value in valueList) { if (value.Class.Contains("selected")) { events.Add($"'{value.Name}' selected. With value: '{value.Age}'"); }; } } //Function to set selected class on tr. Can multi-select or single via Toggle bool. void SelectItems(int index, bool toggle) { var item = valueList[index]; //If toggle then allow multiple to be selected. If class already selected then clear. if (toggle) { if (item.Class == "selected") { item.Class = ""; } else { item.Class = "selected"; } } else { foreach (var value in valueList) { value.Class = ""; } // set the value item.Class = "selected"; } } }
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"> <script src="_content/MatBlazor/dist/matBlazor.js"></script> <style> app { } body { font-family: 'Open Sans', sans-serif; font-weight: 300; line-height: 1.42em; color:#A7A1AE; background-color:#1F2739; } .alignment { margin-left: 40px; } .margins { margin: 15px; auto; } .table-container { text-align: left; overflow: hidden; width: 80%; margin: 0px auto; display: table; padding: 0 0 8em 0; } .table-container th h1 { font-weight: bold; font-size: 1em; text-align: left; color: #185875; } .table-container td { font-weight: normal; font-size: 1em; -webkit-box-shadow: 0 2px 2px -2px #0E1119; -moz-box-shadow: 0 2px 2px -2px #0E1119; box-shadow: 0 2px 2px -2px #0E1119; } .table-container td, .container th { padding-bottom: 2%; padding-top: 2%; padding-left:2%; } /* Background-color of the odd rows */ .table-container tr:nth-child(odd) { background-color: #323C50; } .table-container tr:nth-child(even) { background-color: #2C3446; } .table-container tr.selected { background-color: #185875; } .table-container th { background-color: #1F2739; } .container td:first-child { color: #FB667A; } </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.