Blazor Server多选下拉框点击清除按钮无法重置选中项求助

问题现状 #

点击清除按钮仅清空了appsdata.DatabaseList，但多选下拉框的选中状态未同步更新，无法实现清除所有选中项并选中第一个“--Select--”选项或移除焦点的需求。

核心原因 #

多选下拉框未与后端变量做双向绑定，UI的选中状态和后端数据完全脱节，仅修改appsdata.DatabaseList无法驱动UI更新。

解决方案 #

按以下步骤修改代码，实现数据与UI的同步：

1. 声明用于存储选中项的变量，确保UI状态有对应的数据源
2. 给<select>标签添加双向绑定，让UI跟随数据变化
3. 完善Clear方法，同步修改选中项变量，触发UI更新

修改后的完整代码 #

前端部分

<div class="col-md-4 col-lg-3">
    <div style="align-items: center;display:flex;flex-direction: row;">
        <div style="display:flex; flex-direction: row; align-items: center;">
            <span class="text-sm mb-0 text-capitalize font-weight-bold required"
                  style="width:150px;margin-top:-50px;">Database Name</span>
            &nbsp;&nbsp;
            <!-- 添加@bind-value实现双向绑定 -->
            <select id="databaseSelect" class="form-select" 
                    @bind-value="Selecteddatabase" 
                    @onchange="SelecteddatabaseChanged"
                    style="width:300px;margin-left:-20px;height:100px;" 
                    multiple>
                @if (databasenames.Any())
                {
                    <option value="0">--Select--</option>
                    @foreach (var serv in databasenames)
                    {
                        <option value="@serv.databaseName">
                            @serv.databaseName
                        </option>
                    }
                }
            </select>
        </div>
    </div>
</div>
<button type="button" class="btn btn-primary"
        style="width:140px;color: #fff !important;background-color:#ccc !important;" 
        @onclick="Clear">
    Clear
</button>

后端代码部分

@code {
    private IEnumerable<DatabaseClass> databasenames = Array.Empty<DatabaseClass>();
    private ApplicationsData appsdata = new ApplicationsData();
    // 声明选中项数组，用于双向绑定多选下拉框
    private string[] Selecteddatabase = Array.Empty<string>();
    // 若需要移除焦点，注入IJSRuntime
    // [Inject] private IJSRuntime JSRuntime { get; set; }

    public class DatabaseClass
    {
        public int databaseId { get; set; }
        public string databaseName { get; set; }
    }

    public class ApplicationsData
    {
        public string DatabaseList { get; set; }
    }

    void SelecteddatabaseChanged(ChangeEventArgs e)
    {
        if (e.Value is not null)
        {
            Selecteddatabase = (string[])e.Value;
            appsdata.DatabaseList = string.Join(", ", Selecteddatabase);
        }
    }

    public void Clear()
    {
        // 方案1：清除所有选中项，无默认选中
        Selecteddatabase = Array.Empty<string>();
        
        // 方案2：清除所有选中项并选中第一个"--Select--"选项
        // Selecteddatabase = new[] { "0" };

        appsdata.DatabaseList = "";

        // 可选：移除下拉框焦点（需开启上方IJSRuntime注入）
        // await JSRuntime.InvokeVoidAsync("() => document.getElementById('databaseSelect').blur()");
    }
}

关键说明 #

• @bind-value="Selecteddatabase"：实现数据与UI的双向绑定，当Selecteddatabase数组变化时，下拉框的选中状态会自动同步更新。
• Clear方法中修改Selecteddatabase后，Blazor会自动触发组件重新渲染，更新下拉框UI。
• 若需要移除下拉框焦点，需注入IJSRuntime并调用JS代码实现（代码中已注释，按需启用）。

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