Blazor绑定预填充列表并将多选结果以List<T>返回的实现问题

方案1：原生内置绑定（最简实现） #

首先在你存储标签的类中新增一个属性，用于存储对应标签的多选选中值，参考模型定义如下：

// 标签选项类示例
public class TagSelectionItem
{
    public string Name { get; set; }
    // 新增属性：存储当前标签的所有选中值
    public List<string> SelectedValues { get; set; } = new();
    public List<TagValue> Values { get; set; }
}

public class TagValue
{
    public string Name { get; set; }
}

修改你的前端Razor代码，给select标签添加绑定属性即可：

<div class="form-group col-sm-4">
@foreach (var tagName in TagSelection)
{
    <label>
        @tagName.Name:
        <select multiple @bind="@tagName.SelectedValues">
            @foreach (var value in tagName.Values)
            {
                <option value="@value.Name">@value.Name</option>
            }
        </select>
    </label>
    <br>
    <!-- 可选：测试展示当前选中值 -->
    <span>已选中：@string.Join("、", tagName.SelectedValues)</span>
    <br>
}
<br>
</div>

该方式为Blazor原生支持，无需手动编写事件监听逻辑，用户选中的内容会自动同步到对应SelectedValues集合中。

方案2：自定义选中事件处理 #

如果你需要在用户修改选中项时触发自定义业务逻辑，可以手动绑定@onchange事件实现：
修改前端代码：

<div class="form-group col-sm-4">
@foreach (var tagName in TagSelection)
{
    <label>
        @tagName.Name:
        <select multiple @onchange="(e) => HandleSelectChange(e, tagName)">
            @foreach (var value in tagName.Values)
            {
                <option value="@value.Name">@value.Name</option>
            }
        </select>
    </label>
    <br>
}
<br>
</div>

在@code块中添加事件处理方法：

private void HandleSelectChange(ChangeEventArgs e, TagSelectionItem currentTag)
{
    var selectedItems = e.Value as string[];
    currentTag.SelectedValues.Clear();
    if (selectedItems != null)
    {
        currentTag.SelectedValues.AddRange(selectedItems);
    }
    // 此处添加你需要执行的其他业务逻辑
}

注意事项 #

• 绑定的集合需要兼容IEnumerable<string>类型，List<string>、string[]都可直接使用
• 如果你的选项值为非字符串类型，在事件处理方法中自行做类型转换即可

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