.Net MVC 5 多 Select 列表框

Question

我正在尝试创建一个多 select 框，到目前为止尝试了很多东西。

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

并且在 DeviceUserReport.cshtml

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

还是这样显示列表框

Answer 1

Html.ListBoxFor 扩展方法创建 ListBox 控件并允许用户一次性 select 多个选项。当您想为用户提供多种选择时，它非常有用。

您可以按如下方式定义此控件： @Html.ListBoxFor(model => model.property, ItemList, object HtmlAttribute) Model => model.property：它包含 selected 项目的 ID ItemList：它是一个项目列表 Object HtmlAttributes: 它为 ListBox Control 设置了额外的属性。

与 multiple-selection 列表框一样，标准列表框允许用户 select 列表中的值。但是，对于列表框，用户只能 select 列表中的一项。与 multiple-selection 列表框一样，列表框默认显示列表中的所有项目。

你的代码很完美。所以要 select 列表中的多个项目只需按 Ctrl + 鼠标单击。

Answer 2

对于所有提出相同问题的开发者 =>

在 .Net MVC 应用程序中，没有任何附加库，您最多可以做的是：

使用 this jQuery 库，您可以将 .Net MVC Multi-Select 框变成这样：

将此 js 和 css 添加到您的应用程序

并使用 $('#mySelectList').multiSelect();

将您的输入区域标记为多选

注意：当使用问题中的代码时，此multi-select列表将模型中的列表int发送到服务器端。

.Net MVC 5 多 Select 列表框

.Net MVC 5 Multi-Select List Box

.net

c#

asp.net

asp.net-mvc

asp.net-mvc-4