在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条件失败。我知道我遗漏了一些步骤,可能是在编辑中。非常感谢你的帮助。
<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>
这可能是一个有点棘手的解决方案,但它很有效,我很沮丧地接受了它。