在Kendo Grid中序列化Kendo Multiselect中的数据以在更新时绑定到数组

本文关键字:Kendo 绑定 更新 数组 Grid 序列化 Multiselect 数据 | 更新日期: 2023-09-27 18:03:51

我在Kendo Grid的编辑器模板中使用Kendo Multiselect来编辑我的数据模型的int[]属性。

这是型号:

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和HiddeFor。数据似乎被正确读取,但在到达控制器的途中发生了一些变化。

<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>

当数据最终到达控制器时,Staff属性具有正确的长度,但所有值都设置为0,并且ModelState.IsValid条件失败。我知道我遗漏了一些步骤,可能是在编辑中。非常感谢你的帮助。

在Kendo Grid中序列化Kendo Multiselect中的数据以在更新时绑定到数组

<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>

这可能是一个有点棘手的解决方案,但它很有效,我很沮丧地接受了它。