TelerikGrid异步加载数据源无效问题求助

问题场景 #

尝试通过异步方式获取数据绑定TelerikGrid，但点击按钮后网格未显示数据，代码如下：

@page "/Test"
@using System.Dynamic;

<div class="col-md-12">
    <TelerikButton OnClick="ButtonClick">Click Me to see data</TelerikButton>
    <TelerikGrid Class="grid"
                 Data=@GridFilter
                 Sortable="true"
                 FilterMode="GridFilterMode.FilterMenu"
                 Resizable="true"
                 SelectionMode="GridSelectionMode.Multiple"
                 Pageable="true"
                 PageSize=20
                 Navigable="true">

        <GridColumns>
            <GridColumn Field="Field1" Title="Field1" />
            <GridColumn Field="Field2" Width="300px" Title="Field2" TextAlign="@ColumnTextAlign.Center" />
        </GridColumns>
    </TelerikGrid>
</div>

@code {
    private List<dynamic> GridFilter;

    private async Task ButtonClick()
    {
        GridFilter = await this.GetData();
    }

    private async Task<List<dynamic>> GetData()
    {
        Task<List<dynamic>> b = new(() => {
            dynamic A = new ExpandoObject();
            A.Field1 = "Field 1";
            A.Field2 = "Field 2";
            List<dynamic> grid = new();
            grid.Add(A);
            return grid;
        });
        return await b;
    }
}

问题原因 #

1. Blazor组件状态更新后未触发重新渲染：更新GridFilter后，没有调用StateHasChanged()通知组件刷新UI
2. GetData方法的异步写法冗余：手动创建Task实例不是标准异步编程方式，易引发不必要的线程问题

修复步骤 #

1. 在ButtonClick方法中更新数据源后，调用StateHasChanged()触发组件重新渲染
2. 简化GetData的异步实现，避免手动创建Task实例
3. 初始化GridFilter为空列表，避免初始状态下的空引用问题

修改后的完整代码 #

@page "/Test"
@using System.Dynamic;

<div class="col-md-12">
    <TelerikButton OnClick="ButtonClick">Click Me to see data</TelerikButton>
    <TelerikGrid Class="grid"
                 Data=@GridFilter
                 Sortable="true"
                 FilterMode="GridFilterMode.FilterMenu"
                 Resizable="true"
                 SelectionMode="GridSelectionMode.Multiple"
                 Pageable="true"
                 PageSize=20
                 Navigable="true">

        <GridColumns>
            <GridColumn Field="Field1" Title="Field1" />
            <GridColumn Field="Field2" Width="300px" Title="Field2" TextAlign="@ColumnTextAlign.Center" />
        </GridColumns>
    </TelerikGrid>
</div>

@code {
    // 初始化空列表，避免空引用
    private List<dynamic> GridFilter = new List<dynamic>();

    private async Task ButtonClick()
    {
        GridFilter = await GetData();
        // 通知组件状态变更，触发UI刷新
        StateHasChanged();
    }

    private async Task<List<dynamic>> GetData()
    {
        // 模拟数据库异步查询（实际替换为真实的数据库调用，如EF Core的ToListAsync）
        await Task.Delay(100); // 模拟异步延迟

        dynamic item = new ExpandoObject();
        item.Field1 = "Field 1";
        item.Field2 = "Field 2";
        var dataList = new List<dynamic> { item };

        return dataList;
    }
}

关键说明 #

• StateHasChanged()是Blazor中触发组件重新渲染的核心方法，异步更新数据后必须调用，否则UI无法同步更新
• 真实业务场景中，GetData应替换为实际的数据库异步查询逻辑，无需手动创建Task实例

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