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

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

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

现在在强类型为EmployeeViewModel 的主视图中，我们可以为该页面模型的EmployeeSelections 属性（EmployeeViewModel 对象）使用EditorFor 辅助方法

@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 发布操作方法中，您可以检查 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
}

Answer 2

我会给出一个有效的 devextreme 示例

<div class="list-api-demo">
<div class="widget-container">
    @(Html.DevExtreme().DropDownBox()
.ID("dropDownBox")
.DataSource(d => d.Mvc())
.Value("Name")
.ContentTemplate(@<text>
        @(Html.DevExtreme().List()
        .ID("simpleList")
        .Height(400)
        .DataSource(d => d.Mvc().Controller("YourControler").LoadAction("Get").Key("ID"))
        .AllowItemDeleting(false)
        .ShowSelectionControls(true)
        .SelectionMode(ListSelectionMode.Multiple)
        .OnSelectionChanged("list_updateSelection")
        .ItemTemplate(new JS("empList")))</text>))
</div>

<script>
    var list_updateSelection = function (e) {
        var selectedItems = e.component.option("selectedItems");
        var selectedTexts = $.map(selectedItems, function (item) {
            return item.Text;
        });
        $("#selectedItems").text(selectedTexts.join(", "));
    };
</script>

<script>
    function empList(itemData, itemIndex, itemElement) {
        itemElement
            .addClass("my-custom-style")
            .append(
                $("<span>").text(itemData.Name)
            );
    }
</script>