Blazor点击按钮加载TelerikGrid显示为空问题求助

问题描述 #

点击按钮后调试确认resultTableData已包含6条数据，但TelerikGrid始终显示为空。已尝试调整异步方法签名、修改await使用方式、调用InvokeAsync(StateHasChanged)等操作，均未解决问题。

组件代码 #

前端代码

<button id="btnKltClms" class="slikaButton" @onclick="TestClick" hidden="@isBtnKltClmsHidden"></button>

<div hidden="@isTbResultsHidden"> 
    <TelerikGrid Data="@resultTableData">
        <GridColumns>
            <GridColumn Field="@nameof(ResultTableRow_Klt_Clms.CompanyName)" Title="חברה" />
            <GridColumn Field="@nameof(ResultTableRow_Klt_Clms.CompanyNumber)" Title="מספר חברה" />
            <GridColumn Field="@nameof(ResultTableRow_Klt_Clms.DeliveryNumber)" Title="מספר משלוח" />
            <GridColumn Field="@nameof(ResultTableRow_Klt_Clms.RecordedEntriesNumber)" Title="מספר רשומות שנקלטו" />
            <GridColumn Field="@nameof(ResultTableRow_Klt_Clms.ShguimEntriesNumber)" Title="מספר רשומות שגויות" />
        </GridColumns>
    </TelerikGrid> 
</div>

代码后置文件

async Task TestClick()
{
    resultTableData.Clear();
    for (int i = 0; i <= 5; i++)
    {
        current_Company1 = $"curComp{i}";
        current_Company_name1 = $"curCompName{i}";
        CURRENT_MISHLOACH1 = $"mishloah{i}";
        TOTAL_SHG_D1 = $"totalShg{i}";
        await BuildResultTable();
    }
    StateHasChanged();
}

async Task BuildResultTable()
{
    resultTableData.Add(new ResultTableRow_Klt_Clms
    {
        CompanyName = StringUtil.Reverse(current_Company_name1),
        CompanyNumber = current_Company1.ToString(),
        DeliveryNumber = CURRENT_MISHLOACH1.ToString(),
        RecordedEntriesNumber = (recordarr.Length - 2).ToString(),
        ShguimEntriesNumber = TOTAL_SHG_D1.ToString()
    });
    isTbResultsHidden = false;
    isLabelErrorHidden = false;
    StateHasChanged();
}

解决思路 #

1. 更换支持变更通知的集合类型 #

TelerikGrid需要绑定的集合实现INotifyCollectionChanged接口才能自动感知数据变化。如果resultTableData是普通List<T>，即使手动调用StateHasChanged，也可能因为集合无变更通知导致表格不刷新。

• 将resultTableData的类型改为ObservableCollection<ResultTableRow_Klt_Clms>
• 集合元素新增/移除时会自动触发组件更新，无需频繁调用StateHasChanged

2. 简化异步逻辑，避免冗余状态更新 #

当前循环中多次调用异步方法并重复触发状态更新，可能导致UI更新混乱。优化后的逻辑：

async Task TestClick()
{
    resultTableData.Clear();
    isTbResultsHidden = false;
    isLabelErrorHidden = false;

    for (int i = 0; i <= 5; i++)
    {
        resultTableData.Add(new ResultTableRow_Klt_Clms
        {
            CompanyName = StringUtil.Reverse($"curCompName{i}"),
            CompanyNumber = $"curComp{i}",
            DeliveryNumber = $"mishloah{i}",
            RecordedEntriesNumber = (recordarr.Length - 2).ToString(),
            ShguimEntriesNumber = $"totalShg{i}"
        });
    }
    // 使用ObservableCollection时无需调用StateHasChanged
    // 若仍用List，此处调用一次即可
    // StateHasChanged();
}

3. 验证数据模型属性的可访问性 #

• 确保ResultTableRow_Klt_Clms的所有属性都是public修饰，TelerikGrid需要访问公共属性来渲染列
• 检查@nameof引用的属性名称是否拼写正确，名称不匹配会导致列无法绑定数据

4. 排查异步方法的无意义标记 #

BuildResultTable方法内没有实际异步操作，无需标记为async Task，改为同步方法可避免异步状态机的潜在问题：

void BuildResultTable()
{
    resultTableData.Add(new ResultTableRow_Klt_Clms
    {
        // 属性赋值逻辑...
    });
    isTbResultsHidden = false;
    isLabelErrorHidden = false;
}

5. 确认集合初始化时机 #

确保resultTableData在组件初始化阶段就完成实例化，比如在OnInitialized中初始化：

protected override void OnInitialized()
{
    resultTableData = new ObservableCollection<ResultTableRow_Klt_Clms>();
    isTbResultsHidden = true;
    isLabelErrorHidden = true;
}

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