MudBlazor表格内按钮无法路由至其他页面的问题求助

核心问题分析 #

你的代码存在三个关键问题导致按钮无响应或功能失效：

• 普通HTML按钮使用了原生onclick（JavaScript事件），无法直接触发Blazor的C#方法，必须使用Blazor专属的@onclick指令。
• 代码中调用了NavigationManager但未注入该服务，Blazor无法自动实例化路由服务。
• Edit按钮未传递当前行的记录ID参数，无法实现带参跳转。

修正后的完整代码 #

@inject NavigationManager NavigationManager

<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>
                <!-- 改用Blazor的@onclick指令绑定C#方法 -->
                <button type="button" class="btn btn-secondary btn-sm" @onclick="GoToGroups">Groups</button>
                <!-- 通过lambda表达式传递当前行的记录ID -->
                <button class="btn btn-primary btn-sm" @onclick="() => ShowApplication(context.Id)">
                    Edit
                </button>
                <button type="button" class="btn btn-danger btn-sm" @onclick="() => DeleteApplication(context.Id)">
                    Delete
                </button>
            </MudTd>
        </RowTemplate>
        <PagerContent>
            <MudTablePager />
        </PagerContent>
    </MudTable>

@code {
    private List<Application>? listApplications;

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

    // 通过属性注入NavigationManager服务
    [Inject]
    private NavigationManager NavigationManager { get; set; }

    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");
    }

    // 补充删除方法示例
    void DeleteApplication(int id)
    {
        // 此处添加删除逻辑，例如调用数据层删除接口后刷新列表
        // listApplications = listApplications?.Where(a => a.Id != id).ToList();
    }
}

关键修改点说明 #

1. 注入NavigationManager：
   在组件顶部添加@inject NavigationManager NavigationManager，或在@code块中通过[Inject]属性注入，确保Blazor能提供路由服务实例。
2. 替换按钮事件为@onclick：
   原生onclick是JavaScript事件，无法直接调用C#方法，改为@onclick后可直接绑定C#方法名（无参数场景）。
3. 传递行记录ID：
   对于需要参数的方法（如Edit、Delete），使用lambda表达式@onclick="() => ShowApplication(context.Id)"，通过context获取当前行的Application对象并提取ID参数。
4. 可选：改用MudButton：
   若使用MudBlazor组件库，按钮写法类似，示例如下：

   <MudButton Size="Size.Small" Color="Color.Secondary" OnClick="GoToGroups">Groups</MudButton>
   <MudButton Size="Size.Small" Color="Color.Primary" OnClick="() => ShowApplication(context.Id)">Edit</MudButton>
   

内容的提问来源于stack exchange，提问作者Caverman