序列化所有 Kendo Grid 页面的数据答案

【问题标题】：Serialize data from all the Kendo Grid pages序列化所有 Kendo Grid 页面的数据
【发布时间】：2020-02-13 11:20:58
【问题描述】：

我正在使用 Telerik Kendo UI 处理 .NET Web 应用程序。

在步骤中..

首先，我正在准备使用 Kendo Grid 填充本地模型列表的视图。我让用户可以通过 InCell 编辑模式编辑网格中的数据。我的网格设置了dataSource.Batch(true).ServerOperation(false)，所以我只使用客户端模板。

我的剑道格子如下：

            @(Html.Kendo().Grid(Model.Recipients)
                .Name("NotificationRecipients")
                .Columns(columns =>
                {
                    columns.Bound(p => p.Id).Hidden(true);
                    columns.Bound(p => p.AmountToPay).Hidden(true).ClientTemplate("#= AmountToPay # <input type='hidden' name='Recipients[#= index(data)#].AmountToPay' value='#= AmountToPay#' />");
                    columns.Bound(p => p.Name).ClientTemplate("#= Name # <input type='hidden' name='Recipients[#= index(data)#].Name' value='#= Name #' />");
                    columns.Bound(p => p.Email).ClientTemplate("#= Email # <input type='hidden' name='Recipients[#= index(data)#].Email' value='#= Email#' />");
                    columns.Bound(p => p.ContractorId).Hidden(true).ClientTemplate("#= ContractorId # <input type='hidden' name='Recipients[#= index(data)#].ContractorId' value='#= ContractorId#' />");
                    columns.Bound(p => p.RecipientId).Hidden(true).ClientTemplate("#= RecipientId # <input type='hidden' name='Recipients[#= index(data)#].RecipientId' value='#= RecipientId#' />");
                    columns.Command(command =>
                    {
                        command.Custom("Preview").Click("NotificationPreview");
                        command.Destroy().Text("Delete");
                    });
                })
                 .Editable(editable => editable.Mode(GridEditMode.InCell))
                 .Sortable()
                 .Pageable()
                 .Filterable()
                 .DataSource(dataSource => dataSource
                    .Ajax()
                    .Batch(true)
                    .PageSize(25)
                    .ServerOperation(false)
                    .Model(model =>
                    {
                        model.Id(m => m.Id);                        
                    }
                    )
                )
            )
            @Html.ValidationMessageFor(x => x.Recipients)

其次，我将表单<form class="notification" enctype="multipart/form-data"> 中的所有数据序列化，以将视图模型上编辑的数据传递给控制器。我正在做的这个动作如下：

 var form = $(".notification");
 var formData = form.serializeArray();
 var url = '@Url.Action("Action", "Controller")';

 $.post(url, formData, function (data, status, xhr) {
 });

我的问题在于，将 formData 传递给控制器后，网格中只有 25 个项目，而不是全部。

也许this image 还有助于可视化form.serializeArray() 和grid.dataSource.data() 的返回值之间的差异。

总结

有没有办法序列化剑道网格的所有元素？或者也许可以通过这种方式从剑道网格中获取项目：grid.dataSource.data()，然后以某种方式将它们序列化为返回 .serializeArray() 以连接结果的表单？

【问题讨论】：

暂时，传递所有元素..在ajax请求之前，我设置网格的页面大小等于其中的条目数，当我收到响应时，我将页面大小重置为25跨度>

标签： c# jquery kendo-grid kendo-asp.net-mvc

【解决方案1】：

您可以使用以下方法将网格数据序列化为

 var grid = $("#NotificationRecipients").data("kendoGrid").dataSource.data(); 
 var griddata = JSON.stringify(grid );

  var jdata = JSON.stringify($(document.frm).serializeArray()); //frm is the form name (for serialize the form elements other than grid)
  $.ajax({
        type: "post",
        datatype: "json",
        contenttype: "application/json",
        url: "/Controller/ActionName",
        data: JSON.stringify({Data: griddata }),
        success: function (result) {
                }
  });

【讨论】：