我正在尝试获取一个包含Kendo MVC网格和其他元素的表单。
- 视图模型包含三个字符串字段和一个
IEnumerable集合。 - 网格是服务器绑定的。 我没有使用网格添加任何元素或从列表中删除任何元素，但网格包含一个映射到列表项中布尔列的复选框。
每当我提交此表单时，三个字符串元素都会在 post 方法中返回，但列表始终为 null。
下面是数据模型：
public class Parent
{
public string Field1 { get; set; }
public string Field2 { get; set; }
public string Comments { get; set; }
public IEnumerable<ChildItems> Children { get; set; }
}
public class ChildItems
{
public string ChildField1 { get; set; }
public string ChildField2 { get; set; }
public boolean Include { get; set; }
}
以下是我的观点：
@{
ViewBag.Title = "Index";
}
@model GridInForm.Models.Parent
@using(Html.BeginForm("Save", "Home"))
{
<fieldset>
<legend>Editing Parent</legend>
@Html.LabelFor(parent => parent.Field1)
@Html.EditorFor(parent => parent.Field1)
@Html.LabelFor(parent => parent.Field2)
@Html.EditorFor(parent => parent.Field2)
@Html.LabelFor(parent => parent.Comments)
@Html.EditorFor(parent => parent.Comments)
@(Html.Kendo().Grid(Model.Children)
.Name("Children")
.ToolBar(tools => tools.Create().Text("Add new Children"))
.Editable(editable => editable.Mode(GridEditMode.PopUp).CreateAt(GridInsertRowPosition.Bottom))
.Columns(columns =>
{
columns.Bound(p => p.ChildField1).ClientTemplate("#= ChildField1 #" +
"<input type='hidden' name='ChildField1[#= index(data)#].ChildField1' value='#= Name #' />"
);
columns.Bound(p => p.ChildField2).Hidden().ClientTemplate("#= ChildField1 #" +
"<input type='hidden' name='ChildField1[#= index(data)#].ChildField1' value='#= ChildField1 #' />"
);
columns.Command(command =>
{
// command.Destroy();
command.Edit();
}).Width(100);
})
.DataSource(dataSource => dataSource
.Server()
.Create("Create", "Home")
.Read("Index", "Home")
.Update("Update", "Home")
.Model(model =>
{
model.Id(p => p.ChildField1);
model.Field(p => p.ChildField1).Editable(false);
})
//.ServerOperation(true)
)
)
</fieldset>
<input type="submit" value="Save" />
}
<script>
function index(dataItem) {
alert("bindind");
var data = $("#Products").data("kendoGrid").dataSource.data();
return data.indexOf(dataItem);
}
</script>
当我提交表单时，我在视图模型中恢复了父项，但网格中的IEnumerable字段始终为空。
难道这不是这样做的方法吗，如果是这样，完成这样的事情的方法是什么？ 我在以前的 Telerik 版本上遇到了这个问题，我看到它在剑道 UI 上是一样的。 任何方向将不胜感激。 这是一个长期存在的问题。
我的项目中正是这个场景完美地工作。 这是我的网格声明...
@(Html.Kendo().Grid(Model.ChildLines)
.Name("RequestLinesGrid")
.Editable(editable => editable.Mode(Kendo.Mvc.UI.GridEditMode.InCell))
.Columns(columns =>
{
columns.Bound(p => p.ItemCode).ClientTemplate("#= ItemCode #" +
"<input type='hidden' name='MyLines[#= index(data)#].ItemCode' value='#= ItemCode #' />"
);
columns.Bound(p => p.Description).ClientTemplate("#= Description #" +
"<input type='hidden' name='MyLines[#= index(data)#].Description' value='#= Description #' />"
);
columns.Bound(p => p.UoM).ClientTemplate("#= UoM #" +
"<input type='hidden' name='MyLines[#= index(data)#].UoM' value='#= UoM #' />"
);
columns.Bound(p => p.QtyCC).ClientTemplate("#= QtyCC #" +
"<input type='hidden' name='MyLines[#= index(data)#].QtyCC' value='#= QtyCC #' />"
);
columns.Bound(p => p.QtyEmployee).ClientTemplate("#= QtyEmployee #" +
"<input type='hidden' name='MyLines[#= index(data)#].QtyEmployee' value='#= QtyEmployee #' />"
);
columns.Bound(p => p.ItemListLineID).Hidden(true).ClientTemplate("#= ItemListLineID #" +
"<input type='hidden' name='MyLines[#= index(data)#].ItemListLineID' value='#= ItemListLineID #' />"
);
columns.Bound(p => p.ItemListCode).Hidden(true).ClientTemplate("#= ItemListCode #" +
"<input type='hidden' name='MyLines[#= index(data)#].ItemListCode' value='#= ItemListCode #' />"
);
columns.Command(command =>
{
command.Destroy();
}).Width(200);
})
.DataSource(dataSource => dataSource.Ajax()
.Model(m =>
{
m.Id(p => p.ItemCode);
m.Field(p => p.ItemCode).Editable(false);
m.Field(p => p.Description).Editable(false);
m.Field(p => p.UoM).Editable(false);
m.Field(p => p.QtyCC).Editable(true);
m.Field(p => p.QtyEmployee).Editable(true);
m.Field(p => p.ItemListLineID).Editable(false);
m.Field(p => p.ItemListCode).Editable(false);
})
.Batch(true)
.ServerOperation(false)
// these are dummy action methods that don't really exist.
.Update("upd", "upd")
.Destroy("del", "del")
.Create("cre", "cre")
)
.Navigatable()
)
这是"索引"函数：
function index(dataItem) {
var data = $("#RequestLinesGrid").data("kendoGrid").dataSource.data();
return data.indexOf(dataItem);
}
因此，
这是您问题解决方案的一部分。我扩展了剑道数据源，因此您可以调用此函数并获取所有更新、删除、创建的项目。只需将其转换为 json，并将其与其余表单字段一起发回即可。我现在已经开始工作了。以为我会分享。
kendo.data.DataSource.prototype.GetUnsavedData = function () {
var that = this,
idx,
length,
created = [],
updated = [],
destroyed = that._destroyed,
allRows = [],
data = that._flatData(that._data);
for (idx = 0, length = data.length; idx < length; idx++) {
if (data[idx].isNew()) {
created.push(data[idx]);
} else if (data[idx].dirty) {
updated.push(data[idx]);
}
}
allRows = created.concat(updated).concat(destroyed);
var allRowsJSON = JSON.stringify(allRows);
return allRowsJSON;
}
我受到codebeastie和@user1878526的启发，产生了以下混合想法 - 简单地将网格作为字符串列表返回到控制器保存操作：
控制器：
Function Save(ThisForum As myModel, gridData As List(Of String)) As ActionResult
视图：
$("#myForm").submit(function (event) {
var grid = $("#myGrid").data("kendoGrid");
var data = grid.dataSource.view();
var input;
for (var i = 0; i < data.length; i++) {
var s = JSON.stringify(data[i]).replace(/["']/g, "");
input = $("<input>", { type: 'hidden', name: 'data[' + i + ']', value: s });
$(this).append($(input));
}
})
然后，可以通过Split逗号和冒号在控制器中相当容易地解析这一点。