ASP.NET Core 8 MVC中@Html.ListBoxFor无法选中初始已选元素

问题重现 #

在ASP.NET Core 8 MVC视图中，尝试通过ListBoxFor渲染多选下拉框时，明明选项的Selected属性设为true，但生成的HTML中选中状态不生效。先后尝试直接构造List<SelectListItem>和MultiSelectList两种方式均未解决：

方式一：使用List #

<div class="mb-3 position-relative">
    @{
        var listaAreas = new List<SelectListItem>();
        if (Model.Areas != null && Model.Areas.Any())
        {
            var areasActuales = Model.Areas.Select(r => new SelectListItem() { Text = r.Area?.AreaNombre ?? string.Empty, Value = (r.Area?.AreaId ?? 0).ToString(), Selected = r.Selected });
            listaAreas.AddRange(areasActuales);
        }
    }
    @Html.LabelFor(m => m.Areas)
    @Html.ListBoxFor(m => m.Areas, listaAreas, new { @class = "form-control", style = "width: 100%", multiple = "multiple" })
</div>

方式二：使用MultiSelectList #

<div class="mb-3 position-relative">
    @{
        MultiSelectList? listaAreas = null;
        if (Model.Areas != null && Model.Areas.Any())
        {
            listaAreas = new MultiSelectList(Model.Areas.Where(a => a.Area != null).Select(a => a.Area), "AreaId", "AreaNombre", Model.Areas.Where(a => a.Selected).Select(a => a.Area?.AreaId).ToArray());
        }
    }
    @Html.LabelFor(m => m.Areas)
    @Html.ListBoxFor(m => m.Areas, listaAreas, new { @class = "form-control", style = "width: 100%", multiple = "multiple" })
</div>

问题根源 #

1. 模型绑定优先级规则：ASP.NET MVC的ListBoxFor控件会优先根据绑定的模型属性值设置选中状态，完全忽略SelectListItem或MultiSelectList中指定的Selected属性。你当前绑定的是Model.Areas（包含Area实体和Selected标记的对象集合），而非纯选中值的集合，框架无法将其与选项的Value值匹配，导致选中状态失效。
2. 模型设计不匹配：ListBoxFor要求绑定的属性是选中项的值列表（如List<int>、int[]），而非包含选项元数据的复杂对象集合。你的Model.Areas同时承担了"选项数据源"和"选中状态存储"两个职责，违背了控件的绑定逻辑。

解决方案 #

步骤1：调整模型 #

添加专门存储选中AreaId的属性，分离选项数据源和选中状态：

// 视图模型类
public class YourViewModel
{
    // 选项数据源：包含所有可选择的Area及选中标记（仅用于生成选项）
    public List<AreaSelection> Areas { get; set; } = new();
    
    // 新增：存储选中的AreaId集合（用于ListBoxFor绑定）
    public List<int> SelectedAreaIds { get; set; } = new();
}

// 选项实体类（示例）
public class AreaSelection
{
    public Area? Area { get; set; }
    public bool Selected { get; set; }
}

public class Area
{
    public int AreaId { get; set; }
    public string AreaNombre { get; set; } = string.Empty;
}

步骤2：修正视图代码 #

将ListBoxFor绑定到新增的SelectedAreaIds属性，同时用Model.Areas生成选项列表：

<div class="mb-3 position-relative">
    @Html.LabelFor(m => m.SelectedAreaIds)
    @{
        var listaAreas = new List<SelectListItem>();
        if (Model.Areas != null && Model.Areas.Any())
        {
            listaAreas = Model.Areas
                .Where(r => r.Area != null)
                .Select(r => new SelectListItem
                {
                    Text = r.Area.AreaNombre,
                    Value = r.Area.AreaId.ToString()
                })
                .ToList();
        }
    }
    @Html.ListBoxFor(m => m.SelectedAreaIds, listaAreas, new { @class = "form-control", style = "width: 100%", multiple = "multiple" })
</div>

步骤3：初始化选中状态 #

在控制器中，将SelectedAreaIds初始化为需要选中的AreaId集合：

public IActionResult YourAction()
{
    var model = new YourViewModel();
    
    // 模拟加载选项数据
    model.Areas = GetAreaSelections();
    
    // 初始化选中状态：将Selected为true的AreaId加入集合
    model.SelectedAreaIds = model.Areas
        .Where(a => a.Selected && a.Area != null)
        .Select(a => a.Area.AreaId)
        .ToList();
    
    return View(model);
}

补充：使用MultiSelectList的写法 #

如果坚持使用MultiSelectList，同样需要绑定到选中值集合，视图代码可改为：

<div class="mb-3 position-relative">
    @Html.LabelFor(m => m.SelectedAreaIds)
    @{
        MultiSelectList? listaAreas = null;
        if (Model.Areas != null && Model.Areas.Any())
        {
            var areaList = Model.Areas.Where(a => a.Area != null).Select(a => a.Area).ToList();
            var selectedIds = Model.SelectedAreaIds.ToArray();
            listaAreas = new MultiSelectList(areaList, "AreaId", "AreaNombre", selectedIds);
        }
    }
    @Html.ListBoxFor(m => m.SelectedAreaIds, listaAreas, new { @class = "form-control", style = "width: 100%", multiple = "multiple" })
</div>

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