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主视图中，我们可以对该页面模型（ EmployeeViewModel对象）的EmployeeSelections属性使用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 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
}

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>