KendoUI网格更新问题

时间:2016-11-07 08:06:27

标签: javascript kendo-ui

我在页面中定义了一个网格:

<div id="grid"></div>
<script>
$(document).ready(function () {
    var crudServiceBaseUrl = "http://demos.kendoui.com/service",
        dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/Grid/GetPerson",
                    dataType: "json",
                    contentType: 'application/json; charset=utf-8',
                    type: 'Get'
                },
                update: {

                    url: function (person) {
                        debugger;
                        return "/Grid/Update";
                    },
                    contentType: 'application/json; charset=utf-8',
                    type: "POST",

                },
                destroy: {
                    url: crudServiceBaseUrl + "/Products/Destroy",
                    dataType: "jsonp"
                },
                create: {
                    url: crudServiceBaseUrl + "/Products/Create",
                    dataType: "jsonp"
                },
                parameterMap: function (options, operation) {
                    if (operation !== "read" && options.models) {
                        return { models: kendo.stringify(options.models) };
                    }
                }
            },
            batch: true,
            pageSize: 20,
            schema: {
                model: {
                    id: "ID",
                    fields: {
                        ID: { type: "number", editable: false, nullable: true },
                        Name: { validation: { required: true } },
                        Family: { validation: { required: true, min: 1 } },
                        Tel: {}
                    }
                }
            }
        });

    $("#grid").kendoGrid({
        dataSource: dataSource,
        pageable: true,
        height: 430,
        toolbar: ["create"],
        columns: [
            { field: "Name", title: "نام" },
            { field: "Family", title: "فامیل" },
            { field: "Tel", title: "تلفن", width: "100px" },
            { command: [{ name: "edit", text: "ویرایش" }, { name: "destroy", text: "حذف" }], title: "عملیات", width: "160px" }],
        messages: {
            editable: {
                cancelDelete: "لغو",
                confirmation: "آیا مایل به حذف این رکورد هستید؟",
                confirmDelete: "حذف"
            },
            commands: {
                create: "افزودن ردیف جدید",
                cancel: "لغو کلیه‌ی تغییرات",
                save: "ذخیره‌ی تمامی تغییرات",
                destroy: "حذف",
                edit: "ویرایش",
                update: "ثبت",
                canceledit: "لغو"
            }
        },
        editable: "popup"
    });
});

person函数的update参数中,我可以通过以下方式访问更改的行:

person.models[0]
它给了我:

Object {ID:1,Name:"pejman",Family:"kam",Tel:"098787887"}

我想将此数据发送到服务器,所以我在GridController中执行了操作:

 [HttpPost]
    public void Update(TblPerson person)
    {
        //do update
    }

为此,我尝试:

 url: function (person) {
       return "/Grid/Update/" + JSON.stringify(person.models[0])
  },

在更新方法中,但它不起作用,我该怎么办? 注意:当我在浏览器的“网络”标签中使用上面的内容时,我发现Bad Reuest错误:

URL:http://localhost:2145/Grid/Update/%7B%22ID%22:1,%22Name%22:%22pejman%22,%22Family%22:%22kam%22,%22Tel%22:%22098787878%22%7D
Status Code:400 Bad Request

1 个答案:

答案 0 :(得分:0)

问题是 kendo.stringify(options.models)以JSON字符串发送您的对象。所以我相信你的js代码可以保持不变。只需将控制器中的Update方法更改为:

[HttpPost]
public void Update(string models)
{
    var values = JsonConvert.DeserializeObject<IEnumerable<TblPerson>>(models);

    foreach (var value in values)
    {
        //Your action
    }
}

上述方法假设您可以发送更多模型进行更新。不要忘记使用Newtonsoft.Json