在ASP.NET MVC 5中多选CheckBoxList [英] Multi-select CheckBoxList in ASP.NET MVC 5

问题描述

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

My issue today revolves around implementing a checkboxlist and getting the item selected in MVC 5. Here's the issue i am having:

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

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

I have a dropdownlist in my Main View and in order to populate it with the data from the array, i created a View Model, which then gets sent into the view, as shown below:

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

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

The issue is, unfortunately, the data array does not have a boolean isSelected property but has properties like employeeName and Id. So ultimately, my question is, how would i implement a checkbox list which allows for multiple selections AND to select all employees as well as allowing me to know which employee got selected or was not selected. I cannot use bootstrap or anything like that so have to implement it using HTML helpers or C#/ASP.NET etc. Thanks for all the help.

对不起，您没有在早些时候弄清楚这一点，我希望此复选框列表出现在下拉列表中.因此，基本上，在单击下拉列表后，您会在其旁边带有复选框的项目中.

Sorry for not making this clear earlier, i want this checkbox list to appear within a dropdownlist. So basically, upon clicking the dropdown, you have items with checkboxes next to them.

推荐答案

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

View models are models specific to views. So if your view requires selecting records, create a view model which has an IsSelected property and you can use the CheckBoxFor helper to render check boxes for each of the items in your collection.

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

You can use editor templates to send the list of checkbox selections to server.

因此，我将创建一个表示所选内容的视图模型.

So I would create a view model which represents the selection.

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

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

and add a list of this type to our page view model

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属性并发送到视图.

Now in your GET action, populate the EmployeeSelections property and send to the view.

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

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

Next step is creating an editor template. Create a new razor view called EmployeeSelection.cshtml under ~/Views/Shared/EditorTemplates or ~/Views/{YourControllerName}/EditorTemplates. Have this editor template razor strongly typed to the EmployeeSelection view model. Inside this view, you can use the CheckBoxFor helper method to render checkbox for the model passed to this template. We will also keep the Id property value inside a hidden input.

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

现在在主视图中，该视图的类型严格设置为EmployeeViewModel，对于该页面模型的EmployeeSelections属性(EmployeeViewModel对象)，我们可以使用EditorFor辅助方法

Now in your main view, which is strongly typed to EmployeeViewModel, we can use the EditorFor helper method for the EmployeeSelections property of that page's model(EmployeeViewModel object)

@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

This will render the names and checkboxes associated to it (along with the hidden input element for Id). When user submits the form, in your HTTP post action method, you can check the EmployeeSelections and filter that to get the subset which has the IsSelected property set to 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
}

这篇关于在ASP.NET MVC 5中多选CheckBoxList的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！