在ASP.NET MVC 5中多选CheckBoxList

Question

我今天的问题是围绕实现一个复选框列表并在MVC 5中选择该项目。这是我遇到的问题：

EmployeeViewModel viewModel = new EmployeeViewModel { data =  
manager.getEmployeeData() };
return View(viewModel);

我的主视图中有一个下拉列表，为了用数组中的数据填充它，我创建了一个视图模型，然后将其发送到视图中，如下所示：

Public class EmployeeViewModel {
    public MyEmployees[] data {get; set;};
}

不幸的是，问题在于数据数组没有布尔值isSelected属性，但是具有employeeName和Id之类的属性。因此，最终，我的问题是，我将如何实现一个复选框列表，该列表允许多项选择并选择所有员工，并让我知道选中还是未选中哪个员工。我无法使用引导程序或类似的引导程序，因此必须使用HTML帮助器或C＃/ ASP.NET等来实现。感谢所有帮助。

编辑：很抱歉，您之前没有对此做清楚的说明，我希望此复选框列表出现在下拉列表中。因此，基本上，在单击下拉菜单后，您会在旁边带有复选框的项目中。

Answer 1

视图模型是特定于视图的模型。因此，如果您的视图需要选择记录，请创建一个具有IsSelected属性的视图模型，然后可以使用CheckBoxFor帮助器为集合中的每个项目呈现复选框。

您可以使用编辑器模板将复选框选择列表发送到服务器。

因此，我将创建一个表示选择的视图模型。

public class EmployeeSelection
{
    public bool IsSelected { set; get; }
    public string Name { set; get; }
    public int Id { set; get; }
}

并将这种类型的列表添加到我们的页面视图模型中

public class EmployeeViewModel
{
    public List<EmployeeSelection> EmployeeSelections { set; get; }

    // Other properties needed for the page also goes here. 
    // ex: Let's add a Location property
    public string Location { set;get;} 
}

现在，在GET操作中，填充EmployeeSelections属性并发送到视图。

public ActionResult Create()
{
   var vm=new EmployeeViewModel();
   vm.EmployeeSelections = manager.getEmployeeData()
                                  .Select(a => new EmployeeSelection() {
                                        Id = a.Id,
                                        Name = a.Name})
                                  .ToList();
   return View(vm);
}

下一步是创建编辑器模板。EmployeeSelection.cshtml在~/Views/Shared/EditorTemplates或 下创建一个新的剃刀视图~/Views/{YourControllerName}/EditorTemplates。将此编辑器模板剃刀强烈键入EmployeeSelection视图模型。在此视图中，您可以使用CheckBoxForhelper方法来渲染传递给此模板的模型的复选框。我们还将Id属性值保留在隐藏的输入中。

@model EmployeeSelection
<div>
    @Model.Name
    @Html.CheckBoxFor(a=>a.IsSelected)
    @Html.HiddenFor(a=>a.Id)
</div>

现在，在您的主视图中，该视图的类型为EmployeeViewModel，我们可以将EditorForhelper方法用于该EmployeeSelections页面的model（EmployeeViewModelobject）的属性

@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
    @Html.LabelFor(a=>a.Location)
    @Html.TextBoxFor(a=>a.Location)

    <label>Select employees</label>
    @Html.EditorFor(a=>a.EmployeeSelections)

    <button type="submit">Save</button>
}

这将呈现与之关联的名称和复选框（以及ID的隐藏输入元素）。用户提交表单时，可以在您的http post操作方法中进行检查EmployeeSelections和过滤，以获取IsSelected属性设置为的子集true

[HttpPost]
public ActionResult Index(IndexVm model)
{
     var selected = model.EmployeeSelections.Where(a=>a.IsSelected).ToList();
    // If you want Id's select that
    var ids = selected.Select(g => g.Id);

    // to do : return something
}