使用json的kendo ui Grid的Crud操作

Posted 2023-05-07

【中文标题】使用json的kendo ui Grid的Crud操作

【英文标题】：Crud operation Of kendo ui Grid using json

【发布时间】：2017-07-20 15:07:52

【问题描述】：

我想要一个 kendo UI MVC 4 或 5 c# Grid，使用 ajax json 和 Sqlserver 演示 curd 操作添加、编辑、删除。

任何人都可以帮助我..

这里我使用了一个简单的方法，但它不能正常工作..

    <script>
$(function () 

    var dataSource = new kendo.data.DataSource(
        transport: 
            read: 
                url: "@Url.Action("GetAllUsers","Task")",
                dataType: "json"
            ,
            update: 
                url: "@Url.Action("Edit","Task")",
                dataType: "json",
                contentType: "application/json;charset=utf-8",
                type:"POST"
            ,
            destroy: 
                url: "@Url.Action("Delete","Task")",
                dataType: "json",
                contentType: "application/json;charset=utf-8",
                type:"POST"
            ,
            parameterMap: function(data,type)
            
                return kendo.stringify(data.models);
            
        ,
        schema: 
            model: 
                    id: "Id",
                    fields: 
                        Id:  editable: false ,
                        UserName:  type: "string" ,
                        FirstName:  type: "string" ,
                        LastName:  type: "string" ,
                        Address:  type: "string" ,
                        IsActive:  type: "boolean" ,
                        DateCreated:  type: "date" 
                    
                
        ,
        batch: true,
        pageSize: 20,
    );

    $("#allUsers").kendoGrid(
        dataSource:dataSource,
        height: 550,
        groupable: true,
        sortable: true,
        navigatable: true,
        pageable: 
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        ,
        columns: [
         field: "UserName",title: "User Name" ,
         field: "FirstName",title: "First Name" ,
         field: "LastName",title: "Last Name" ,
         field: "Address",title: "Address" ,
         field: "IsActive",title: "Active" ,
         field: "DateCreated",title: "Join Date",format: "0:dd-MM-yyyy" ,
         command: "destroy" 
        ],
        toolbar: ["save","cancel"],
        editable: 
            mode: "incell",
            update: true,
            destroy: true,
            confirmation:true
        ,
        edit: function (event) 
            console.log("at edit event");

        ,
        save: function(event)
        
            console.log("at saveChanges event");
        ,
    );
);
</script>

那么有人可以指导我吗？？

不要给我telerik网站的链接..给我一个解决方案或代码..

【问题讨论】：

你的问题是什么？你想要什么？

我想要一个简单的内联网格，使用 json 和 sql server..以及所有的验证进行 crud opeartion

@MuratGündeş 示例如mitechdev.com/2016/06/…

欢迎来到 Stack Overflow！提问前请阅读what this site is about 和“How to ask”。

【参考方案1】：

您可以使用此 Kendo Grid html 示例；

       <!-- BEGIN KendoGrid -->
        <div>
            @(Html.Kendo().Grid<SampleViewModel>()
            .Name("KendoGrid")
            .Scrollable()
            .Columns(columns =>
            
                columns.Bound("").HtmlAttributes(new  style = "text-align:center;" ).ClientTemplate("<a class='k-button' onclick=\"deleteSample(#=Id#)\"><span class='k-icon k-delete'></span>Delete</a>").Width(85).Sortable(false);
                columns.Bound("").HtmlAttributes(new  style = "text-align:center;" ).ClientTemplate("<a class='k-button' href=\"/Sample/Edit/#= Id #\"><span class='k-icon k-edit'></span>Edit</a>").Width(130).Sortable(false);
                columns.Bound(x => x.Name);
                columns.Bound(x => x.Code);
                columns.Bound(x => x.Regex);
                columns.Bound(x => x.StatusText);
            )
             .Pageable(pager => pager
                    .Input(true)
                    .Numeric(false)
                    .Info(true)
                    .PreviousNext(true)
                    .Refresh(true))
                .Scrollable()
                .Sortable()
                .HtmlAttributes(new  style = "height:480px;" )
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(10)
                    .ServerOperation(true)
                    .Read(read => read.Action("GetSampleList", "Sample"))
                    ))
        </div>
        <!-- END KendoGrid -->

如果需要，删除按钮将打开弹出窗口。 编辑按钮将打开编辑页面。

public ActionResult Edit(int id)

    var model = x.GetById(id);
    return View(model);

还有GetSampleList； （已经是json了）

public JsonResult GetSampleList()

     var list = x.GetSampleList();     
     return Json(list, JsonRequestBehavior.AllowGet);

【讨论】：

SampleViewModel 找不到类型或命名空间

您必须创建一个视图模型。这将是您的数据模型。

我创建了一个模型名称 SampleViewModel

@model IEnumerable

在视图页面的顶部我也声明了..但是错误 The type or namespace could not be found in SampleViewModel