DEV Community

PeterMilovcik
PeterMilovcik

Posted on

5

Blazor: How to bind table row data to button click

If you ever wondered how to bind the button in the table row to the item from the collection. Here is little help on how to do that:

Table



@page "/somecomponent"

<h3>Some Component</h3>

<table class="table">
    <thead>
    <tr>
        <th>Name</th>
        <th>Edit</th>
        <th>Remove</th>
    </tr>
    </thead>
    <tbody>
    @foreach (var item in items)
    {
        <tr>
            <td>@item.Name</td>
            <td><button @onclick="@(() => Edit(item))">Edit</button></td>
            <td><button @onclick="@(() => Remove(item))">Remove</button></td>
        </tr>
    }
    </tbody>
</table>

@code {

    List<Item> items;

    protected override void OnInitialized()
    {
        base.OnInitialized();
        // Initialize collection of items get it from some service or context
        items = new List<Item>
    {
            new Item {Id = 1, Name = "Item1"},
            new Item {Id = 2, Name = "Item2"},
            new Item {Id = 3, Name = "Item3"},
        };
    }

    void Edit(Item item) => Console.WriteLine($"Edit item: {item.Name}");
    void Remove(Item item) => Console.WriteLine($"Remove item: {item.Name}");

    class Item
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}



Enter fullscreen mode Exit fullscreen mode

Top comments (3)

Collapse
 
dajma00 profile image
We Want Change

Excellent example, exactly how examples should be written!

Collapse
 
anantjaiswal339 profile image
Anant Jaiswal

onclick not working while using jquery datatable

Collapse
 
arieben profile image
ArieBen

Savior!

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more