kendo ui grid 使用远程数据

本篇章使用后台使用的是mvc 5,后台使用什么不重要关键是，后台接收的值和后台返回的值。

js 代码如下：

var crudServiceBaseUrl = "/WorkersCap";
        var dataSource = new kendo.data.DataSource({
            type: "json",
            transport: {
                read: {
                    url: crudServiceBaseUrl + "/SearchWorkersCap",
                    type: "POST",
                    dataType: "json"
                }
            },
            schema: {
                data: "data",
                total: "total",
                errors: "errors",
                model: {
                    id: "id",
                    fields: {
                        id: { editable: false, nullable: true },
                        number: { type: "string", nullable: true, validation: { required: { message: "编码不能为空" } } },
                        workersCapStatus: { defaultValue: 3, validation: { required: { message: "状态不能为空" } } },
                        supplier: { type: "string", nullable: true },
                        manufacturer: { type: "string", nullable: true }
                    }
                },
                parse: function (response) {
                    var result;
                    if (response.type === "create" || response.type === "update") {
                        result = {
                            data: [response],
                            errors: ""
                        };
                    } else {
                        result = response;
                    }
                    return result;
                }
            },
            error: function () {
                this.cancelChanges();
            },
            requestEnd: function (e) {
                var response = e.response;
                if (response) {
                    response.type = e.type;
                }
            },
            pageSize: 20,
            serverPaging: true
        });
        $("#grid").kendoGrid({
            dataSource: dataSource,
            pageable: {
                refresh: true
            },
            editable: {
                confirmation: true,
                mode: "popup",
                window: {
                    title: "新增"
                }
            },
            scrollable: false,
            toolbar: ["create"],
            columns: [
                { field: "number", title: "编码" },
                { field: "workersCapStatus", title: "状态", editor: workersCapStatusDropDownEditor, template: workersCapStatusText },
                { field: "supplier", title: "供应商" },
                { field: "manufacturer", title: "制造商" },
                { command: [{ name: "edit", text: { edit: "编辑", cancel: "取消", update: "更新" } }, { name: "destroy", text: "删除" }], title: " ", width: "260px" }
            ],
            edit: function (e) {
                var editWindow = e.container.data("kendoWindow");
                if (e.model.isNew()) {
                    editWindow.title('新增');
                }
                else {
                    editWindow.title('编辑');
                }
            }
        });

穿过去的报文头如下图：

传回来的值格式为。。。。。。。在前面的文章“grid 使用本地数据中有介绍，这里不再累述”

服务器代码如下：

 [HttpPost]
        public ActionResult SearchWorkersCap(WorkersCapFilter filter)
        {
            var query = _workersCapRepository.AsQueryable();
            return new JsonNetResult(DataSourceResult<WorkersCap>.From(query, filter));
        }

//这里jsonNetResult是我用json.net第三方json序列话软件做的一个类。然后datasourceResult.From方法我返回一个DataSourcResult对象。

具体代码也给大家看下:

public class DataSourceResult<TResult>
    {
        public object ExtraData { get; set; }

        public IEnumerable Data { get; set; }

        public object Errors { get; set; }

        public int Total { get; set; }
        public static DataSourceResult<TResult> From(IQueryable<TResult> query, KendoPagedFilter filter)
        {
            var result = new DataSourceResult<TResult>
            {
                Data = query.Skip(filter.Offset).Take(filter.PageSize).ToList(),
                Total = query.Count()
            };
            return result;
        }
    }

总结：

1.我这里datasorce中read方法使用的http传值方法是type: "POST"，contenttype没有设置默认会使用“application/x-www-form-urlencoded; charset=UTF-8”。

2.这里传值contentType为“application/x-www-form-urlencoded; charset=UTF-8”就意味着在后台request.form中有数据。如果使用的application/json的话就在request.form中读取不到数据。这里会牵涉到mvc后台处理机制，是一大块内容就不在这里具体细说值穿过去之后后台是怎么处理的逻辑了。

3.http传值方法使用的是post方法，而没有使用get方法，原因是在ie下面get方法会存在缓存问题还有就是mvc认为这个方式get方法读取数据不是安全的，而且mvc action中返回一个值得时候需要特意指名get 允许。

4.datasorce 在使用分页的情况下会默认传回四个参数，分别是take,skip,page,pageSize。开始用kendo ui的时候找这个参数找的好辛苦啊。

5.如果read需要传回更多的参数的时候，可以再read对象中添加一个data属性方法：function(){   return obj;}。其中return 返回的obj对象和自动合并到传到服务器上面的对象上面去。当然这个方法是在parameterMap方法执行前执行的。

6.服务器返回的值的对象一般会需要包含属性分别是：“data”,"total","error",data是一个数组，也就是具体返回的行数据。total是告诉分页控件服务器有多少条数据，error是存放服务器错误的信息。

7.需要写东西太多了，一年多没有写博客了。。。。。