Question

我尝试使用带有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: "&nbsp;", 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; }
}

每次按下“创建/更新/检测”时，控制器操作中的员工值都为

Id = 0;
FullName = null;
Designation = null;

请给出解决方案。

当我用下面的代码使用网格时

@(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"))
    )
)

它与相同的控制器动作完美配合。

Answer 1

尝试将transport.create.contentType设为"application/json"。可能只是因为它向服务器发送了错误的内容类型，因此服务器不知道如何解析它。

Answer 2

通过从Datasource中删除batch：true来解决此问题。

Kendo网格在创建/更新/删除时获取空对象

2 个答案: