用于 jquery CRUD 的 Asp.net core mvc + kendo ui

Question

您好，我正在开发一个项目，我需要将asp.net core mvc 与 kendo ui 一起用于 jquery 网格，我在编辑方法时遇到问题，有什么提示吗？

我还想在数据库中更新已编辑的数据。 我进行了调试，但由于某种原因，我无法从编辑中获取数据到我的控制器。

控制器

public class EmployeeController : Controller
{
    private readonly ApplicationDbContext _db;

    public EmployeeController(ApplicationDbContext db)
    {
        _db = db;
    }

    // GET: EmployeeController
    public ActionResult Index()
    {
        return View();
    }
    // GET: EmployeeController/Create
    public IEnumerable<Employee> read()
    {
        return _db.Employees;
    }

    [HttpPost]
    public async Task<IActionResult> UpdatePost(int id, [Bind("Id,FristName,SecondName,Age,Salary,Status")] Employee employee)
    {
        _db.Update(employee);
        await _db.SaveChangesAsync();
        return Ok();
    }
}

模型

public class Employee
{
    [Key]
    public int Id { get; set; }
    public string FirstName { get; set; }
    public string SecondName { get; set; }
    public int Age { get; set; }
    public double Salary { get; set; }
    public bool Status { get; set; }
}

Html + kendoUI

<div id="example">
    <div id="grid"></div>
</div>

    <script>
        $(document).ready(function () {
            dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "/Employee/read",
                        dataType: "json",
                        type: "get"
                    },
                    update: {
                        url: "/Employee/UpdatePost",
                        dataType: "json",
                        contentType: "application/json; charset=utf-8",
                        type: "post"
                    },
                    parameterMap: function (options, operation) {
                        if (operation !== "read" && options.models) {
                            return { models: kendo.stringify(options.models) };
                        }
                    }
                },
                batch: true,
                pageSize: 5,
                schema: {
                    model: {
                        id: "Id",
                        fields: {
                            Id: { editable: false, nullable: false },
                            FirstName: { validation: { required: true } },
                            SecondName: { validation: { required: true } },
                            Age: { type: "number", validation: { required: true, min: 18 } },
                            Salary: { type: "number", validation: { min: 0, required: true } },
                            Status: { type: "boolean" }
                        }
                    }
                }
            });

            $("#grid").kendoGrid({
                dataSource: dataSource,
                navigatable: true,
                pageable: true,
                height: 550,
                toolbar: ["create", "save", "cancel"],
                columns: [
                    { field: "Id", title: "Id", width: 60, editable: false },
                    { field: "FirstName", title: "FirstName", width: 60, editable: false },
                    { field: "SecondName", title: "SecondName", width: 60, editable: false },
                    { field: "Age", title: "Age", width: 60, editable: false },
                    { field: "Salary", title: "Salary", width: 60, editable: false },
                    { field: "Status", title: "Status", width: 60, editable: false },
                    { command: ["edit", "destroy"], title: "&nbsp;", width: 60 }],
                editable: "popup"
            });
        });

        dataSource.fetch(function () {
            var product = dataSource.at(0);
            product.set("FirstName", "bad");
            dataSource.sync(); //makes request to https://demos.telerik.com/kendo-ui/service/products/update
        });

        function customBoolEditor(container, options) {
            $('<input class="k-checkbox" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
        }
    </script>

Answer 1

1. 试试 [FromBody] 属性。
2. 清理 cmets 和参数

UpdatePost(int id

'//GET: EmployeeController/Create' 看起来像路由但不是

1. 创建某种视图模型。不要将实体发送到视图/前端。