Blazor MudTable子表格异常求助：点击新详情时隐藏旧子表

问题描述 #

我有一个带数据的MudTable，每行都有「显示详情」按钮，点击后展示对应子表格。目前存在两个问题：

• 点击另一条记录的「显示详情」时，之前打开的子表格不会自动隐藏
• 所有子表格都会加载最后一次点击记录的数据

原代码 #

Razor视图代码 #

@inject IModalService model
@inject IDialogService DialogService
@inject NavigationManager NavigationManager;
@inject ISnackbar Snackbar;
@inject KolejkowanieServices kolejkowanie_s;

@page "/KolejkowanieOkna"
<center>
    <h1>Kolejka Zleceń</h1>
</center>

<MudTabs Elevation="2" Rounded="true" ApplyEffectsToContainer="true" PanelClass="pa-6">
    <MudTabPanel Text="Kolejkowanie zleceń">
        <MudPaper Elevation="25">
            <MudToolBar>
                <MudIconButton Icon="@Icons.Material.Filled.Refresh" @onclick='Refresh' />
            </MudToolBar>
        </MudPaper>
        <MudTable T="KZlecen" Items="@kolejka_z" FixedHeader="true" FixedFooter="false" Height="@(fixed_header || fixed_footer ?"600px":"" )" CustomHeader="true" CustomFooter="true" Dense="true" Hover="true" Bordered="true" Striped="true" Breakpoint="Breakpoint.Sm" MultiSelection="false">
    <HeaderContent>
        <MudTh>L.p.</MudTh>
        <MudTh>Nr. opt</MudTh>
        <MudTh>Numer ZLC</MudTh>
        <MudTh>Data odbioru</MudTh>
        <MudTh>Status</MudTh>
        <MudTh>Podstatus</MudTh>
        <MudTh>Typ profila</MudTh>
        <MudTh>Kolory</MudTh>
        <MudTh>Jednostak okienna</MudTh>
               
    </HeaderContent>
    <RowTemplate>
        <MudTd Style="font-size: 10px" DataLabel="L.p.">@(kolejka_z.IndexOf(context) + 1)</MudTd>
            <MudTd Style="font-size: 10px"  DataLabel="Nr. opt">@context.kod_opt</MudTd>
            <MudTd Style="font-size: 10px" DataLabel="Numer ZLC">@context.zlecenie</MudTd>
            <MudTd Style="font-size: 10px" DataLabel="Data odbioru">@context.date.ToString("dd/MM/yyyy")</MudTd>
            <MudTd Style="font-size: 10px" DataLabel="Status">@context.stan</MudTd>
            <MudTd Style="font-size: 10px" DataLabel="Podstatus">@context.podstatus</MudTd>
            <MudTd Style="font-size: 10px" DataLabel="Typ profila">@context.dtypy</MudTd>
            <MudTd Style="font-size: 10px" DataLabel="Kolor">@context.kolor</MudTd>
            <MudTd Style="font-size: 10px" DataLabel="Jednostka okienna">@context.jednostki</MudTd>
                    <MudTd><MudButton Variant="Variant.Outlined" Size="Size.Small" OnClick="@(() => ToggleValue(context.srcdoc))"> <span> @(context.ShowDetails ? "Ukryj" : "Pokaż") </span></MudButton></MudTd> 
           
    </RowTemplate>
            <ChildRowContent>
                @if (context.ShowDetails)
                {
                    <MudTr>
                        <td colspan="6">
                            <MudCard Elevation="0">
                                <MudCardHeader>
                                    <CardHeaderContent>
                                        <MudText Typo="Typo.body1"><strong>@stan_o</strong></MudText>
                                    </CardHeaderContent>
                                </MudCardHeader>
                                <MudCardContent Class="pa-0">
                                    <MudTable  Items="@proc" Context="procencik" FixedHeader="@fixed_header" FixedFooter="false" Dense="true" Height="190px">
                                        <HeaderContent>
                                            
                                            <MudTh>Srcdoc</MudTh>
                                        </HeaderContent>
                                        <RowTemplate>
                                            <MudTd DataLabel="Indeks">@procencik.srcdoc</MudTd>
                                            <MudTd DataLabel="Ilość pozycji">@suma</MudTd>
                                        </RowTemplate>
                                    </MudTable>
                                </MudCardContent>
                            </MudCard>
                        </td>
                    </MudTr>
                }

            </ChildRowContent>
    <PagerContent>
            <MudTablePager PageSizeOptions="new int[]{30,50, 100,200}"  RowsPerPageString="Ilość wierszy na stronie:" />
        </PagerContent>
        
</MudTable>

C#后台方法 #

async void ToggleValue(int srcdoc)
{
    proc = new List<Procents>();
    KZlecen proctmp = new KZlecen();
    proctmp = kolejka_z.First(f => f.srcdoc == srcdoc);
    proctmp.ShowDetails = !proctmp.ShowDetails;
    proc = await Task.Run(() => kolejkowanie_s.pobierz_aktualnystan(Convert.ToInt32(srcdoc)));
    suma = proc.Count();
    StateHasChanged();
    proc.Clear();
}

修复方案 #

问题根源：

1. 所有子表格共用全局proc集合，导致数据被覆盖
2. 未处理其他行的ShowDetails状态，点击新行时旧行不会自动关闭

修复步骤：

1. 给KZlecen类添加子数据存储属性，让每行独立保存自己的子表格数据
2. 修改ToggleValue方法，切换当前行状态时自动关闭其他行，并将子数据存入当前行的专属属性
3. 更新Razor视图，子表格绑定当前行的专属数据，不再依赖全局变量

修改后的代码 #

第一步：更新KZlecen类 #

public class KZlecen
{
    // 原有属性保留
    public int srcdoc { get; set; }
    public string kod_opt { get; set; }
    public string zlecenie { get; set; }
    public DateTime date { get; set; }
    public string stan { get; set; }
    public string podstatus { get; set; }
    public string dtypy { get; set; }
    public string kolor { get; set; }
    public string jednostki { get; set; }

    // 添加以下属性
    public bool ShowDetails { get; set; } = false;
    public List<Procents> ChildData { get; set; } = new List<Procents>();
}

第二步：修改Razor视图 #

仅修改ChildRowContent部分，绑定当前行的专属子数据：

<!-- 其他代码不变，替换ChildRowContent -->
<ChildRowContent>
    @if (context.ShowDetails)
    {
        <MudTr>
            <td colspan="9"> <!-- 与表头列数保持一致，原表头共9列 -->
                <MudCard Elevation="0">
                    <MudCardHeader>
                        <CardHeaderContent>
                            <MudText Typo="Typo.body1"><strong>@context.stan</strong></MudText>
                        </CardHeaderContent>
                    </MudCardHeader>
                    <MudCardContent Class="pa-0">
                        <MudTable Items="@context.ChildData" Context="procencik" FixedHeader="@fixed_header" FixedFooter="false" Dense="true" Height="190px">
                            <HeaderContent>
                                <MudTh>Srcdoc</MudTh>
                                <MudTh>Ilość pozycji</MudTh>
                            </HeaderContent>
                            <RowTemplate>
                                <MudTd DataLabel="Indeks">@procencik.srcdoc</MudTd>
                                <MudTd DataLabel="Ilość pozycji">@context.ChildData.Count()</MudTd>
                            </RowTemplate>
                        </MudTable>
                    </MudCardContent>
                </MudCard>
            </td>
        </MudTr>
    }
</ChildRowContent>

第三步：修改ToggleValue方法 #

async Task ToggleValue(int srcdoc)
{
    // 定位当前点击的行
    var currentRow = kolejka_z.First(f => f.srcdoc == srcdoc);
    
    // 如果当前行已展开，直接关闭
    if (currentRow.ShowDetails)
    {
        currentRow.ShowDetails = false;
        StateHasChanged();
        return;
    }
    
    // 关闭所有其他行的详情
    foreach (var row in kolejka_z)
    {
        row.ShowDetails = false;
    }
    
    // 展开当前行并加载子数据
    currentRow.ShowDetails = true;
    currentRow.ChildData = await kolejkowanie_s.pobierz_aktualnystan(srcdoc);
    
    StateHasChanged();
}

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