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

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内部的数据未发布.如何将Kendo网格数据发布到服务器？

Answer 1

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

此代码库中使用了相同的方法,可以准确地演示您要搜索的内容.

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();
});