@page "/" <h3>Companies</h3> <table class="table table-bordered table-sm"> <thead> <tr> <th scope="col">#</th> <th scope="col">Company</th> <th scope="col">Location</th> </tr> </thead> <tbody> @foreach (var company in Companies) { var index = Companies.IndexOf(company); <tr> <td> <button type="button" class="btn btn-primary" @onclick="@(() => { Edits[index] = !Edits[index]; })"> @(Edits[index] ? "Back" : "Edit") </button> </td> <td> @if (Edits[index]) { <input class="form-control" type="text" style="background-color:lightyellow;" value="@company.Name" @oninput="@(e => { Companies[index].Name = e.Value.ToString(); })"/> } else { @company.Name } </td> <td> @if (Edits[index]) { <input class="form-control" type="text" style="background-color:lightyellow;" value="@company.Location" @oninput="@(e => { Companies[index].Location = e.Value.ToString(); })"/> } else { @company.Location } </td> </tr> } </tbody> </table> <ul> @*Check realtime changes to Company names when you edit them*@ @foreach (var company in Companies) { <li>@company.Name: @company.Location</li> } </ul> @code { private List<Company> Companies { get; set; } = new List<Company> { new Company("Globex Corporation", "Germany"), new Company("Soylent Corp", "Switzerland"), new Company("Umbrella Corporation", "Netherlands") }; private bool[] Edits { get; set; } protected override void OnInitialized() { Edits = new bool[Companies.Count]; } public class Company { public Company(string name, string location) { Name = name; Location = location; } public string Name { get; set; } public string Location { get; set; } } }