Blazor下拉框仅显示唯一值实现求助

核心问题 #

当前下拉框直接遍历所有items生成选项，而items中存在多个相同location的条目，导致重复显示。需要先提取唯一的地理位置值，再用去重后的列表生成下拉选项。

步骤1：生成去重的地理位置列表 #

取消OnInitializedAsync中locationDropDown的注释，修正代码并添加空值过滤：

protected override async Task OnInitializedAsync()
{
    items = (await ItemService.GetItems())
        .GroupBy(x => x.ItemKey)
        .Select(x => new DisplayItem
        {
            ItemKey = x.Key,
            Id = x.FirstOrDefault(y => y.Key == "Id")?.Value,
            Location = x.FirstOrDefault(y => y.Key == "Location")?.Value,
        })
        .ToList();

    // 提取唯一且非空的地理位置，转成DisplayItem数组
    locationDropDown = items
        .Select(x => x.Location)
        .Where(loc => !string.IsNullOrEmpty(loc))
        .Distinct()
        .Select(loc => new DisplayItem { Location = loc })
        .ToArray(); 
}

步骤2：修改前端下拉框的遍历对象 #

将遍历items改为遍历去重后的locationDropDown，同时修正Blazor双向绑定的语法（@bind而非bind）：

@if (locationDropDown != null && locationDropDown.Any())
{
    <select required class="col-sm-10" @bind="searchByLocation" @onchange="LocationOnChange">
        <option value="" disabled selected hidden>Search By Location</option>
        @foreach (var r in locationDropDown)
        {
            <option value="@r.Location">@r.Location</option>
        }
    </select>
}

补充说明 #

• Blazor双向绑定必须使用@bind语法，原代码中的bind会导致绑定失效。
• 统一使用实体类中定义的Location（首字母大写）属性，避免大小写不一致引发的错误。
• 空值过滤逻辑Where(loc => !string.IsNullOrEmpty(loc))可避免下拉框出现空白选项，若不需要可直接移除。
• 原筛选逻辑LocationChanged无需修改，依然基于原始items列表进行匹配。

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