Fill ListView in ASPX using JSON webservice

10 posts, 0 answers
  1. Roman
    Roman avatar
    2 posts
    Member since:
    Jun 2012

    Posted 20 Jun 2012 Link to this post

    Hi,

    I have a mobile project, where I need fill ListView with JSON data. All data is on one row.


    I try to change data, model, ... and another settings, but nothing is help me.

    This is my source code.
    <%@ Page Title="" Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Ecommerce.m.Default" %>
    <!DOCTYPE html>
    <html>
        <head>
            <title>Ecommerce</title
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
            <meta charset="utf-8">
            <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
            <script src="js/jquery.min.js" type="text/javascript"></script>
            <script src="js/kendo.mobile.min.js" type="text/javascript"></script>
        </head>
        <body>
          
             <div data-role="view" id="tabstrip-flat" data-title="Result - view" data-init="mobileListViewDataBindInitFlat" data-layout="mobile-tabstrip"
                <ul id="flat-listview"></ul>
            </div>
     
            <div data-role="layout" data-id="mobile-tabstrip">
                <header data-role="header">
                    <div data-role="navbar">
                        <a class="nav-button" data-align="left" data-role="backbutton">Back</a>
                        <span data-role="view-title"></span>
                        <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
                    </div>
                </header>
                <footer data-role="footer">
                <div data-role="tabstrip">
                    <a href="#tabstrip-flat" data-icon="stop">Flat</a>
                </div>
            </footer>
            </div>
     
        <script type="text/javascript">
            var searchDataSource;
            searchDataSource = new kendo.data.DataSource(
            {
                schema: {
                    data: function (data) {
                        alert(data.d);   /*Data Return Successfully*/
                        return data.d;
                    },
                    //model: {}
                    model: {
                        fields: {
                            Name: { type: "string" },
                            Company: { type: "string" },
                            Address: { type: "string" },
                            Phone: { type: "string" },
                            Country: { type: "string" }
                        }
                    }
                },
                transport: {
                    read: {
                        contentType: "application/json; charset=utf-8",
                        type: "POST",
                        dataType: "json",
                        url: "WebServiceData.asmx/TestJSON"
                    }
                }
            });
           
            function mobileListViewDataBindInitFlat() {
                $("#flat-listview").kendoMobileListView({
                    dataSource: searchDataSource
                    //group: "Country"
                });
            }
     
            </script>
     
        <script type="text/javascript">
            //new kendo.mobile.Application($(document.body), { layout: "foo" });
            var app = new kendo.mobile.Application();
        </script>
             
        </body>
    </html>

    Webservice:
    [WebService(Namespace = "http://tempuri.org/")]
        [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
        [System.ComponentModel.ToolboxItem(false)]
        // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
        [System.Web.Script.Services.ScriptService]
        public class WebServiceProduct : System.Web.Services.WebService
        {
            [WebMethod]
            [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
            public string TestJSON()
            {
                Employee[] e = new Employee[2];
                e[0] = new Employee();
                e[0].Name = "Name1";
                e[0].Company = "Birlasoft Ltd.";
                e[0].Address = "LosAngeles California";
                e[0].Phone = "1204675";
                e[0].Country = "US";
                e[1] = new Employee();
                e[1].Name = "Name2";
                e[1].Company = "Birlasoft Ltd.";
                e[1].Address = "D-195 Sector Noida";
                e[1].Phone = "1204675";
                e[1].Country = "India";
     
                string sReturn = new JavaScriptSerializer().Serialize(e);
                return new JavaScriptSerializer().Serialize(e);
            }
            public class Employee
            {
                public string Name { get; set; }
                public string Company { get; set; }
                public string Address { get; set; }
                public string Phone { get; set; }
                public string Country { get; set; }
            }
     
        }

    I need get list view with rows, I get only one row with all data.
    I don't know, where I do mistake. Can you help me.
    Thanks.

    Roman
  2. Roman
    Roman avatar
    2 posts
    Member since:
    Jun 2012

    Posted 20 Jun 2012 Link to this post

    SOLVED !!! :)

    I solved it more than a day, when I change webservice method from string to object and remove serialization was running.
    I'm sorry for duplicity record in forum.

    public object TestJSON()
    {
        Employee[] e = new Employee[2];
        e[0] = new Employee();
        e[0].Name = "Name1";
        e[0].Company = "Birlasoft Ltd.";
        e[0].Address = "LosAngeles California";
        e[0].Phone = "1204675";
        e[0].Country = "US";
        e[1] = new Employee();
        e[1].Name = "Name2";
        e[1].Company = "Birlasoft Ltd.";
        e[1].Address = "D-195 Sector Noida";
        e[1].Phone = "1204675";
        e[1].Country = "India";
      
        return e;
        //string sReturn = new JavaScriptSerializer().Serialize(e);
        //return new JavaScriptSerializer().Serialize(e);
    }

    Roman
  3. Kendo UI is VS 2017 Ready
  4. Bavya
    Bavya avatar
    8 posts
    Member since:
    Oct 2012

    Posted 01 Nov 2012 Link to this post

    Hello Roman/Telerik team,

     I am new to mobile application and KendoUi and I found it’s very interesting. But I have issue with connecting KendoUi mobile application to database.

     I was creating an Andriod mobile application using phoneGap and KendoUi. And I tried your same code. I also got the same issue like you mentioned. (See image android.png)

     But when I tried your approach (change webservice method from string to object and remove serialization), I got the following error as result of webservice (see image service_error.png)

     So I have made bit modification (added [XmlInclude(typeof(Employee[]))]) in webservice and got this (see image service_result.png ) as xml result.


    index.html (android)

    <!DOCTYPE html>
    <html>
    <head>
     <title>Ecommerce</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
        <meta charset="utf-8">
        <script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.mobile.min.js"></script>
        <script src="js/console.js"></script>
        <link href="styles/kendo.common.min.css" rel="stylesheet" />
        <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
    </head>
    <body>
       <div data-role="view" id="tabstrip-flat" data-title="Result - view" data-init="mobileListViewDataBindInitFlat" data-layout="mobile-tabstrip">
                <ul id="flat-listview"></ul>
            </div>
      
            <div data-role="layout" data-id="mobile-tabstrip">
                <header data-role="header">
                    <div data-role="navbar">
                        <a class="nav-button" data-align="left" data-role="backbutton">Back</a>
                        <span data-role="view-title"></span>
                        <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
                    </div>
                </header>
                <footer data-role="footer">
                <div data-role="tabstrip">
                    <a href="#tabstrip-flat" data-icon="stop">Flat</a>
                </div>
            </footer>
            </div>
      
    <script type="text/javascript">
            var searchDataSource;
            searchDataSource = new kendo.data.DataSource(
            {
                schema: {
                    data: function (data) {
                        alert(data.d);   /*Data Return Successfully*/
                        return data.d;
                    },
                    //model: {}
                    model: {
                        fields: {
                            Name: { type: "string" },
                            Company: { type: "string" },
                            Address: { type: "string" },
                            Phone: { type: "string" },
                            Country: { type: "string" }
                        }
                    }
                },
                transport: {
                    read: {
                        contentType: "application/json; charset=utf-8",
                        type: "POST",
                        dataType: "json",
                        url: "http://192.168.5.109:85/TestService.asmx/TestJSON"
                    }
                }
            });
            
            function mobileListViewDataBindInitFlat() {
                $("#flat-listview").kendoMobileListView({
                    dataSource: searchDataSource
                    //group: "Country"
                });
            }
      
            </script>
      
        <script type="text/javascript">
            //new kendo.mobile.Application($(document.body), { layout: "foo" });
            var app = new kendo.mobile.Application();
        </script>
              
        </body>
    </html>

    TestService.cs
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Services;
    using System.Web.Script.Services;
    using Northwind_newModel;
    using System.Web.Script.Serialization;
    using System.Xml.Serialization;
     
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
    [System.Web.Script.Services.ScriptService]
    public class TestService : System.Web.Services.WebService
    {
        [XmlInclude(typeof(Employee[]))]
        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public object TestJSON()
       //  public string TestJSON()
        {
            Employee[] e = new Employee[2];
            e[0] = new Employee();
            e[0].Name = "Name1";
            e[0].Company = "Birlasoft Ltd.";
            e[0].Address = "LosAngeles California";
            e[0].Phone = "1204675";
            e[0].Country = "US";
            e[1] = new Employee();
            e[1].Name = "Name2";
            e[1].Company = "Birlasoft Ltd.";
            e[1].Address = "D-195 Sector Noida";
            e[1].Phone = "1204675";
            e[1].Country = "India";
           return e;
          //  string sReturn = new JavaScriptSerializer().Serialize(e);
          //return new JavaScriptSerializer().Serialize(e);
        }
        public class Employee
        {
            public string Name { get; set; }
            public string Company { get; set; }
            public string Address { get; set; }
            public string Phone { get; set; }
            public string Country { get; set; }
        }
     
    }


    But now the result getting in mobile is like this ( see image newAndroidResult.png).

    Please help me..

    Thanks
    Bavya.


  5. Ali
    Ali avatar
    16 posts
    Member since:
    Aug 2012

    Posted 03 Nov 2012 Link to this post

    You need to add a template to the list view: e.g.:
    $("#flat-listview").kendoMobileListView({
                    dataSource: searchDataSource,
                    template: "#:data.name#"
                });
  6. Ashutosh
    Ashutosh avatar
    2 posts
    Member since:
    Nov 2012

    Posted 05 Nov 2012 Link to this post

    Hi Bavya,

    You can define the template inside the <body> using script like this:

    <script type="text/x-kendo-template" id="ListViewTemplate">
      <div class="box">${Name}</div>
      <div class="box">${Company}</div>
      <div class="box">${Address}</div>
      <div class="box">${Phone}</div>
      <div class="box">${Country}</div>
    </script>

    and just add the template inside your mobileListViewDataBindInitFlat function like this:

    function mobileListViewDataBindInitFlat() {

      $("#flat-listview").kendoMobileListView({
    dataSource: searchDataSource
         //group: "Country"
     template: $("#ListViewTemplate").text() // new code to be added
                });
            }
    Note: "box" is a CSS class. You can define your own to format the layout.

    I hope this help.
  7. Bavya
    Bavya avatar
    8 posts
    Member since:
    Oct 2012

    Posted 07 Nov 2012 Link to this post


    Hi Ashutosh and Ali,


    Thanks a lot for your reply. But its not working for me. It is not showing any result. Here is my new code. Can you guys please have a try with the code and let me know where I am wrong.

    index.html

    <!DOCTYPE html>
    <html>
    <head>
     <title>Ecommerce</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
        <meta charset="utf-8">
        <script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.mobile.min.js"></script>
        <script src="js/console.js"></script>
        <link href="styles/kendo.common.min.css" rel="stylesheet" />
        <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
    </head>
    <body>
       <div data-role="view" id="tabstrip-flat" data-title="Result - view" data-init="mobileListViewDataBindInitFlat" data-layout="mobile-tabstrip">
                <ul id="flat-listview"></ul>
       </div>
             
    <script type="text/x-kendo-template" id="ListViewTemplate">
        <div>${Name}</div>
        <div>${Company}</div>
        <div>${Address}</div>
        <div>${Phone}</div>
        <div>${Country}</div>
    </script>
      
       <div data-role="layout" data-id="mobile-tabstrip">
         <header data-role="header">
           <div data-role="navbar">
               <a class="nav-button" data-align="left" data-role="backbutton">Back</a>
               <span data-role="view-title"></span>
               <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
           </div>
         </header>
         <footer data-role="footer">
           <div data-role="tabstrip">
              <a href="#tabstrip-flat" data-icon="stop">Flat</a>
           </div>
         </footer>
      </div>
      
    <script type="text/javascript">
            var searchDataSource;
            searchDataSource = new kendo.data.DataSource(
            {
                schema: {
                    data: function (data) {
                        alert(data.d);   /*Data Return Successfully*/
                        return data.d;
                    },
                    //model: {}
                    model: {
                        fields: {
                            Name: { type: "string" },
                            Company: { type: "string" },
                            Address: { type: "string" },
                            Phone: { type: "string" },
                            Country: { type: "string" }
                        }
                    }
                },
                transport: {
                    read: {
                        contentType: "application/json; charset=utf-8",
                        type: "POST",
                        dataType: "json",
                        url: "http://192.168.5.109:85/TestService.asmx/TestJSON"
                    }
                }
            });
            
       function mobileListViewDataBindInitFlat() {
          $("#flat-listview").kendoMobileListView({
              dataSource: searchDataSource,
              //group: "Country"
              template: $("#ListViewTemplate").text() // new code to be added
             });
          }
     </script>
      
     <script type="text/javascript">
        //new kendo.mobile.Application($(document.body), { layout: "foo" });
        var app = new kendo.mobile.Application();
     </script>
              
     </body>
    </html>

    Thanks,
    Bavya.
  8. Ashutosh
    Ashutosh avatar
    2 posts
    Member since:
    Nov 2012

    Posted 07 Nov 2012 Link to this post

    Hi Bavya,

    Your code is working properly on my development environment. Have you tried this code using Safari browser also?
    This may be a browser related issue, as it appears to me on the first look.
  9. Bavya
    Bavya avatar
    8 posts
    Member since:
    Oct 2012

    Posted 08 Nov 2012 Link to this post

    Hi Ashutosh,

     Again thanks for your quick reply. Mine is an android application and I tested it in its simulator. But it was not working. Then I tried it in Visual Studio and tested in safari browser. But still no luck :(
    I have a doubt that it is not working because the service in a remote server. Because I have read somewhere like "For consuming from an external server you would need to change to JSONP ". Can you please check my service? Is this the same way you tried? Do we need to serialize the result? Because as I mentioned in my first forum when I tried that code (Roman's code) I got result, but issue in formatting the result.

     One more thing is there any interoprability issue between asmx webservice and android application?

    Thanks

    Bavya

  10. Bavya
    Bavya avatar
    8 posts
    Member since:
    Oct 2012

    Posted 13 Nov 2012 Link to this post

    Hi Team,


    Any help?


    Thanks
    Bavya
  11. Bavya
    Bavya avatar
    8 posts
    Member since:
    Oct 2012

    Posted 27 Nov 2012 Link to this post

    Hi Telerik team,

    Any thoughts?

    Thanks
    Bavya
Back to Top
Kendo UI is VS 2017 Ready