如何使用剑道 UI 传输方式？答案

【问题标题】：How to use Kendo UI transport method?如何使用剑道 UI 传输方式？
【发布时间】：2015-05-19 10:46:46
【问题描述】：

这里我正在制作一个 JSON 数组列表并成功返回国家/地区名称 Kendo Grid 显示编辑选项但不显示检索到的值？

 [WebMethod(EnableSession = true)]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true, XmlSerializeString = false)]
    public string coutryNames()
    {
        List<Dictionary<string, string>> list = new List<Dictionary<string, string>>();
        Dictionary<string, string> udemy = new Dictionary<string, string>();
        udemy.Add("92", "Pakistan");
        udemy.Add("91", "India");
        udemy.Add("90", "Afghanistan");
        udemy.Add("82", "Russia");
        udemy.Add("41", "China");
        udemy.Add("40", "Japan");
        udemy.Add("21", "UAE");
        udemy.Add("51", "Srilanka");
        list.Add(udemy);
        JavaScriptSerializer serializer = new JavaScriptSerializer();
        return serializer.Serialize(list);

    }

我正在阅读：

    $(function () {
              var dataSource = new kendo.data.DataSource({
                transport: {

                    read: {
                        url: "Countries.asmx/coutryNames", 
                        contentType: "application/json",
                        type: "GET"
                    },

我想的主要问题是架构和模型让我们看看：

   schema: {

                model: {
                    id: "id",
                    fields: {
                        id: { editable: true, nullable: true },
                        name: { validation: { required: true } }
                    }

                }

我这样显示的剑道网格：

    $("#grid").kendoGrid({
            dataSource: dataSource,
            pageable: true,
            filterable: true,
            height: 400,
            toolbar: ["create"],
            columns: [
                      { field: "id", title: "Identification" },
                      { field: "name", title: "Country Name" },
                      { command: ["edit", "destroy"], title: "&nbsp;", width: "160px" }
            ],
            editable: "popup"
        });
    });

在测试 JSON 数据时采用这种格式：

 <string xmlns="http://tempuri.org/"> 
 [{"92":"Pakistan","91":"India","90":"Afghanistan","82":"Russia","41":"China","40":"Japan","21":"UAE","51":"Srilanka"}]

如何在 Kendo Grid 中查看？

【问题讨论】：

标签： c# asp.net json kendo-ui kendo-grid

【解决方案1】：

创建一个类，Country...

public Country 
{
  public int Id {get; set;}  
  public string Name {get; set;}
}

然后，创建Country 的集合...

public string coutryNames()
    {
        List<Country> list = new List<Country>();
        List.Add(new Country {Id = 92, Name = "Pakistan"});
        //etc
        JavaScriptSerializer serializer = new JavaScriptSerializer();
        return serializer.Serialize(list);
    }

然后您应该能够绑定到 this，因为 JSON 对象将具有与 Kendo 字段匹配的属性。

【讨论】：

【解决方案2】：

这里有一个完整的解决方案

 document.onreadystatechange = function () {



var viewModel = kendo.observable({

    products: new kendo.data.DataSource({


        transport: {

            read: {
                type: "GET",
                url: "/api/Companies/GetAllCompanies2",
                dataType: "json"
            },

            create: {

                 type: "PUT",
                    url: "/api/Companies/UpdateDefCompny",
                  contentType: "application/json; charset=utf-8",
                    dataType: "json",
                async: false

            },
            update: {
                url:"/api/Companies/SaveDefCompny",
                async: false,
                contentType: "application/json",
                dataType: "json",
                type: "POST"
                 // here you need correct api url

            },
            destroy: {
                url: "/api/Companies/Delete", // here you need correct api url
                dataType: "json"
            },


            parameterMap: function (data, operation) {
                if (operation !== "read" && data) {
                    return JSON.stringify(data.models[0]);
                }
            }
        },
        serverPaging: true,
        serverFiltering: true,
        pageSize: 10,
        schema: {
            //data:"Data",
            total: "Count",

            model: {
                id: "Id",
                fields: {
                    Id: { type: "int" },
                    CurrentCurrencyCode: { editable: true, type: "int" },
                    ShortName: { editable: true, type: "string" },
                    FullName: { editable: true, type: "string" },
                    ContactPerson: { editable: true, type: "string" },
                    Address1: { editable: true, type: "string" },
                    CompanyCity: { editable: true, type: "string" },
                    CompanyState: { editable: true, type: "string" },
                    CompanyCountry: { editable: true, type: "string" },
                    ZipPostCode: { editable: true, type: "string" },
                    TelArea: { editable: true, type: "string" }

                }
            }
        },
        batch: true,


    }) 


  });


       kendo.bind(document.getElementById("example"), viewModel);


      }

【讨论】：