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