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

Posted 2023-04-13

【中文标题】用于 jquery CRUD 的 Asp.net core mvc + kendo ui

【英文标题】：Asp.net core mvc + kendo ui for jquery CRUD

【发布时间】：2021-09-10 07:00:28

【问题描述】：

您好，我正在开发一个项目，我需要将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>

【问题讨论】：

我是 c# 的新手，抱歉 :(

【参考方案1】：

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

UpdatePost(int id

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

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

【讨论】：

第三个任务是什么意思？

当我尝试从我的数据库Check here the print更新任何数据时会发生这种情况@