2016-08-23 26 views
0

为了编辑我的数据模型的int []属性,我在Kendo Grid的编辑器模板中使用了Kendo Multiselect。将Kendo Grid中的Kendo Multiselect中的数据序列化以在更新时绑定到数组?

下面是该模型:

public class Project 
{ 
    ... 
    public int[] Staff { get; set; } 
    ... 
} 

局部含有格 - 它包括用于任何数组数据的串行化的脚本。这会被正确触发,但此时尝试将数组的内容读为Object,而不是整数。

<script> 
function serialize(data) { 
    for (var property in data) { 
     if ($.isArray(data[property])) { 
      serializeArray(property, data[property], data); 
     } 
    } 
} 
function serializeArray(prefix, array, result) { 
    alert("prefix = " + prefix); 
    alert("array = " + array); 
    for (var i = 0; i < array.length; i++) { 
     for (var property in array[i]) { 
      result[prefix + "[" + i + "]." + property] = array[i][property]; 
     } 
    } 
    alert("result = " + result); 
} 
</script> 

<div> 
    @(Html.Kendo().Grid<ProvostDevelopment.Models.Project>() 
     .Name("ProjectGrid") 
     .ToolBar(toolbar => toolbar.Create()) 
     .Columns(columns => 
     { 
      columns.Bound(c => c.ID).Hidden(); 
      columns.Bound(c => c.ProjectName); 
      columns.Bound(c => c.StartDate).ClientTemplate("#= kendo.toString(StartDate, \"MM/dd/yyyy\") #"); 
      columns.Bound(c => c.DueDate).ClientTemplate("#= kendo.toString(DueDate, \"MM/dd/yyyy\") #"); 
      columns.Bound(c => c.Current); 
      columns.Bound(c => c.Complete); 
      columns.Command(command => command.Edit().Text("Details")).Width(180); 
     }) 
     .Scrollable() 
     .Sortable() 
     .Selectable() 
     .Pageable(pageable => pageable 
      .Refresh(true) 
      .PageSizes(true) 
      .ButtonCount(5)) 
     .DataSource(dataSource => dataSource 
      .Ajax() 
      .Model(model => model.Id(p => p.ID)) 
      .Read(read => read.Action("Read", "Project")) 
      .Create(create => create.Action("Create", "Project")) 
      .Update(update => update.Action("Update", "Project").Type(HttpVerbs.Post).Data("serialize")) 
     ) 
     .Editable(editable => editable 
      .Mode(GridEditMode.PopUp) 
      .TemplateName("ProjectEditor") 
     ) 
     .HtmlAttributes(new { @style = "height:500px; "}) 
    ) 
</div> 

在项目编辑器中,我尝试了一堆东西,包括使用MultiSelectFor或简单的MultiSelect和HiddenFor。数据似乎正确读取,但是在通往控制器的路上发生了一些变化。

<script> 
function onChange(e) { 
    var arrayOfNames = this.value(); 
    $("#staffHidden").val(arrayOfNames); 
} 
</script> 

... 

<div class="col-md-11 details-item"> 
    @Html.LabelFor(m => m.Staff, new { @class = "col-md-4 details-label" }) 
    @(Html.Kendo().MultiSelectFor(m => m.Staff) 
     //.Name("Staff") 
     .DataValueField("ID") 
     .DataTextField("FullName") 
     .BindTo((System.Collections.IEnumerable)ViewData["Staff"]) 
     .Events(events => events 
      .Change("onChange") 
     ) 
     .HtmlAttributes(new { @class = "col-md-7 details-editor" }) 
    ) 
    @Html.HiddenFor(m => m.Staff, new { @id = "staffHidden" }) 
</div> 

当数据最后得到到控制器,工作人员属性具有正确的长度,但所有的值被设置为0,并且ModelState.IsValid条件失败。我知道我缺少一些步骤,可能是在编辑器中。非常感谢你的帮助。

+0

你可以发布你的控制器吗? – Turo

+0

找到了问题 - 我传递的“财产”是员工实际上是一个Staff对象,而不是表示其ID的int。将它解决在网格部分的serializeArray函数中。 – hallordylo

回答

0
<script> 
    function serialize(data) { 
     for (var property in data) { 
      if ($.isArray(data[property])) { 
       serializeArray(property, data[property], data); 
      } 
     } 
    } 
    function serializeArray(prefix, array, result) { 
     if(prefix == "Staff"){ 
      for (var i = 0; i < array.length; i++) { 
       result[prefix + "[" + i + "]"] = array[i]["ID"]; 
      } 
     } 
    } 
</script> 

可能是一个hacky解决方案,但它的工作原理,我很沮丧地采取它。

+0

原来,我不得不因为一个不同的原因而废弃整个事物,并使用视图模型来包含整个对象的数组和一个单独的表,以将ProjectID连接到StaffID。我会记住你对未来的解决方案,谢谢。 – hallordylo