在Blazor中切换MudTabs时调用函数的实现方法

MudTabs组件自带OnTabChanged事件，专门用于标签切换时触发自定义逻辑。只需给MudTabs绑定该事件，并在代码后端实现对应的处理方法即可。

步骤1：修改MudTabs组件，绑定切换事件 #

在你的Razor代码中，给<MudTabs>添加OnTabChanged属性，绑定到自定义处理方法：

<MudTabs Elevation="2" Rounded="true" ApplyEffectsToContainer="true" PanelClass="pa-6"
         OnTabChanged="HandleTabChanged">
    <MudTabPanel Text="Tab One" PanelId="tab1">
        <MudText>Content One</MudText>
    </MudTabPanel>
    <MudTabPanel Text="Tab Two" PanelId="tab2">
        <MudText>Content Two</MudText>
    </MudTabPanel>
    <MudTabPanel Text="Tab Three" PanelId="tab3">
        <MudText>Content Three</MudText>
    </MudTabPanel>
</MudTabs>

给每个MudTabPanel加上PanelId，能更方便地在处理方法中识别具体切换到的标签，也可以直接通过Text属性判断。

步骤2：实现事件处理方法 #

在Razor页面的@code块或对应的.razor.cs文件中，添加处理方法，参数TabChangedEventArgs包含当前选中标签的所有信息：

@code {
    private void HandleTabChanged(TabChangedEventArgs args)
    {
        // 获取选中标签的文本和ID
        var selectedTabText = args.PanelText;
        var selectedTabId = args.PanelId;

        // 执行你的自定义逻辑，比如打印日志、加载数据
        Console.WriteLine($"切换到标签：{selectedTabText}（ID：{selectedTabId}）");
        // 调用你的业务函数
        RunYourBusinessLogic(selectedTabText);
    }

    private void RunYourBusinessLogic(string tabName)
    {
        // 这里写具体业务逻辑
        Console.WriteLine($"业务函数触发，当前标签：{tabName}");
    }
}

异步逻辑处理 #

如果需要执行异步操作（比如从API加载数据），可以把处理方法改成异步形式：

private async Task HandleTabChanged(TabChangedEventArgs args)
{
    await LoadTabDataAsync(args.PanelText);
}

private async Task LoadTabDataAsync(string tabName)
{
    // 模拟异步加载数据
    await Task.Delay(1000);
    Console.WriteLine($"已加载{tabName}的异步数据");
}

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