MudBlazor中展开MudDataGrid子行时加载对应行评论数据

你可以通过MudDataGrid的OnRowExpand事件实现点击展开图标时加载对应行的评论，同时需要调整评论的存储方式，避免所有子行共享同一数据。以下是修改后的完整代码：

<MudDataGrid T="UserDetails" OnRowExpand="HandleRowExpand">
    <Columns>
        <HierarchyColumn T="UserDetails" />
        <PropertyColumn HeaderStyle="font-weight:bold;width:2%;" Property="x => x.Id" Title="Id" Resizable="true" Filterable="false" />
    </Columns>
    <ChildRowContent>
        <MudCard>
            <MudCardHeader>
                <CardHeaderContent>
                    <MudText Style="font-weight:bold" Typo="Typo.h6">Comments</MudText>
                </CardHeaderContent>
            </MudCardHeader>
            <MudCardContent>
                @if (_loadingIds.Contains(context.Id))
                {
                    <MudCircularProgress Size="Size.Small" />
                }
                else if (_userComments.TryGetValue(context.Id, out var comments))
                {
                    @foreach (var comment in comments)
                    {
                        <MudText>@comment.Comments </MudText>
                    }
                }
                else
                {
                    <MudText>No comments found.</MudText>
                }
            </MudCardContent>
        </MudCard>
    </ChildRowContent>
</MudDataGrid>

@code {
    // 用字典存储每个用户对应的评论，key为用户Id
    private Dictionary<int, List<Comments>> _userComments = new();
    // 记录正在加载评论的用户Id，避免重复请求
    private HashSet<int> _loadingIds = new();
    
    private async Task<GridData<UserDetails>> LoadData(GridState<UserDetails> state)
    {
        var data = await Service.GetUserData();
        return new GridData<UserDetails>() { TotalItems = total, Items = data };
    }

    private async Task<List<Comments>> GetComments(int id)
    {
       return await Service.GetComments(id);
    }

    // 处理行展开事件
    private async Task HandleRowExpand(UserDetails user)
    {
        // 已加载或正在加载时直接返回
        if (_userComments.ContainsKey(user.Id) || _loadingIds.Contains(user.Id))
            return;
        
        _loadingIds.Add(user.Id);
        try
        {
            var comments = await GetComments(user.Id);
            _userComments[user.Id] = comments;
        }
        finally
        {
            _loadingIds.Remove(user.Id);
        }
        // 通知组件更新UI
        StateHasChanged();
    }
}

关键修改说明： #

• 把全局的_rowComments替换为Dictionary<int, List<Comments>>，确保每个用户的评论独立存储
• 添加OnRowExpand事件绑定，点击展开图标时自动触发HandleRowExpand方法，传入当前行的UserDetails对象
• 增加_loadingIds集合防止重复发起加载请求，同时在子行显示加载状态
• 在ChildRowContent中通过context.Id（当前行的用户Id）获取对应评论并展示

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