我想将数据从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网格数据发布到服务器？
答案 0 :(得分：7)
网格不是表单元素，不能简单地发布到服务器。您可以利用Grid提供的模板，并根据要提交给服务器的不同行模型创建隐藏元素。
在 this code library 中使用了相同的方法，它可以准确显示您要搜索的内容。
答案 1 :(得分：5)
网格数据不是表单元素。表单元素仅在编辑单元格时出现，然后被删除。您无法使用表单提交按钮将数据发布到服务器。
正确的方法是添加网格提供的“保存”命令按钮：
@(Html.Kendo().Grid<Invoice.Models.ViewModels.SegmentViewModel>()
.Name("Segment")
.ToolBar(toolbar => {
toolbar.Save(); // add save button to grid toolbar
})
// ... rest of options ...
或者通过在网格小部件上调用saveChanges()：
<button type="button" id="save">Save Segments</button>
$("#save").on("click", function () {
$("#Segment").data("kendoGrid").saveChanges();
});
答案 2 :(得分：1)
假设我的页面中有三个kendo网格和两个文本框。现在我想发布所有数据以及三个网格的数据。我是通过以下风格做到的。
@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
)
{
}