Change the HTML element in a Blazor application by pressing a button?

Question

I wanted to ask if it is possible to change the type of an HTML element in a Blazor application by pressing a button. That I turn a normal text into a text input field for example.

I have a table where the first column has a button for each entry in the table. My goal is that when you press the button, the fields turn into input fields in time, so you can edit the values.

This is just a quick photo edit, but this is how I imagined it.

Answer 1

You can use an index array to track the edit status of each company. When the button is clicked, the corresponding value in the index array will be toggled. If the value is set to true, the cell will display an input field where you can edit the company name. The updated name will be saved to the list.

Instead of using a simple string to store company information, you can create a class that contains multiple properties such as the company name and location..

Output:

Demo: https://blazorfiddle.com/s/lil3olrf

Implementation:

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