@Html.ListBoxFor 不选择最初选择的元素

Question

我在 ASP.NET Core 8 MVC 视图中有此代码：

<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>

调用

listaAreas

时，这是

ListBoxFor

数组：

即使唯一的选项有

Selected = true

，HTML SELECT 标签也显示为未选中。

这是怎么回事？

编辑：

我最后一次尝试，但没有成功：

<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>

Answer 1

即使唯一的选项 Selected = true，也会出现 HTML SELECT 标签 没有选择。我已经删除了该属性，但同样的情况发生了

根据您共享的代码片段和描述，我已尝试调查您的问题。但是，在 ASP.NET Core 中，没有预定义的标记帮助器来显示多选下拉列表。如果您想实现带复选框的下拉菜单或 onclick 保持下拉框中的项目处于选中状态，您应该使用基于 javaScript 的插件。

我尝试使用

bootstrap-multiselect.js

来演示带有复选框的多选下拉列表。

让我们看看如何在实践中实现这一点。

控制器：

public IActionResult MultiSelectCheckboxDropdown()
{
    var multiSelectList = new List<SelectListItem>
        {
            new SelectListItem { Value = "1", Text = "C#" },
            new SelectListItem { Value = "2", Text = "JavaScript" },
            new SelectListItem { Value = "3", Text = "Python" },
            new SelectListItem { Value = "4", Text = "Java" },
            new SelectListItem { Value = "5", Text = "C++" },
            new SelectListItem { Value = "6", Text = "Swift" },
            new SelectListItem { Value = "7", Text = "Go" },
            new SelectListItem { Value = "8", Text = "Ruby" },
            new SelectListItem { Value = "9", Text = "TypeScript" },
            new SelectListItem { Value = "10", Text = "PHP" }
        };

    ViewBag.multiSelectList = multiSelectList;
    return View();
}

查看：

<h3>Multi select</h3>
@Html.DropDownList("Category", ViewBag.multiSelectList, null, new { @class = "selectpicker", multiple = "multiple", id = "Subjects_dropdown" })




<!-- Latest compiled and minified CSS -->
@section scripts {
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/1.1.2/js/bootstrap-multiselect.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/1.1.2/css/bootstrap-multiselect.min.css"></script>
    <script>
        $(document).ready(function () {
            $('#myMultiSelect').select2();
            $('#Subjects_dropdown').multiselect();
        });
    </script>
}

输出：

注意： 请根据您的需要修改脚本和html。由于没有用于多选下拉列表的内置标签帮助器，所以我尝试与您分享这一点。如果您想检查更多样本，您可以查看此文档。