如何在 foreach 语句中处理剑道多选

Question

情况

我有一个用户列表，其中有一个角色列表，我希望在 kendo 多选中看到可编辑的角色列表。

问题

使用我拥有的代码，结果非常奇怪，在顶部它显示了一堆文本框（我认为），而在多选框应该是我看到的所有地方都是向上和向下箭头。

到目前为止我的代码：

foreach (var u in Model.Users)
{
<div class="form-group">
    <div class="col-sm-2">
        @Html.Label(u.Name)
    </div>
    <div>
        @Html.Kendo().MultiSelectFor(m => u.Roles).BindTo(Model.UserRoles);
    </div>
</div>
}

视图模型

public class CompanyViewModel
{
    public IEnumerable<UserDto> Users { get; set; }
    public IEnumerable<UserRoleDto> UserRoles { get; set; }
}

UserDto

public class UserDto
{
    public int Id { get; set; }
    public string FirstName { get; set; }
    public string MiddleName { get; set; }
    public string LastName { get; set; }
    public string Name
    {
        get
        {
            return string.Format("{0} {1} {2}", FirstName, MiddleName, LastName);
        }
    }

    public IEnumerable<SelectListItem> Roles { get; set; }
}

这是我这样渲染页面时页面的外观

div class="k-widget k-multiselect k-header" unselectable="on" title style>

div class="k-multiselect-wrap k-floatrap" unselectable="on">...</div>

div class="k-widget k-multiselect k-header" unselectable="on" title style>

div class="k-multiselect-wrap k-floatrap" unselectable="on">...</div>

div class="k-widget k-multiselect k-header" unselectable="on" title style>

div class="k-multiselect-wrap k-floatrap" unselectable="on">...</div>

div class="k-widget k-multiselect k-header" unselectable="on" title style>

div class="k-multiselect-wrap k-floatrap" unselectable="on">...</div>

而且这种情况会不断重复。

我怀疑我如何根据用户而不是模型中的某些内容来制作 multiselectfor 存在问题，但我对剑道的了解太低，无法理解应该如何完成。

任何帮助将不胜感激

Answer 1

您的代码存在多个问题。

首先，Kendo MultiSelectFor() 创建一个 html <select multiple> 标签（虽然它使用 display: none; 隐藏它并添加自己的 html，但它的 <select> 用于绑定和回发到控制器）。 <select multiple> 只能绑定到并且只能回发简单值类型的数组，而不是复杂对象，因此您不能绑定到 typeof IEnumerable<IEnumerable<SelectListItem> 的属性。您的 Roles 属性必须是 IEnumerable<int> Roles { get; set; } 假设您想要回发选定的角色 ID。

接下来你的UserRoles 需要是IEnumerable<SelectListItem> 或SelectList，这对于助手的.BindTo() 方法是必需的。

最后，您不能使用foreach 循环绑定到集合属性。它将生成与您的模型无关的重复 name 属性，因此不会绑定（并且还会重复 id 属性，这是无效的 html）。您需要为集合中的类型使用自定义EditorTemplate（通常for 循环是合适的，但由于在循环中使用帮助器的问题，它不适用于您的情况）

您的视图模型需要是

public class CompanyViewModel
{
  public IEnumerable<UserViewModel> Users { get; set; }
  public IEnumerable<SelectListItem> RoleList { get; set; }
}
public class UserViewModel
{
  public int Id { get; set; }
  public string FirstName { get; set; }
  ....
  [Display(Name = "Roles")]
  public IEnumerable<int> SelectedRoles { get; set; }
}

然后创建局部视图/Views/Shared/EditorTemplates/UserViewModel.cshtml

@model yourAssembly.UserViewModel
@Html.HiddenFor(m => m.Id)
....
@Html.LabelFor(m => m.SelectedRoles)
@Html.Kendo().MultiSelectFor(m => u.SelectedRoles)
  .BindTo((IEnumerable<SelectListItem>)ViewData["roleList"])
....

在主视图中

@model yourAssembly.CompanyViewModel
@using (Html.BeginForm())
{
  @Html.EditorFor(m => m.Users, new { roleList = Model.RoleList })
  <input type="submit" .../>
}

这里发生的是EditorFor() 方法将根据模板中的html 为集合中的每个UserViewModel 生成html。此外，它会将SelectList 作为附加ViewData 传递给模板

附注：我建议您从使用标准 MVC 列表框助手开始

@Html.ListBoxFor(m => u.SelectedRoles, (IEnumerable<SelectListItem>)ViewData["roleList"])

在模板中确保其一切正常，然后更改为@Html.Kendo().MultiSelectFor()