CODEWITHSUNDEEP
asp.net-core-mvchtml-selecthtml-helper
jstuardo
jstuardo

Reputation: 4414

@Html.ListBoxFor does not select initially selected elements

I have this code in an ASP.NET Core 8 MVC view:

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

This is listaAreas array when ListBoxForis called:

enter image description here

Even when the only option has Selected = true, HTML SELECT tag appears no selected.

enter image description here

What is it going on here?

EDIT:

My last attempt, but no avail:

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

Upvotes: 0

Views: 63

Answers (1)

Md Farid Uddin Kiron
Md Farid Uddin Kiron

Reputation: 22515

Even when the only option has Selected = true, HTML SELECT tag appears no selected. I have removed that attribute but the same happen

Based on your shared code snippet and description I have tried to investigate your issue. However, in asp.net core there's no pre-defined tag helper in order to display multi select dropdown. You ought to use javaScript based plugins if you want to implement either dropdown with checkbox or onclick keep the item selected within the dropdown box.

I have tried to use bootstrap-multiselect.js in order to demonstrate multi select dropdown with checkbox.

Let's have a look in practice, how we could implement that.

Controller:

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();
}

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

Output:

enter image description here

enter image description here

enter image description here

Note: Please modify the script and html according to your needs. As there's no built-in tag helper for multi select dropdown, so I tried to share with you this. You could have a look at this document if you want to check few more sample.

Upvotes: 0

Related Questions