Question How to get table row data (such as Id) on same row button click - Blazor

[Pablo]

Hello,
How can I get data from a table row (such as Id or other columns) on click method from a button that is in the same row? So I can pass an Id to the Delete method or something like that.
This is my .razor file:

@page "/ClientList"
@using WebAPICountries.Models
@using WebAPICountries.Blazor.Services
@inject NavigationManager Navigator

<h2>Client List</h2>

<button type="button" class="btn-primary btn-sm" @onclick="AddNewClient">Add New Client</button>
<table class="table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Department</th>
            <th>Salary</th>
            <th>Hire Date</th>
            <th>City</th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var client in clients)
        {
            <tr>
                <td>@client.Name</td>
                <td>@client.Department?.Name</td>
                <td>@client.Salary</td>
                <td>@client.HireDate</td>
                <td>@client.City?.Name</td>
                <td> <button type="button" class="btn-secondary btn-sm" @onclick="UpdateClient">Update</button></td>
                <td> <button type="button" class="btn-danger btn-sm" @onclick="DeleteClient">Delete</button></td>
            </tr>
        }
    </tbody>
</table>

@code {
    private List<Client>? clients;
    private ClientService? clientService;

    protected override void OnInitialized()
    {
        clientService = new ClientService();
        clients = clientService.GetAllClients();
    }

    private void AddNewClient()
    {
        Navigator.NavigateTo("/AddEditClient?id=0");
    }

    private void UpdateClient()
    {
        Navigator.NavigateTo("/AddEditClient?id=WHAT?");
    }

    private void DeleteClient()
    {
        clientService.DeleteClient(0);
    }
}

And how can I read the data passed to the uri in the page I switched to? I have this code file, and the uri would be:
"/AddEditClient?id=5", and the expected (for me) doesn't happen.

@page "/AddEditClient"

<h2>@title</h2>

@code {
    private int id;
    private string? title;

    protected override void OnInitialized()
    {
        if (id == 5)
            title = "Add New Client";
        else
            title = "Update Client";
    }
}

Thank you.
Pablo

 

[cjard]

OnClick expects either a method that takes no parameters, or a method that takes one (mouse event args). We cannot write a method that takes an int id and give it directly, so we use an adapter delegate that takes no args and calls our method with one arg, and that is delivered by the context in which the delegate is created:

... @onclick="_ = UpdateClient(client.Id)" ...

...
private void UpdateClient(int id)

"_ = UpdateClient(client.Id)" is the delegate that adapts what Blazor wants into our method needing to take an int id, which comes from the client.Id of each row

---

Passing parameters is done by annotating a property with [Parameter] and including it in the page directive

@page "/AddEditClient/{Id:int}"

...

  [Parameter]
  public int Id {get;set;}
---

And of course, with this pattern you put your id in the path, not the parameters

NavMan.NavigateTo"/AddEditClient/5"

If you want your parameter to be optional with this approach you have two @page directives, one that does have {parameter:type} one that does not, and if you landed on the page because you're doing an add and there is hence no id, your id property has its default value. You can also have a single page directive and provide a default when you navigate, that has special meaning like -1 means add

---

Try to use async wherever you can, by the way; Blazor is better geared up for using it. make your update and delete methods async etc

 

[Pablo]

Hi cjard
Thanks for your help.
By this:
... @onclick="_ = UpdateClient(client.Id)" ...
you mean this:
... @onclick="() => UpdateClient(client.Id)" ... ?

 

[cjard]

Either; doesn't matter. I prefer the discard version

 

[Pablo]

Really? When I typed the first it was all full of underlined (which means errors) ... I would have to test again ... Would I be missing an update in the C# language?

 

[cjard]

Oh, sorry, I missed a >

_ => UpdateClient(client.Id)"

Even missed it on the second reading!