在ASP.NET MVC中使用带有Kendo UI Grid的Kendo MultiSelect

Question

这与最近关于another question I asked有关。我试图将用户角色信息绑定到网格，并将角色分配给用户。每个用户可以在数据库中担任多个角色，并且应该使用Kendo UI MultiSelect编辑这些角色。

当我选择需要的角色并回发给控制器时，“RoleBasicModel”对象数组包含所需数量的角色，但其所有属性均为空。

该机型被定义为：

public class UserInfo 
{ 
    public string UserId { get; set; } 
    public string FirstName { get; set; } 
    public string LastName { get; set; } 
    public string UserName { get; set; } 
    public string Roles { get; set; } 
    public IEnumerable<RoleBasicModel> RoleList { get; set; } 
} 
public class RoleBasicModel 
{ 
    public string Id { get; set; } 
    public string Text { get; set; } 
} 

网格是设置为：

@(Html.Kendo().Grid<Models.UserInfo>() 
    .Name("userGrid") 
    .Columns(columns => 
    { 
     columns.Bound(p => p.UserName); 
     columns.Bound(p => p.FirstName); 
     columns.Bound(p => p.LastName); 
     columns.Bound(p => p.Roles).EditorTemplateName("RoleListEditor").Template(p => p.RoleList); 
     columns.Command(command => { command.Edit(); command.Destroy(); }); 
    }) 
    .Filterable() 
    .Sortable() 
    .Resizable(r => r.Columns(true)) 
    .Editable(editable => { editable.Mode(GridEditMode.InLine); editable.DisplayDeleteConfirmation("Are you sure you want to remove this user?"); }) 
    .HtmlAttributes(new { style = "min-height:90px;max-height:450px;" }) 
    .DataSource(dataSource => dataSource 
     .Ajax() 
     .Events(events => events.Error("error_handler")) 
     .Model(model => 
     { 
      model.Id(p => p.UserId); 
      model.Field(p => p.UserId).Editable(false); 
      model.Field(p => p.FirstName).Editable(true); 
      model.Field(p => p.LastName).Editable(true); 
      model.Field(p => p.UserName).Editable(false); 
      model.Field(p => p.RoleList).Editable(true); 
     } 
     ).Read(read => read.Action("GetAllUsers", "Admin").Type(HttpVerbs.Get)) 
     .Update(update => update.Action("UpdateUser", "Admin").Type(HttpVerbs.Post)) 
     .Destroy(update => update.Action("DeleteUser", "Admin").Type(HttpVerbs.Post)) 
    ) 
) 

而且我的编辑模板，它采用了剑道多选，被定义为：

@Html.Kendo().MultiSelect().Name("RoleList").DataTextField("Text").DataValueField("Id").BindTo((IEnumerable<Models.RoleBasicModel>)ViewData["uroles"]).Placeholder("No role selected") 

发送回服务器的数据为空是否有明显的原因？我怀疑我从MultiSelect控件中错过了一些东西，它会定义要使用的正确模型。我曾提到the test project，经常被引用为类似问题的答案，但我对此也没有任何喜悦。

按照要求，（的删节版）我使用的控制器：

public ActionResult ManageUsers() 
    {    
     PopulateRoles(); 
     return View(); 
    } 

    private void PopulateRoles() 
    { 
     ViewData["uroles"] = new ApplicationDbContext().Roles.Select(r => new RoleBasicModel { Text = r.Name, Id = r.Id }).ToList(); 
    } 

    [AcceptVerbs(HttpVerbs.Get)] 
    public ActionResult GetAllUsers([DataSourceRequest]DataSourceRequest request) 
    { 
     using (var context = new ApplicationDbContext()) 
     { 
      var allUsers = context.Users.ToList().Select(x => 
       new UserInfo 
       { 
        UserName = x.UserName, 
        UserId = x.Id, 
        FirstName = x.FirstName, 
        LastName = x.LastName, 
        RoleList = x.Roles.Select(p => new RoleBasicModel { Text = p.Role.Name, Id = p.RoleId }), 
        Roles = string.Join(", ", x.Roles.Select(p => p.Role.Name).ToList()) 
       }).ToList(); 
      return Json(allUsers.ToDataSourceResult(request), JsonRequestBehavior.AllowGet); 
     } 
    } 

    [AcceptVerbs(HttpVerbs.Post)] 
    public ActionResult UpdateUser([DataSourceRequest] DataSourceRequest request, UserInfo user) 
    { 
     if (user != null && ModelState.IsValid) 
     { 
      using (var context = new ApplicationDbContext()) 
      { 
// Do something with the user details 
      } 
     } 

     return Json(new[] { user }.ToDataSourceResult(request, ModelState)); 
    } 

编辑：在查看回发到服务器的数据，则显示为如果被选择的对象的阵列ISN”正确解析。格式应该是RoleList [0] .Id：123456，而不是RoleList [0] [Id]：123456。我在想这可能是MultiSelect控件的问题，而不是我写的任何代码？

Answer 1

所以我最终找出了问题所在。根据我的编辑，我注意到数据没有从MultiSelect控件正确序列化。

我花了一些时间才得到example available on the Kendo website的工作，我注意到他们正确地向服务器发布了错误地正确序列化的数据和。他们使用（这似乎是可笑的我）的技巧是，在对电网的更新功能，它们连载阵列内部的任何数据本身，即

.Update(update => update.Action("UpdateUser", "Admin").Type(HttpVerbs.Post).Data("serialize"))

凡“连载”函数定义为：

function serialize(data) { 
    for (var property in data) { 
     if ($.isArray(data[property])) { 
      serializeArray(property, data[property], data); 
     } 
    } 
} 

function serializeArray(prefix, array, result) { 
    for (var i = 0; i < array.length; i++) { 
     if ($.isPlainObject(array[i])) { 
      for (var property in array[i]) { 
       result[prefix + "[" + i + "]." + property] = array[i][property]; 
      } 
     } 
     else { 
      result[prefix + "[" + i + "]"] = array[i]; 
     } 
    } 
} 

已经四处搜寻广泛的解决我的问题，和其他人已经指出，没有任何解释工作的解决方案，我想这可能是别人有用的，了解问题是什么，当你尝试在Kendo网格中使用Kendo MultiSelect，而不只是说g“看看这个例子”。

TL;博士发送到服务器（如果您使用的是剑道网格）