序列化所有剑道网格页面中的数据

Question

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

逐步。.

1. [首先，我正在用填充本地模型列表的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)

2. 第二，我将从表格<form class="notification" enctype="multipart/form-data">序列化所有数据，以将在视图模型上编辑的数据传递给Controller。我正在执行的操作如下：

 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()的表格以连接结果？

Answer 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) {
                }
  });