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.需要寫東西太多了，一年多沒有寫博客了。。。。。