.Net MVC 5 Multi-Select List Box

Question

I'm trying to create a multi-select box and so far tried many things.

public class DepartmentDropDown
{
    public int Id { get; set; }
    public string Name { get; set; }
}
public class DeviceUserReportViewModel
{
    public List<int> DepartmentIds { get; set; } 
    public List<DepartmentDropDown> Departments { get; set; } 
}
public IActionResult DeviceUserReport()
{
    IEnumerable<DepartmentDropDown> departments = _unitOfWork.Repository<Department>().Get().Select(s=> new DepartmentDropDown { Id = s.Id, Name = s.Name });
    
    DeviceUserReportViewModel model = new DeviceUserReportViewModel
    {
        Departments = departments
    };
}

And in the DeviceUserReport.cshtml

@Html.ListBoxFor(s => s.DepartmentIds,new MultiSelectList(Model.Departments,"Id","Name"),new { @class = "form-control"})

It still shows the list box like this.

Answer 1

For all developers asking the same question =>

In a .Net MVC application, without any addition library, most you can do is this:

With this jQuery library, you can turn a .Net MVC Multi-Select Box to this :

Add this js and css to your application

• https://github.com/mysociety/jquery-multi-select/blob/master/src/jquery.multi-select.js
• https://github.com/mysociety/jquery-multi-select/blob/master/src/example-styles.css

And mark your input area as multiselect with $('#mySelectList').multiSelect();

Note: When used the codes from question, this multi-select list sends a list int in model to server side.