如何在Blazor中点击MudButton实现页面跳转？

针对你的需求，这里提供几种Blazor原生的实现方式，比用JS操作DOM更合适：

1. 直接使用MudButton的Href属性（最简方案） #

MudButton组件原生支持Href属性，直接指定目标路由地址就能实现跳转，不需要额外逻辑：

<MudButton Href="/your-target-page" 
           ButtonType="ButtonType.Button" 
           Variant="Variant.Filled" 
           Color="Color.Primary" 
           Class="ml-auto">
    Cancel
</MudButton>

如果需要在新标签页打开，可以添加Target="_blank"属性。

2. 通过NavigationManager实现带逻辑的跳转 #

如果需要在跳转前执行一些业务逻辑（比如表单验证、数据保存），可以借助Blazor内置的NavigationManager服务：

首先在组件顶部注入服务：

@inject NavigationManager NavManager

然后修改按钮的OnClick事件：

<MudButton ButtonType="ButtonType.Button" 
           OnClick="@HandleCancelClick" 
           Variant="Variant.Filled" 
           Color="Color.Primary" 
           Class="ml-auto">
    Cancel
</MudButton>

@code {
    private void HandleCancelClick()
    {
        // 这里添加跳转前的逻辑，比如提示确认、清理数据等
        NavManager.NavigateTo("/your-target-page");
    }
}

3. 不推荐：通过JS互操作跳转 #

虽然可以用你熟悉的JS方式实现，但这种方法依赖浏览器环境，不符合Blazor的组件化思路，仅作为参考：

先注入IJSRuntime：

@inject IJSRuntime JSRuntime

然后调用JS方法：

<MudButton ButtonType="ButtonType.Button" 
           OnClick="@NavigateViaJs" 
           Variant="Variant.Filled" 
           Color="Color.Primary" 
           Class="ml-auto">
    Cancel
</MudButton>

@code {
    private async Task NavigateViaJs()
    {
        await JSRuntime.InvokeVoidAsync("eval", "window.location.href = '/your-target-page'");
    }
}

总结 #

优先选择第一种方案，简洁高效；需要业务逻辑时用第二种；第三种尽量避免使用。

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