1

まず、このテーマについて多くの調査を行いましたが、答えや完全な例を見つけることができませんでした。私はjqueryの経験があまりないので、私が達成しようとしていることの簡単なサンプルを探しています.

グリッド、コンボボックス、オートコンプリートなどを設定するために使用できる json を返す Web サービス (asmx) が必要です。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の経験があまりありません。これを行う方法の簡単で完全な例を本当に感謝しています.

考え、リンク、コード、修正をいただければ幸いです。ありがとう

4

4 に答える 4

2

.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);
                        }
                    }
                }
            });

私のWebサービス関数...（削除されたアイテムの配列を作成するコード）

    <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
于 2013-02-22T05:58:47.240 に答える
0

データソースの転送では、これを使用します。

transport: {
    read: {
        contentType: "application/json; charset=utf-8",
        type: "POST",
        url: "../Services/Services.asmx/SearchPrecetor"
    }
}
于 2013-02-21T18:22:35.127 に答える
0

ドキュメントを確認してくださいhttp://docs.kendoui.c​​om/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"
              }
            }
        }
    });
});

読み取りオブジェクトに注意してください。

于 2013-02-21T18:29:44.913 に答える
0

答えてくれた人ありがとう。私は確かに、最初は構文を台無しにしていました。

その後、他にも多くの問題が発生しました。それぞれの解決策を以下に示します。

（これが将来誰かに役立つことを願っています）

ASMX Web サービスが JSON を返すために

Web サービス メソッドには次が必要です。

[ScriptMethod(ResponseFormat = ResponseFormat.Json)]

リクエストには次が含まれている必要があります。

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

パラメータがリクエストに適切に渡されるようにするため

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

何らかの理由で、Web サービスは「d」オブジェクト内でリクエストを返します。心に留めておきます。

常にプロファイラーを使用して、リクエストと応答を監視してください。

これが役立つことを願っています。

于 2013-02-21T21:06:35.560 に答える