如何在MudBlazor表格中触发ChildRowContent的动态内容加载？

核心思路 #

借助MudTable的OnRowExpand事件触发子数据加载，同时在主数据模型中维护子数据、加载状态及错误信息，避免重复请求并优化用户体验。

步骤1：定义数据模型 #

在主数据模型中添加子数据存储、加载状态和错误信息字段：

public class ParentItem
{
    public int Id { get; set; }
    public string Name { get; set; }
    // 存储子数据
    public List<ChildItem> ChildItems { get; set; } = new();
    // 标记是否正在加载子数据
    public bool IsLoadingChildren { get; set; }
    // 存储加载错误信息
    public string LoadChildrenError { get; set; }
}

public class ChildItem
{
    public int Id { get; set; }
    public string Detail { get; set; }
}

步骤2：配置MudTable并绑定事件 #

在Razor组件中开启表格行展开功能，绑定OnRowExpand事件，并在ChildRowContent中根据状态渲染对应内容：

<MudTable Items="@ParentItems" Hover="true" RowClickEvent="RowClickEvent.None" ExpandableRows="true" OnRowExpand="HandleRowExpand">
    <HeaderContent>
        <MudTh>ID</MudTh>
        <MudTh>名称</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd>@context.Id</MudTd>
        <MudTd>@context.Name</MudTd>
    </RowTemplate>
    <ChildRowContent>
        @{
            var parent = context as ParentItem;
        }
        @if (parent.IsLoadingChildren)
        {
            <MudProgressCircuit Size="Size.Small" Class="d-flex justify-center my-4"/>
        }
        else if (!string.IsNullOrEmpty(parent.LoadChildrenError))
        {
            <MudAlert Severity="Severity.Error" Class="my-4">加载失败：@parent.LoadChildrenError</MudAlert>
        }
        else if (parent.ChildItems.Any())
        {
            <MudTable Items="@parent.ChildItems" Bordered="true" Size="Size.Small" Class="m-4">
                <HeaderContent>
                    <MudTh>子项ID</MudTh>
                    <MudTh>详情</MudTh>
                </HeaderContent>
                <RowTemplate>
                    <MudTd>@context.Id</MudTd>
                    <MudTd>@context.Detail</MudTd>
                </RowTemplate>
            </MudTable>
        }
        else
        {
            <MudAlert Severity="Severity.Info" Class="my-4">暂无子数据</MudAlert>
        }
    </ChildRowContent>
</MudTable>

步骤3：实现加载逻辑 #

在组件代码中编写HandleRowExpand方法，处理HTTP请求及状态更新：

@inject HttpClient Http

private List<ParentItem> ParentItems { get; set; } = new();

protected override async Task OnInitializedAsync()
{
    // 初始化加载主表格数据
    ParentItems = await Http.GetFromJsonAsync<List<ParentItem>>("api/parents");
}

private async Task HandleRowExpand(TableRowExpandEventArgs<ParentItem> args)
{
    var parent = args.Item;
    // 避免重复加载
    if (parent.ChildItems.Any() || parent.IsLoadingChildren) return;

    try
    {
        parent.IsLoadingChildren = true;
        StateHasChanged(); // 立即更新UI显示加载状态

        // 发起HTTP请求加载对应子数据
        parent.ChildItems = await Http.GetFromJsonAsync<List<ChildItem>>($"api/parents/{parent.Id}/children");
        parent.LoadChildrenError = null;
    }
    catch (Exception ex)
    {
        parent.LoadChildrenError = ex.Message;
    }
    finally
    {
        parent.IsLoadingChildren = false;
        StateHasChanged();
    }
}

关键细节说明 #

• 避免重复请求：通过检查ChildItems是否已有数据或是否正在加载，防止同一行多次触发请求。
• 即时UI更新：设置IsLoadingChildren后立即调用StateHasChanged()，确保加载指示器及时显示。
• 错误处理：捕获请求异常并存储错误信息，在子行中展示友好提示。

内容的提问来源于stack exchange，提问作者Shawn de Wet