在表单提交上发布剑道网格数据

Question

我想将数据从 Kendo Grid 发布到服务器，并将其保存到数据库中。

为此，我使用了如下形式：

@using (Html.BeginForm("MainDocumentSave","Document"))
{
    <div class="row-fluid">
        <div class="span10">

            @(Html.Kendo().Grid<Invoice.Models.ViewModels.SegmentViewModel>()
                .Name("Segment")
                .TableHtmlAttributes(new { style = "height:20px; " })
                .Columns(columns =>
                {
                    columns.Bound(p => p.AirlineShortName).EditorTemplateName("AirlineEditor").Title("Airline").ClientTemplate("#=AirlineName#").Width(5);
                    columns.Bound(p => p.DepartureDate).Width(9);
                    columns.Bound(p => p.Arrives).EditorTemplateName("ArrivalLocation").Title("Arrival").ClientTemplate("#=Arrives#").Width(5);
                    columns.Bound(p => p.ArrivalDate).Width(7);
                    columns.Bound(p => p.FlightNumber).Width(8);
                })
                .Editable(editable => editable.Mode(GridEditMode.InCell))
                .Navigatable()
                .Sortable()
                .Scrollable(scr => scr.Height(200))
                .Scrollable()
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Batch(true)
                    .ServerOperation(false)
                    .Events(events => events.Error("error_handler"))
                    .Model(model => model.Id(p => p.AirlineName))
                    .Create("Editing_Create", "Grid")
                    .Read("Segment_Read", "Document")
                    .Update("Editing_Update", "Grid")
                    .Destroy("Editing_Destroy", "Grid")
                )
            )

        </div>
    </div>
    <button type="submit" class="btn btn-primary"> Save Segments</button>
}

但是提交后，Kendo Grid里面的数据并没有Posted。如何将 Kendo Grid 数据发布到服务器？

Answer 1

Grid 不是表单元素，它不能简单地发布到服务器。您可以利用 Grid 提供的模板并根据要提交给服务器的不同行模型创建隐藏元素。

this code library 中使用了相同的方法，它准确地展示了您正在搜索的内容。

Answer 2

网格数据不在表单元素中。表单元素仅在编辑单元格时出现，然后将其删除。您不能使用表单提交按钮将数据发布到服务器。

正确的方法是添加网格自己提供的“保存”命令按钮：

@(Html.Kendo().Grid<Invoice.Models.ViewModels.SegmentViewModel>()
    .Name("Segment")
    .ToolBar(toolbar => {
        toolbar.Save(); // add save button to grid toolbar
    })
    // ... rest of options ...

或者通过在 Grid 小部件上调用 saveChanges()：

<button type="button" id="save">Save Segments</button>

$("#save").on("click", function () {
    $("#Segment").data("kendoGrid").saveChanges();
});

Answer 3

假设我的页面中有三个剑道网格和两个文本框。现在我想发布所有数据以及三个网格的数据。我是通过以下样式做到的。

@model DAL.ViewModel.ProfileViewModel
@{
    ViewBag.Title = "Profile";
    Layout = "~/Views/Shared/_LayoutAfterLogin.cshtml";
}
<h2>Profile</h2>
<div>
    <h4>ApplicationUser</h4>
    <hr />
    <dl class="dl-horizontal"></dl>
    <form id="frmProfile">
        <div>
            <label>Email<span class="mandatory"></span></label>
            @Html.Kendo().TextBoxFor(model => model.Email)
        </div>
        <div>
            <label>UserName<span class="mandatory"></span></label>
            @Html.Kendo().TextBoxFor(model => model.UserName)
        </div>
    </form>
    @(Html.Kendo().Grid<DAL.ViewModel.PhoneViewModel>()
        .Name("PhoneGrid")
        .Columns(columns =>
            {
                columns.Bound(p => p.PhoneID).Groupable(false);
                columns.Bound(p => p.PhoneType).Width(160);
                columns.Bound(p => p.PhoneNumber).Width(120);
                columns.Bound(p => p.IsPrimary).Width(120);
                columns.Command(command => command.Destroy()).Width(90);
            })
            .ToolBar(toolBar =>
                {
                    toolBar.Create();
                    // toolBar.Save();
                })
            .Editable(editable => editable.Mode(GridEditMode.InCell))
            .Pageable()
            .Sortable()
            .Scrollable()
            .HtmlAttributes(new { style = "height:430px;" })
            .DataSource(dataSource => dataSource
                .Ajax()
                .Batch(true)
                .ServerOperation(false)
                .Events(events => events.Error("error_handler"))
                .Model(model =>
                {
                    model.Id(p => p.PhoneID);
                    model.Field(p => p.PhoneID).Editable(false);
                })
                .PageSize(20)
                .Read(read => read.Action("PhoneList", "Account"))
                    .Create(create => create.Action("AddPhone", "Account"))
                    .Update(update => update.Action("EditPhone", "Account"))
                    .Destroy(destroy => destroy.Action("DeletePhone", "Account"))
                )
            )
        </div>
        <p>
            <button type="button" id="btnSave">Save</button>
            @Html.ActionLink("Edit", "Edit", new { /* id = Model.PrimaryKey */ }) |
            @Html.ActionLink("Back to List", "Index")
        </p>

        //jquery
        $("#btnSave").on("click", function () {
                sendData();
            });

            function sendData() {
                var grid = $("#PhoneGrid").data("kendoGrid"),
                    parameterMap = grid.dataSource.transport.parameterMap;

                //get the new and the updated records
                var currentData = grid.dataSource.data();
                var updatedRecords = [];
                var newRecords = [];

                for (var i = 0; i < currentData.length; i++) {
                    if (currentData[i].isNew()) {
                        //this record is new
                        newRecords.push(currentData[i].toJSON());
                    } else if (currentData[i].dirty) {
                        updatedRecords.push(currentData[i].toJSON());
                    }
                }

                //this records are deleted
                var deletedRecords = [];
                for (var i = 0; i < grid.dataSource._destroyed.length; i++) {
                    deletedRecords.push(grid.dataSource._destroyed[i].toJSON());
                }

                var serializedData = $("#frmProfile").serializeObject();

                var data = {};
                $.extend(data, parameterMap({ updated: updatedRecords }), parameterMap({ deleted: deletedRecords }), parameterMap({ new: newRecords }));

                var finaldata = {};
                $.extend(finaldata, parameterMap({ phone: data }), parameterMap({ email: data }), parameterMap({ address: data }), parameterMap({ pagedata: serializedData }));
                $.ajax({
                    url: '@Url.Action("UpdateCreateDelete1", "Account")',
                    data: JSON.stringify(finaldata),
                    type: "POST",
                    contentType: 'application/json',
                    dataType: 'json',
                    error: function (e) {
                        alert('error');
                        //Handle the server errors using the approach from the previous example
                    },
                    success: function () {
                        grid.dataSource._destroyed = [];
                        //refresh the grid - optional
                        // grid.dataSource.read();
                    }
                })
            }

            jQuery.fn.serializeObject = function () {
                var arrayData, objectData;
                arrayData = this.serializeArray();
                objectData = {};

                $.each(arrayData, function () {
                    var value;

                    if (this.value != null) {
                        value = this.value;
                    } else {
                        value = '';
                    }

                    if (objectData[this.name] != null) {
                        if (!objectData[this.name].push) {
                            objectData[this.name] = [objectData[this.name]];
                        }

                        objectData[this.name].push(value);
                    } else {
                        objectData[this.name] = value;
                    }
                });

                return objectData;
            };



        //action method
        public ActionResult UpdateCreateDelete1(
            [Bind(Prefix = "phone.updated")]List<PhoneViewModel> updatedPhone,
            [Bind(Prefix = "phone.new")]List<PhoneViewModel> newPhone,
            [Bind(Prefix = "phone.deleted")]List<PhoneViewModel> deletedPhone,
            [Bind(Prefix = "email")]List<PhoneViewModel> emaillist,
            [Bind(Prefix = "address")]List<PhoneViewModel> addresslist,
            [Bind(Prefix = "pagedata")] ProfileViewModel pagedata
        )
    {
}