Blazor获取列唯一值并关联另一列用于下拉选择框

核心问题修复步骤 #

1. 让UI能访问result变量 #

你在OnInitializedAsync里定义的result是局部变量，Blazor的UI模板只能读取组件类的成员字段/属性。解决方法是把result声明为组件的成员变量，类型用元组数组即可。

2. 修正Console.WriteLine的语法错误 #

你写的Console.WriteLine(item => $"name: {item.name}, desc: {item.kind}")是错误用法：Console.WriteLine不需要lambda表达式，直接传字符串插值即可；另外元组里的字段是desc不是kind，要对应正确。

3. 修复JSON数据源格式 #

你的JSON里字符串值没加双引号，属于无效JSON，必须修正为标准格式才能被GetFromJsonAsync正确解析。

修正后的完整代码 #

@page "/"
@inject HttpClient httpClient
@inject IJSRuntime JSRuntime

@if (result != null)
{     
    <select required @bind="selectedName">
        <option value="" disabled selected hidden>Search by Description</option>
        @foreach (var r in result)
        {
            <option value="@r.name">@r.desc</option>
        }
    </select>
    <!-- 可选：显示选中的结果 -->
    <p>已选名称：@selectedName</p>
}

@code{
    // 声明为组件成员变量，让UI可以访问
    private (string name, string desc)[] result;
    private Item[] data;
    private string selectedName; // 存储下拉框选中的值

    public class Item
    {
        public string name { get; set; }
        public string desc { get; set; }             
        public int point { get; set; }
    }  

    protected override async Task OnInitializedAsync()
    {
        data = await httpClient.GetFromJsonAsync<Item[]>("sample-data/dataFile.json"); 
        await JSRuntime.InvokeVoidAsync("console.log", "data ", data);
  
        // 分组逻辑保持不变，赋值给成员变量result
        result = data
            .GroupBy(item => item.name, item => item.desc)
            .Select(group => (name: group.Key, desc: group.First()))
            .ToArray();
            
        await JSRuntime.InvokeVoidAsync("console.log", "result", result);

        // 修正后的Console.WriteLine写法
        foreach (var item in result)
        {
            Console.WriteLine($"name: {item.name}, desc: {item.desc}");
        }     
    } 
}

修正后的JSON数据源（sample-data/dataFile.json） #

[
    {"name": "A", "desc": "fragile", "point":70},
    {"name": "A", "desc": "sturdy", "point":80},
    {"name": "C", "desc": "hard", "point":100},
    {"name": "C", "desc": "soft", "point":150}
]

额外说明 #

• 下拉框绑定的selectedName是用来存储选中值的变量，原代码里的bind="desc"是错误的，因为desc不是组件的成员字段。
• 分组逻辑GroupBy(item => item.name, item => item.desc)会按name去重，然后取每组的第一个desc，完全符合你期望的结果集格式。

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