jQuery (kendo) 和 .NET Web Service (asmx) 和 Json 问题...需要帮助

Question

首先，它对该主题进行了大量研究，但找不到答案或完整示例。我对 jquery 没有太多经验，所以我正在寻找一个我想要完成的简单示例。

我想要一个 Web 服务 (asmx) 返回一个 json，我可以使用它来填充网格、组合框、自动完成等。我正在使用 Visual Studio 2008，这就是我得到的，或者我的目标是什么：

ASMX：

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]

[ScriptService]
public class Services : System.Web.Services.WebService
{
    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public List<Preceptor> SearchPrecetor()
    {
        List<Preceptor> myPreceptorList = new List<Preceptor>();
        for (int i = 0; i < 10; i++)
        {
            Preceptor myPreceptor = new Preceptor();
            myPreceptor.Id = i;
            myPreceptor.Name = "Name" + i.ToString();
            myPreceptorList.Add(myPreceptor);

        }


        return myPreceptorList;
    }

    public class Preceptor {
        public int Id {get; set; }
        public string Name { get; set; }
    }
}

Javascript：

$(document).ready(function() {
            $("#acPreceptors").kendoAutoComplete({
            minLength: 3,
            dataTextField: "Name",
            dataSource: {
                type: "json",
                serverFiltering: true,
                serverPaging: true,
                pageSize: 20,
                transport: {
                    contentType: "application/json; charset=utf-8",
                    type: "POST",
                    read: "../Services/Services.asmx/SearchPrecetor"
                }
            }
        });
    });

这是我得到的错误：

Uncaught TypeError: Object #<Document> has no method 'slice' 

我的猜测是整个过程还是有问题，json没有正确到达客户端。同样，我对 jquery 没有太多经验，并且非常感谢一个简单而完整的示例来说明如何做到这一点。

任何想法、链接、代码、修复将不胜感激！谢谢

Answer 1

当我使用 .asmx 服务时，我必须在数据源中添加以下内容...

schema: {
data: "d", // ASMX services return JSON in the following format { "d": <result> }. Specify how to get the result.
model: ....etc...
},

例如，我的基本数据源是...

var sharableDataSource = new kendo.data.DataSource({
                schema: {
                    data: "d", // ASMX services return JSON in the following format { "d": <result> }. Specify how to get the result.
                    model: {    // define the model of the data source. Required for validation and property types.
                        id: "Id",
                        fields: {
                            Id: { editable: false, nullable: true },
                            ... and so forth .....
                        }
                    }
                },
                batch: true, 
                transport: {
                    read: {
                        url: "sMyService.asmx/getList", //specify the URL which data should return the records.
                        contentType: "application/json; charset=utf-8", // tells the web service to serialize JSON
                        type: "POST", //use HTTP POST request as the default GET is not allowed for ASMX
                        data: { Id: 5 }
                    },
                    parameterMap: function (data, operation) {
                        if (operation != "read") {
                            // web service method parameters need to be send as JSON. 
                            return JSON.stringify({ myItems: data.models })
                        } else {
                            return JSON.stringify(data);
                        }
                    }
                }
            });

我的网络服务功能...（创建删除项目数组的代码）

    <WebMethod> _
<ScriptMethod(ResponseFormat:=ResponseFormat.Json, UseHttpGet:=False)> _
Public Function getList(ByVal Id As Integer) As cDetail()
    Dim items As New List(Of cDetail)
    Return items.ToArray()
End Function

Answer 2

在你的数据源中使用这个。

transport: {
    read: {
        contentType: "application/json; charset=utf-8",
        type: "POST",
        url: "../Services/Services.asmx/SearchPrecetor"
    }
}

Answer 3

请查看文档http://docs.kendoui.com/documentation/getting-started/web/autocomplete/overview#using-the-kendo-ui-web-datasource-to-bind-to-jsonp，它都在那里。

我认为应该是：

$(document).ready(function() {
        $("#acPreceptors").kendoAutoComplete({
        minLength: 3,
        dataTextField: "Name",
        dataSource: {
            type: "json",
            serverFiltering: true,
            serverPaging: true,
            pageSize: 20,
            transport: {
                read: {
                  contentType: "application/json; charset=utf-8",
                  type: "POST",
                  url: "../Services/Services.asmx/SearchPrecetor"
              }
            }
        }
    });
});

注意读取对象。

Answer 4

感谢回复的人。一开始我确实搞砸了语法。

之后出现了很多其他问题，以下是我为每个问题找到的解决方案：

（我希望这对将来的其他人有用）

为了让 ASMX Web 服务返回 JSON

Web Service 方法必须有：

[ScriptMethod(ResponseFormat = ResponseFormat.Json)]

请求必须包含：

contentType: "application/json; charset=utf-8"
type: "POST"

为了将参数正确传递给请求

parameterMap: function() {
   return kendo.stringify({ ParamName: $('#myTextBox').val() });
}

由于某种原因，Web 服务将在“d”对象中返回请求。请记住这一点。

始终使用分析器来观察您的请求和响应。

我希望这会有所帮助。