簡體   English   中英

Kendo UI Grid WebMethod JSON

[英]Kendo UI Grid WebMethod JSON

我知道已經有很多這樣的東西了。 但是,我已經嘗試了數十個SO帖子/論壇/ Kendo UI網站,但仍然無法正常工作。 我對此深信不疑,任何幫助將不勝感激。

這是我的dataSource聲明:

    var dataSource = new kendo.data.DataSource({
        transport: {
            read: function(options) {
                    $.ajax( {
                            type: "POST",
                            url:  "DepartmentHome.aspx/GetMembers",
                            data: options.data,
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            success: function (msg) {
                                options.success(msg.d);
                                alert(msg.d);
                            }
                        });
            }

        },
        pageSize: 20,
        schema: {
            model: {
                fields: {
                    FirstName: { validation: { required: true} },
                    LastName: { validation: { required: true} }
                }
            }
        }
    });

這是我使用數據源的網格聲明:

    $("#grid").kendoGrid({
        dataSource: dataSource,
        scrollable: true,
        groupable: false,
        sortable: true,
        pageable: {
            refresh: true,
            pageSizes: true
        },
        height: 430,
        toolbar: ["create"],
        columns: [
            { field: "FirstName", title: "First Name", width: "100px" },
            { field: "LastName", title: "Last Name", width: "100px" },
            { command: ["edit", "destroy"], width: "160px" }
            ],
        editable: {
            mode: "popup",
            confirmation: "Are you sure?"
        }
    });

這是我在數據源聲明中調用的WebMethod背后的代碼:

    [WebMethod]
    public static string GetMembers()
    {
        var serializer = new JavaScriptSerializer();
        string json = serializer.Serialize(new { FirstName = "John", LastName = "Smith" });
        return json; 
    }

我知道它正在擊中WebMethod,因為我放入數據源中的警報顯示了正確的數據:

在此處輸入圖片說明

使用firebug,響應頭看起來像這樣: 在此處輸入圖片說明

實際響應如下所示:
在此處輸入圖片說明

但是,網格不會顯示看起來像這樣的數據: 在此處輸入圖片說明

注意:由於某種原因,網格認為它在右下角有39個項目。

我是否缺少明顯的東西? 有沒有更簡單的方法可以做到這一點?

使用data:“ d”代替data:options.data嗎?

並將字符串作為模式定義中兩個字段的數據類型添加。

您的代碼看起來不錯。 成功功能中只需要一項更改。

更改您的代碼,如下所示:

success: function (msg) {
    options.success($.parseJSON(msg.d));
}

$ .parseJSON將您的json字符串轉換為對象。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM