JSON - ASP.NET Web Service Connection using Twitter Example

4 posts, 0 answers
  1. Christopher Tallos
    Christopher Tallos avatar
    12 posts
    Member since:
    Sep 2009

    Posted 30 Nov 2012 Link to this post

    Here's my code,
    <div id="example" class="k-content">
            <div id="tweets-container" class="k-header k-menu-vertical">
                <h3>
                    Twitter feed</h3>
                <div id="search-box">
                    <label>
                        Search for:
                        <input type="text" value="html5" id="searchfor" class="k-textbox" />
                    </label>
                    <button class="k-button" id="search">
                        search</button>
                </div>
                <div id="tweets">
                    <div>
                        Loading ...
                    </div>
                </div>
            </div>
            <script id="template" type="text/x-kendo-template">
                    <div class="tweet k-header">
                        <img width="48" height="48" src="#= profile_image_url #" alt="#= from_user #" />
                        #= FirstVal #
                    </div>
            </script>
            <script>
                $(document).ready(function () {
                    // create a template using the above definition
                    var template = kendo.template($("#template").html());
     
                    var Product = kendo.data.Model.define({
                        id: "FirstID",
                        fields: {
                                "FirstVal": {
                                type: "string"
                                },
                                "SecondVal": {
                                    type: "string"
                                }
                        }
                    });
     
                    var dataSource = new kendo.data.DataSource({
                        transport: {
                            read: {
                                url: "/ws/getservice.asmx/GetAllTestimonials", // the remove service url
                                data: "{}",
                                contentType: "application/json; charset=utf-8",
                                dataType: "json", // JSONP (JSON with padding) is required for cross-domain AJAX
                                complete: function(data,xhr){
                                    result = JSON.parse(data.d.resposeText);
                                }
                            }
                        },
                        change: function () { // subscribe to the CHANGE event of the data source
                            $("#tweets").html(kendo.render(template, dataSource.view()));
                        }
                    });
     
                    // read data from the remote service
                    dataSource.read();
     
                    $("#search").click(function () {
                        dataSource.read();
                    });
     
                    $("#searchfor").keydown(function (e) {
                        if (e.keyCode === kendo.keys.ENTER) {
                            dataSource.read();
                        }
                    });
                });
            </script>
    Here's my JSON
    [{"FirstID":1,"FirstVal":"Test","SecondVal":"TestOne"},{"FirstID":2,"FirstVal":"Test","SecondVal":"TestTwo"}]
    I'm not sure what I am doing wrong here, any help would be appreciated.
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 03 Dec 2012 Link to this post

    Hello Christopher,

     We are not really sure what you are asking. You have pasted your code but haven't described what the actual problem is. Please clarify.

    Regards,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Christopher Tallos
    Christopher Tallos avatar
    12 posts
    Member since:
    Sep 2009

    Posted 03 Dec 2012 Link to this post

    Hi Atanas,

    My apologies for not being clear on what the issue was.  It turns out that the ASP.NET web service was returning a literal string that was not understood as a JSON array. The solution was to add the jQuery.parseJSON method to the schema data event as shown here
    schema: {
         data: function (data) {
              return jQuery.parseJSON(data.d);
         }
    },
    I guess the only left for me to ask would be is there a better (or more recommended) approach to parsing the data returned by the web service?  Here is my code for anybody experiencing the same issue.  I was using the twitter example provided by Kendo to get to this point.
    <script>
                $(document).ready(function () {
                    // load testimonials
                    var template = kendo.template($("#testimonialtemplate").html());
                    var dataSource = new kendo.data.DataSource({
                        transport: {
                            read: {
                                url: "/ws/getservice.asmx/GetAllTestimonials", // the remove service url
                                data: "{}",
                                contentType: "application/json; charset=utf-8",
                                dataType: "json"
                            }
                        },
                        schema: {
                            data: function (data) {
                                return jQuery.parseJSON(data.d);
                            }
                        },
                        change: function () {
                            $("#testimonialcontent").html(kendo.render(template, this.view()));
                        }
                    }).read();
                });
            </script>
  4. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 04 Dec 2012 Link to this post

    Hello Christopher,

     There is some additional configuration required for a web service to return proper JSON. There is a very good blog post which explains everything.

     You can also check this project which shows how to consume ASP.NET web services with kendo.

    All the best,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top