1

I have a page that lists some data in a table, in the last column I have created a

<td>
  <a class="nav-link" href="Edit/@item.id">
   <span class="oi oi-pencil" aria-hidden="true">Edit</span>
  </a>
</td>

That open the Edit page, and send the id with it. Recently, I found Balzored library which allow creating modal (pop up like) dialogs.

If I need to open a page, I would

<NavLink class="nav-link" @onclick="@(()=>modal.Show<Create>("Create"))">
   Add New
</NavLink>

But how can I pass the @item.id to the Edit page in Blazored.

The Edit page has @page "/edit/{Id}" as the first line.

Arani
  • 891
  • 7
  • 18
Joe
  • 461
  • 1
  • 3
  • 15

1 Answers1

2

First, I would not make the modal a page, make it a component. That is the beauty of Blazor. In that modal, you would add a parameter. It could be the id and you could go look it up again, or you could just pass the entire item you want to edit:

Your "Edit" modal should have something like this, and no @page directive - just make it a component:

[CascadingParameter] BlazoredModalInstance BlazoredModal { get; set; } = default!;
[Parameter] public int ItemId { get; set; }

In the main page that holds the table, create a method to handle the click and open the modal:

private async Task OnEditItemAsync(int ItemId)
{
    var parameters = new ModalParameters()
        .Add(nameof(Create.Id), ItemId);
    Modal.Show<Create>("Modal Title", parameters);
    // Add code to handle the modal result or refresh the table
    StateHasChanged();
}

In your table column, add a button that calls the method:

<td>
    <button onclick="@(async () => await OnEditItemAsync(item.Id))">Edit</button>
</td>

https://blazored.github.io/Modal/usage/passing-data

Steve Greene
  • 12,029
  • 1
  • 33
  • 54
  • Thank you for your effort but I am getting null instead of the Edit page. – Joe Nov 01 '22 at 12:50
  • Did you setup a handler method? Personally, I would put a button in the column and then do an `onclick`. I will add it to my answer. – Steve Greene Nov 01 '22 at 14:15
  • Yes, the problem was the href, it gives null with the button it worked. Thanks. – Joe Nov 03 '22 at 06:43