我尝试了一个带有 Employee 类的 CRUD 操作的简单 Kendo UI 网格。但是当我创建/更新/删除时，控制器中的员工对象没有获得相应的值，并且 Id 在所有操作中都设置为 0
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "Components/",
dataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: {
url: crudServiceBaseUrl + "GetEmployees",
dataType: "json"
},
update: {
url: crudServiceBaseUrl + "UpdateEmployee",
dataType: "json",
type: "Post"
},
destroy: {
url: crudServiceBaseUrl + "DeleteEmployee",
dataType: "json",
type: "Post"
},
create: {
url: crudServiceBaseUrl + "CreateEmployee",
dataType: "json",
contentType: "application/json; charset=utf-8",
type: "POST",
},
parameterMap: function (data, type) {
return kendo.stringify(data);
},
},
batch: true,
pageSize: 20,
type: "json",
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "Id",
fields: {
Id: { editable: false, nullable: true },
FullName: { validation: { required: true } },
Designation: { validation: { required: true } },
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 430,
toolbar: ["create"],
columns: [
{ field: "Id" },
{ field: "FullName" },
{ field: "Designation" },
{ command: ["edit", "destroy"], title: " ", width: "160px" }],
editable: "popup"
});
});
</script>
这是控制器动作。
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult CreateEmployee([DataSourceRequest] DataSourceRequest request, Employee employee)
{
if (employee != null && ModelState.IsValid)
{
using (EmployeeDBDataContext context = new EmployeeDBDataContext())
{
EmployeeTable newEmployee = new EmployeeTable();
newEmployee.FullName = employee.FullName;
newEmployee.Designation = employee.Designation;
context.EmployeeTables.InsertOnSubmit(newEmployee);
context.SubmitChanges();
}
}
return Json(new[] { employee }.ToDataSourceResult(request, ModelState));
}
public ActionResult GetEmployees([DataSourceRequest] DataSourceRequest request)
{
var lstConfiguredEmails = new List<Employee>();
using (EmployeeDBDataContext context = new EmployeeDBDataContext())
{
lstConfiguredEmails = (from e in context.EmployeeTables
select new Employee
{
Id = e.Id,
FullName = e.FullName,
Designation = e.Designation
}).ToList();
}
return Json(lstConfiguredEmails.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult DeleteEmployee([DataSourceRequest] DataSourceRequest request, Employee employee)
{
if (employee != null)
{
using (EmployeeDBDataContext context = new EmployeeDBDataContext())
{
EmployeeTable deleteEmployee = (from e in context.EmployeeTables
where e.Id == employee.Id
select e).SingleOrDefault();
context.EmployeeTables.DeleteOnSubmit(deleteEmployee);
context.SubmitChanges();
}
}
return Json(ModelState.ToDataSourceResult());
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult UpdateEmployee([DataSourceRequest] DataSourceRequest request, Employee employee)
{
if (employee != null && ModelState.IsValid)
{
using (EmployeeDBDataContext context = new EmployeeDBDataContext())
{
EmployeeTable updateEmployee = (from e in context.EmployeeTables
where e.Id == employee.Id
select e).SingleOrDefault();
updateEmployee.Id = employee.Id;
updateEmployee.FullName = employee.FullName;
updateEmployee.Designation = employee.Designation;
context.SubmitChanges();
}
}
return Json(ModelState.ToDataSourceResult());
}
和模型类
public class Employee
{
public int Id { get; set; }
public string FullName { get; set; }
public string Designation { get; set; }
}
每次按下 Create/Update/Detele 时，控制器操作中的员工值如下：
Id = 0;
FullName = null;
Designation = null;
请给出解决方案。
当我使用下面的代码使用 tbe 网格时
@(Html.Kendo().Grid<Employee>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.Id);
columns.Bound(p => p.FullName);
columns.Bound(p => p.Designation);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(160);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.Id))
.Create(update => update.Action("CreateEmployee", "Components"))
.Read(read => read.Action("GetEmployees", "Components"))
.Update(update => update.Action("UpdateEmployee", "Components"))
.Destroy(update => update.Action("DeleteEmployee", "Components"))
)
)
它与相同的控制器操作完美配合。