Blazor C#中如何获取下拉多选框选中项并传递到C#变量

核心思路 #

当前选中值是在前端JS事件中获取的，需要通过Blazor提供的JS互操作能力，把前端拿到的选中项ID数组传递回C#端，再同步更新本地绑定的数据对象供业务逻辑使用。 #

具体实现步骤 #

1. 修改前端select标签的change事件 #

把原来直接打印日志的onchange逻辑，替换为「提取选中值 + 调用C#方法」的逻辑，同时简化option标签的选中状态写法：

<select name="field2" id="field2" multiple 
        multiselect-search="true" 
        multiselect-select-all="false" 
        multiselect-max-items="1" 
        onchange="(function(sel){
            // 从选中项集合中提取所有option的value，转为数字数组（和你的ItemID类型匹配）
            const selectedIds = Array.from(sel.selectedOptions).map(opt => Number(opt.value));
            // 调用C#端标记了JSInvokable的方法，第一个参数替换为你项目的实际程序集名
            DotNet.invokeMethodAsync('替换为你的项目程序集名称', 'ReceiveSelectedOptions', selectedIds);
        })(this)">
    @foreach (var itm in Items)
    {
        <option value="@itm.ItemID" selected="@itm.Selected">@itm.SelItms</option>
    }
</select>

如果需要动态加载选项后自动同步值，把原有加载按钮的onclick逻辑修改为加载完成后主动触发change事件：

<button class="btn btn-light" onclick="field2.innerHTML='<option value=1>New option 1</option><option selected value=2>New option 2</option><option value=3>New option 3</option>';field2.loadOptions();field2.dispatchEvent(new Event('change'))">Load new options</button>

2. 修改C#端代码，添加JS可调用的接收方法 #

在@code块中添加标记[JSInvokable]特性的公共方法，接收前端传回的选中值，同步更新本地数据：

@code
{
    [Parameter]
    public List<MultiSelectList> Items { get; set; } = null!;

    // 存储选中项的ID集合
    private List<int> _selectedItemIds = new();
    // 存储选中的完整选项对象，业务逻辑直接取这个属性用即可
    public List<MultiSelectList> SelectedItems { get; set; } = new();

    /// <summary>
    /// JS端调用的选中值接收方法
    /// </summary>
    /// <param name="selectedIds">前端传回的选中项ID数组</param>
    [JSInvokable]
    public Task ReceiveSelectedOptions(int[] selectedIds)
    {
        _selectedItemIds = selectedIds.ToList();
        // 同步更新所有选项的选中状态
        foreach (var item in Items)
        {
            item.Selected = _selectedItemIds.Contains(item.ItemID);
        }
        // 组装完整的选中项对象
        SelectedItems = Items.Where(i => i.Selected).ToList();
        
        // 后续业务逻辑直接写在这里即可，比如打印值、触发接口请求等
        Console.WriteLine($"当前选中项数量：{SelectedItems.Count}，选中ID：{string.Join(",", _selectedItemIds)}");

        return Task.CompletedTask;
    }

    protected override async Task OnInitializedAsync()
    {
        Items = new List<MultiSelectList>();
        MultiSelectList m;
        for (int i = 0; i <= 5; i++)
        {
            m = new MultiSelectList();
            m.Selected = i == 3;
            m.ItemID = i + 1;
            m.SelItms = "Item " + i.ToString();
            Items.Add(m);
        }
        // 初始化默认选中值
        _selectedItemIds = Items.Where(i => i.Selected).Select(i => i.ItemID).ToList();
        SelectedItems = Items.Where(i => i.Selected).ToList();
    }

    public class MultiSelectList
    {
        public int ItemID { get; set; }
        public string SelItms { get; set; }
        public bool Selected { get; set; }
    }
}

注意事项 #

• 程序集名称必须和项目实际配置完全一致，大小写敏感，一般和项目默认命名空间相同，可以在项目属性面板中查看。
• 如果你的选项value是字符串类型，把JS中Number(opt.value)的转换逻辑去掉，同时把C#方法的参数类型改为string[] selectedIds即可，保证前后端类型匹配。
• 该方案同时兼容Blazor WebAssembly和Blazor Server模式，Blazor Server下JS互操作会自动通过SignalR通道完成数据传输，无需额外配置。
• 选项选中状态变化后，所有和选中值相关的逻辑都可以直接写在ReceiveSelectedOptions方法中，不需要额外绑定其他事件。

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