Blazor Server端实现带搜索的复选框式多选下拉框问询

步骤1：调整组件状态与依赖注入 #

首先修正组件逻辑中的问题，将HttpClient改为依赖注入（Blazor不建议重复实例化），并添加必要状态变量维护选中项、搜索文本和下拉面板状态：

@inject HttpClient Http
@inject IConfiguration config

<!-- UI部分见步骤2 -->

@code {
    private List<ServerNames> SimilarServers { get; set; } = new();
    private List<ServerNames> SelectedServers { get; set; } = new();
    private string SearchText { get; set; } = string.Empty;
    private bool IsDropdownOpen { get; set; } = false;

    // 生成选中项的显示文本
    private string SelectedDisplayText => string.Join(", ", SelectedServers.Select(s => s.Server_Name));

    // 实时搜索服务器
    private async Task SearchServers()
    {
        if (string.IsNullOrWhiteSpace(SearchText))
        {
            SimilarServers.Clear();
            return;
        }
        // 用查询参数传递搜索文本，避免URL编码问题
        var response = await Http.GetAsync($"{config["API_URL"]}ServerNames/GetSimilarServers?searchText={Uri.EscapeDataString(SearchText)}");
        if (response.IsSuccessStatusCode)
        {
            var result = await response.Content.ReadFromJsonAsync<ServerNames[]>(new JsonSerializerOptions { PropertyNameCaseInsensitive = true });
            SimilarServers = result?.ToList() ?? new();
        }
        else
        {
            SimilarServers.Clear();
            // 可在此添加错误提示逻辑
        }
    }

    // 切换单个服务器的选中状态
    private void ToggleServerSelection(ServerNames server)
    {
        if (SelectedServers.Contains(server))
        {
            SelectedServers.Remove(server);
        }
        else
        {
            SelectedServers.Add(server);
        }
    }

    // 切换下拉面板显示/隐藏
    private void ToggleDropdown()
    {
        IsDropdownOpen = !IsDropdownOpen;
    }
}

步骤2：编写UI组件（带复选框的下拉多选） #

替换原有的<select>标签，用自定义下拉面板实现带搜索的复选框多选功能（示例基于Bootstrap样式，可自行调整）：

<div class="dropdown">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" @onclick="ToggleDropdown">
        @(SelectedServers.Any() ? SelectedDisplayText : "-- 选择服务器 --")
    </button>
    @if (IsDropdownOpen)
    {
        <div class="dropdown-menu p-2" style="min-width: 280px;">
            <!-- 实时搜索输入框 -->
            <input type="text" class="form-control mb-2" placeholder="搜索服务器..." 
                   @bind="SearchText" @bind:event="oninput" @oninput="SearchServers" />
            
            <!-- 服务器列表与复选框 -->
            @if (SimilarServers.Any())
            {
                <div class="overflow-auto" style="max-height: 220px;">
                    @foreach (var server in SimilarServers)
                    {
                        <div class="form-check px-2 py-1">
                            <input class="form-check-input" type="checkbox" 
                                   id="server_@server.ServerID" 
                                   checked="@SelectedServers.Contains(server)"
                                   @onclick="() => ToggleServerSelection(server)" />
                            <label class="form-check-label ms-1" for="server_@server.ServerID">
                                @server.Server_Name
                            </label>
                        </div>
                    }
                </div>
            }
            else
            {
                <span class="text-muted px-2">无匹配服务器</span>
            }
        </div>
    }
</div>

步骤3：优化API接口（可选） #

为避免空搜索返回全量数据，同时简化路由逻辑，修改Web API控制器：

[HttpGet]
[Route("api/ServerNames/GetSimilarServers")]
public IActionResult GetSimilarServers([FromQuery] string searchText)
{
    if (string.IsNullOrWhiteSpace(searchText))
    {
        return Ok(new List<ServerNames>());
    }
    var serversName = _IserverNamesService.GetSimilarServers(searchText);
    return Ok(serversName);
}

核心逻辑说明 #

• 用SelectedServers集合维护选中的服务器实例，通过string.Join直接生成逗号分隔的显示文本
• 搜索输入框绑定oninput事件，实时触发API请求过滤服务器列表
• 复选框通过checked属性绑定选中状态，点击时调用ToggleServerSelection更新选中集合
• 下拉面板的显示/隐藏由IsDropdownOpen布尔值控制

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