使用json的kendo ui Grid的Crud操作

Question

我想要一个 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网站的链接..给我一个解决方案或代码..

Answer 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);
}