使用 AJAX 绑定时，具有 IEnumerable 属性的 Kendo Grid 模型在创建/更新后未正确更新 [英] Kendo Grid model with an IEnumerable property not updating correctly after Create/Update when using AJAX binding

问题描述

我遇到了一个问题，我的模型的属性在将它发送到我的控制器以从 Kendo Grid 进行更新或创建调用时没有正确更新.模型如下所示:

I'm having a problem where a property of my model is not being correctly updated when sending it to my controller for an Update or Create call from a Kendo Grid. The model looks like this:

public class ReleaseNotesModel
{
    public int NoteID { get; set; }
    public int ReleaseID { get; set; }
    public List<TranslationModel> ReleaseNoteTranslations { get; set; }
    public ReleaseNoteType ItemType { get; set; }
}
public class TranslationModel
{
    public int TranslationID { get; set; }
    public string Translation { get; set; }
    public int LanguageID { get; set; }
    public int ItemID { get; set; }
}

这是我认为的网格:

@(Html.Kendo().Grid<ReleaseNotesModel>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(m => m.ItemType).Width(140);
        columns.Bound(m => m.Description);
        columns.Command(command =>
            {
                command.Edit();
                command.Destroy();
            }).Width(170);
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable
        .Mode(GridEditMode.PopUp)
        .TemplateName("ReleaseNoteTemplate")
        .Window(w => w.Width(620))
        .DisplayDeleteConfirmation(true)
    )
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
        //.Server()
        .Events(e => e.Error("grid_error"))
        .Model(model =>
        {
            model.Id(m => m.NoteID);
            model.Field(m => m.ReleaseID).DefaultValue(Model.ReleaseID);
            model.Field(m => m.ItemType).DefaultValue(ReleaseNoteType.NewFeature);
            //defaultTranslationsList is a List<TranslationModel> with two empty objects in it
            model.Field(m => m.ReleaseNoteTranslations).DefaultValue(defaultTranslationsList);
        })
        .PageSize(5)
        .Read(read => read.Action("GetNotes", "ReleaseNotes", new { releaseID = Model.ReleaseID }))
        .Create(create => create.Action("AddNote", "ReleaseNotes"))
        .Update(update => update.Action("EditNote", "ReleaseNotes"))
        .Destroy(destroy => destroy.Action("DeleteNote", "ReleaseNotes"))
    )
)

更具体地说，我遇到的问题是在我的控制器操作中:

So more specifically, the problem I am having is that in my controller action:

public async Task<ActionResult> EditNote(ReleaseNotesModel model)

model.ReleaseNoteTranslations 始终包含两个空对象(属性为 null 或 0)，即我为此属性设置的默认值.如果我没有设置默认值，那么在弹出式编辑器中我将没有任何字段可编辑此属性.所有其他属性都按预期更新.

model.ReleaseNoteTranslations always contains two empty objects (properties are null or 0), i.e. the default value which I set for this property. If I set no default value, then I won't have any fields to edit for this property in the popup editor. All the other properties are updated as expected.

让我烦恼的是，如果我使用服务器绑定而不是 AJAX，那么所有数据都会正确接收.所以我决定检查两种情况下发送的请求标头中的数据:

What bugs me is that if I use server binding instead of AJAX, then all the data is correctly received. So I decided to check out the data in the request headers being sent in both cases:

// Using server binding
ReleaseID:300
NoteID:886
ItemType:1
ReleaseNoteTranslations[0].ItemID:886
ReleaseNoteTranslations[0].LanguageID:1
ReleaseNoteTranslations[0].TranslationID:869
ReleaseNoteTranslations[0].Translation:The module is now released!
ReleaseNoteTranslations[1].ItemID:886
ReleaseNoteTranslations[1].LanguageID:2
ReleaseNoteTranslations[1].TranslationID:870
ReleaseNoteTranslations[1].Translation:Le module est maintenant disponible!
NoteID:886

// Using AJAX binding
sort:
group:
filter:
NoteID:886
ReleaseID:300
ReleaseNoteTranslations[0][TranslationID]:869
ReleaseNoteTranslations[0][Translation]:The module is now released!
ReleaseNoteTranslations[0][LanguageID]:1
ReleaseNoteTranslations[0][ItemID]:886
ReleaseNoteTranslations[1][TranslationID]:870
ReleaseNoteTranslations[1][Translation]:Le module est maintenant disponible!
ReleaseNoteTranslations[1][LanguageID]:2
ReleaseNoteTranslations[1][ItemID]:886
ItemType:1

现在我首先注意到的是 objectName[index].PropertyName 与 objectName[index][PropertyName]

Now what I notice first here is the syntax of objectName[index].PropertyName vs objectName[index][PropertyName]

我想知道这是否可能是我的问题的原因，如果是，有没有办法让我直接操作发送的数据来修复它?这可能是 Kendo Grid 通过 Ajax 绑定发送数据的方式中的错误吗?

I wonder if this could be the cause of my problem, and if so, is there a way for me to go and directly manipulate the data being sent to fix it? Could this be a bug in the way Kendo Grid sends data through Ajax binding?

无论如何，我们将不胜感激！

Either way, any help would be much appreciated!

推荐答案

因此，如果将来有人偶然发现此问题，我联系了 Telerik 支持，他向我解释了:

So In case anyone stumbles on this in the future, I contacted Telerik support, who explained to me that:

dataSource 只支持值类型，不会序列化模型绑定器所需格式的数组.

The dataSource supports only value types and will not serialize the arrays in the format that is expected by the model binder.

他们还为我提供了一种解决方法，使用 request Data 函数调用 JavaScript 函数将数据转换为正确的格式.

They also provided me with a workaround using the request Data function to call a JavaScript function which converts the data into the correct format.

在视图中，通过指定要调用的 JavaScript 函数的名称来修改请求函数:

In the view, modify the request functions by specifying the name of the JavaScript function to call:

.Create(create => create.Action("AddNote", "ReleaseNotes").Data("serialize"))

然后添加进行转换的函数:

And then add in the functions which will do the conversion:

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++) {
        for (var property in array[i]) {
            result[prefix + "[" + i + "]." + property] = array[i][property];
        }
    }
}

这篇关于使用 AJAX 绑定时，具有 IEnumerable 属性的 Kendo Grid 模型在创建/更新后未正确更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！