Button in MudBlazor table not routing to different page

Question

I’m new with both Blazor and MudBlazor. I was following along with a video on MudBlazor and I like how it can quickly have both filtering and sorting. However, now I’m trying to have some buttons for in the table row for CRUD operations on a record. I can’t seem to get it to route to another page nor have a been able to find a way to pass the record ID to a function. I’ve tried both a MudButton and a Bootstrap button and can’t get either to work.

In the code below I have a button that I would like to a different page as well as an Edit button I would like to navigate to another page while passing along the record ID. When I run this and try to go to the Groups button nothing happens. No errors, just not routing to another page.

Anyone know what I’m missing or maybe a example I can follow?

<MudTable Items="@listApplications" Dense="true" Hover="true" Bordered="true" Striped="true" 
        Filter="new Func<Application,bool>(FilterFunc1)" @bind-SelectedItem="selectedApplication">
        <ToolBarContent>
            <MudTextField @bind-Value="searchString" Placeholder="Search" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
        </ToolBarContent>
        <HeaderContent>
            <MudTh>Name</MudTh>
            <MudTh>Description</MudTh>
            <MudTh></MudTh>
        </HeaderContent>
        <RowTemplate>
            <MudTd DataLabel="Name">@context.Name</MudTd>
            <MudTd DataLabel="Description">@context.Description</MudTd>
            <MudTd>
                <button type="button" class="btn btn-secondary btn-sm" onclick="GoToGroups()">Groups</button>
                <button class="btn btn-primary btn-sm" >
                    Edit
                </button>
                <button type="button" class="btn btn-danger btn-sm">Delete</button>
            </MudTd>
        </RowTemplate>
        <PagerContent>
            <MudTablePager />
        </PagerContent>
    </MudTable>

@code {
    private List<Application>? listApplications;

    private string searchString = "";
    private Application selectedApplication = null;

    protected override async Task OnInitializedAsync()
    {
        listApplications = await _db.GetApplications();
    }

    private bool FilterFunc1(Application app) => FilterFunc(app, searchString);

    private bool FilterFunc(Application app, string searchString)
    {
        if (string.IsNullOrWhiteSpace(searchString))
            return true;
        if (app.Description.Contains(searchString, StringComparison.OrdinalIgnoreCase))
            return true;
        if (app.Name.Contains(searchString, StringComparison.OrdinalIgnoreCase))
            return true;

        return false;
    }



    void ShowApplication(int id)
    {
        NavigationManager.NavigateTo($"ApplicationMgmt/{id}");
    }

    void CreateNewApplication()
    {
        NavigationManager.NavigateTo("ApplicationMgmt");
    }

    void GoToGroups()
    {
        NavigationManager.NavigateTo("Groups");
    }
}

Answer 1

In Blazor you specify an event handler using the syntax @on{DOM EVENT}="{DELEGATE}".

So you need to use @onclick="GoToGroups" instead of onclick="GoToGroups()".

Blazor event handling

To pass parameters you can use this syntax: @onclick="() => ShowApplication(100)". So for your example:

<RowTemplate>
    <MudTd DataLabel="Name">@context.Name</MudTd>
    <MudTd DataLabel="Description">@context.Description</MudTd>
    <MudTd>
        <button type="button" class="btn btn-secondary btn-sm" @onclick="GoToGroups">Groups</button>
        <button class="btn btn-primary btn-sm" @onclick="() => ShowApplication(context.Id)">
            Edit
        </button>
        <button type="button" class="btn btn-danger btn-sm">Delete</button>
    </MudTd>
</RowTemplate>