如何用API返回数据填充C# Radzen下拉框并实现按分类筛选数据？

问题原因 #

你的下拉框为空是因为组件初始渲染时，API异步请求还未完成，此时apis变量为默认的null，你直接在RadzenDropDown的Data属性中执行apis.Select(...)会产生空引用，后续请求完成拿到数据后，也没有触发组件重渲染，所以下拉框一直没有内容。
原来从官方文档复制的OnChange方法只是示例代码，作用仅仅是在控制台打印下拉框的选中值，没有实际业务逻辑，你可以直接替换成自己的筛选逻辑。

修复步骤 #

1. 新增必要状态变量 #

在@code块中添加3个变量，分别存储选中的分类、所有去重后的分类列表、筛选后的API数据：

// 存储下拉框选中的分类
private string selectedCategory;
// 存储所有去重后的分类列表
private List<string> allCategories = new();
// 存储最终要展示的筛选后数据
private IEnumerable<Entry> filteredApis;

2. 调整数据加载逻辑 #

API请求成功后，填充分类列表和初始展示数据，同时手动触发组件重渲染：

protected override async Task OnInitializedAsync()
{
    try
    {
        alldata = await Http.GetFromJsonAsync<Root>("https://api.publicapis.org/entries");
        Console.WriteLine(alldata.count);
        apis = alldata.entries;
        // 初始化默认展示全部数据
        filteredApis = apis;
        // 预生成去重排序后的分类列表
        allCategories = apis.Select(a => a.Category).Distinct().OrderBy(c => c).ToList();
        // 通知组件刷新，更新下拉框内容
        StateHasChanged();
    }
    catch (Exception ex)
    {
        Console.WriteLine(ex.Message);
    }
}

3. 替换下拉框代码 #

调整RadzenDropDown的绑定逻辑，增加加载状态判断避免空引用：

<div class="col-lg-4 sticky-top">
    <h3>Categories</h3>
    @if (allCategories.Any())
    {
        <RadzenDropDown AllowClear="true" TValue="string" Style="width:300px"
                        Data="@allCategories"
                        @bind-Value="@selectedCategory"
                        Change="OnCategoryChanged" />
    }
    else
    {
        <p>分类加载中...</p>
    }
</div>

4. 实现筛选逻辑 #

替换原来的示例OnChange方法，实现选中分类后筛选数据的逻辑：

void OnCategoryChanged(string selected)
{
    // 下拉框清空时展示全部数据
    if (string.IsNullOrWhiteSpace(selected))
    {
        filteredApis = apis;
        return;
    }
    // 筛选分类匹配的数据
    filteredApis = apis.Where(entry => entry.Category == selected).ToList();
}

5. 数据展示绑定 #

你原本展示API列表的代码，把绑定的数据源从apis改成filteredApis即可，示例：

<!-- 示例展示列表，替换成你自己的展示逻辑即可 -->
@foreach (var api in filteredApis)
{
    <div class="card mb-2">
        <div class="card-body">
            <h5>@api.API</h5>
            <p>@api.Description</p>
            <span class="badge bg-secondary">@api.Category</span>
        </div>
    </div>
}

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