如何在MudBlazor中处理MudExpansionPanel的展开/点击事件并调用接口？

问题1：点击新面板时旧面板不自动关闭 #

你设置了MultiExpansion="true"，这个属性的作用就是允许同时展开多个面板。要实现点击新面板自动关闭旧面板，只需移除该属性或者将其设为false：

<MudExpansionPanels> <!-- 去掉MultiExpansion="true" 或设置为MultiExpansion="false" -->

问题2：无法调用GetComments获取并展示数据 #

MudExpansionPanel不存在Onclick属性，正确做法是使用ExpandedChanged事件，并且仅在面板展开时调用数据获取方法。另外，全局的data变量会导致多个面板共用数据，建议改用字典存储每个博客的评论，避免数据混乱：

修改后的完整代码 #

<MudExpansionPanels>
  @foreach (var blog in blogs)
  {
    <MudExpansionPanel Text="@blog.Title" ExpandedChanged="(expanded) => OnPanelExpanded(expanded, blog.Id)">
      @if (_blogComments.TryGetValue(blog.Id, out var comments))
      {
        foreach (var item in comments.Response)
        {
          <p>@item.Comment</p>
          <p>@item.Author</p>
        }
      }
      else
      {
        <p>加载中...</p>
      }
    </MudExpansionPanel>
  }
</MudExpansionPanels>

// 用字典存储每个博客的评论，key为博客ID，value为对应评论数据
private Dictionary<int, CommentsDto> _blogComments = new Dictionary<int, CommentsDto>();

private async Task OnPanelExpanded(bool expanded, int blogId)
{
    // 仅在面板展开时获取数据
    if (expanded)
    {
        // 已加载过该博客评论则直接返回，避免重复请求
        if (_blogComments.ContainsKey(blogId)) return;
        
        var query = new YourQueryType(); // 替换成你的Query具体类型
        query.Id = blogId;
        var comments = await Mediator.Send(query);
        _blogComments[blogId] = comments;
        // 通知UI更新数据
        StateHasChanged();
    }
}

关键说明 #

• 用ExpandedChanged事件替代不存在的Onclick，该事件会在面板展开/折叠状态变更时触发，参数expanded表示当前是否处于展开状态。
• 借助字典存储每个博客的独立评论数据，避免不同面板的数据互相覆盖。
• 添加加载状态提示，优化用户等待体验。
• 获取数据后调用StateHasChanged()确保UI及时更新（若MudBlazor未自动触发更新时）。

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