Question

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

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

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

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

遗憾的是，问题是数据数组没有布尔的isSelected属性，但具有employeeName和Id等属性。所以最终，我的问题是，我如何实现一个复选框列表，允许多个选择并选择所有员工，以及让我知道哪个员工被选中或未被选中。我不能使用bootstrap或类似的东西，所以必须使用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视图模型。在此视图中，您可以使用CheckBoxFor辅助方法来渲染传递给此模板的模型的复选框。我们还将Id属性值保存在隐藏的输入中。

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

现在，在您的主视图中，我们可以将EmployeeViewModel辅助方法用于该页面的EditorFor属性模型EmployeeSelections。 1}}对象）

EmployeeViewModel

这将呈现与其关联的名称和复选框（以及Id的隐藏输入元素）。当用户提交表单时，在您的http post action方法中，您可以检查@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> }并过滤该表单以获取EmployeeSelections属性设置为IsSelected的子集

true

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>

ASP.NET MVC 5中的多选CheckBoxList

2 个答案: