Consuming JSON Based WCF REST Service in Kendo UI Mobile

In this article we will walk through consumtion of a WCF REST Service in Kendo UI Mobile. We may consider this article is divided into two parts. In part 1, we will see the way to create REST based WCF service and in part 2 of this article we will consume that REST Service in Kendo UI mobile.

Image1.jpg

Creating WCF REST Service

If you are new to WCF and wondering how to create a WCF REST Service then please read some of the many articles on WCF REST Service here .

To get it started quickly fire up Visual Studio and create a new project. From the WCF tab select the WCF Service Application project template.

Image2.jpg

Delete all the codes generated from both the IService1.cs and Service1.svc.cs files.

Although in this article we are not going to fetch and data from a database, we will return a C# collection as data from the WCF REST Service. However we can use any methodologies to create the data model and expose data from the data model as a service.

To make it simple we are going to work with the following business object:

public class Bloggers

    {

        [DataMember]

        public string BloggerID { get; set; }

        [DataMember]

        public string Name { get; set; }

        [DataMember]

        public string Technology { get; set; }

 

    }

Define a service as in the following:
 

  [ServiceContract]

    public interface IService1

    {

 

        [OperationContract]

        [WebGet(UriTemplate = "/GetBloggers",

                ResponseFormat = WebMessageFormat.Json,

                RequestFormat = WebMessageFormat.Json)]

        List<Bloggers> GetBloggers();

 

    }


If you notice, we have explicitly set the Request and Response message format as JSON. The Service is implemented as in the following. There is not much fancy about the service implementation, it is simply creating a collection of business objects and returning.
 

using System.Collections.Generic;

 

namespace RESTServiceForKendo

{

  

    public class Service1 : IService1

    {

 

        public List<Bloggers> GetBloggers()

        {

            List<Bloggers> lstBloggers = new List<Bloggers>()

            {

                new Bloggers { BloggerID = "1", Name= "Jesse Liberty ", Technology = "XAML"},

                new Bloggers { BloggerID = "2" , Name = "Michael Crump" , Technology = "XAML"},

                new Bloggers { BloggerID = "3" , Name = "Chris Eargel" , Technology = "C Sharp"},

                new Bloggers { BloggerID = "4" , Name = "Chris Sells" , Technology = "All"},

                new Bloggers { BloggerID = "5" , Name = "John Bristowe" , Technology = "Web"},

                new Bloggers { BloggerID = "6" , Name = "Todd Anglin " , Technology = "KendoUI"},

                new Bloggers { BloggerID = "7", Name= "John Papa ", Technology = "XAML"},

                new Bloggers { BloggerID = "8" , Name = "Glen Block" , Technology = "REST"},

                new Bloggers { BloggerID = "9" , Name = "Lohith " , Technology = "Telerik"},

                new Bloggers { BloggerID = "10" , Name = "Scott Hanselman " , Technology = "All"},

                new Bloggers { BloggerID = "11" , Name = "Debugmode" , Technology = "Kendo"},

                new Bloggers { BloggerID = "12" , Name = "Pinal Dave " , Technology = "SQL Server"},

                new Bloggers { BloggerID = "12" , Name = "Julie Lerman" , Technology = "Entity Framework"}

                

            };

            return lstBloggers;

        }

    }

}

Next we need to configure an Endpoint. Rather than creating an Endpoint we are going to use a factory class. Class System.ServiceModel.Activation.WebServiceHostFactory enables REST Endpoint on the WCF Service. To set the factory class right-click on Service1.svc and click on view markup. In the markup add a factory class as in the following:

Image3.jpg

After configuring the factory class we are all set with the WCF REST Service. To test the service, run the service in the browser. We should be getting Bloggers information as JSON data in the browser.

Image4.jpg

Once you have data in the browser (if you are using IE then you will be prompted to save returned data), we are all set to consume this data in Kendo UI Mobile.

Consuming in Kendo UI Mobile

We will consume JSON data from the WCF REST service step. If you are using Visual Studio for Kendo UI development then you may find the following article useful:

Setting Development Environment in Visual Studio 2010 using NuGet for KendoUI

To proceed, use the following procedure.

Step 1

First add the required references to work with Kendo UI Mobile. You need to add a reference in the head section of the page.
 

<head>

             <title></title>

             <meta charset="utf-8" />        

             <script src="kendo/js/jquery.min.js"></script>

             <script src="kendo/js/kendo.mobile.min.js"></script>       

             <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />

            

</head>

After adding references we need to initialize the mobile. To do this add the following script just before the closing body tag.
 

<script>

      var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "pageLayOut" });

    </script>

</body>

You can see that the layout and transition has been set. We will create the layout in the next step.

Step 2

After adding a reference we need to create a layout for the application. In the layout we want two buttons in the bottom tabstrip and a back button on the top. The Layout can be created as in the following:
 

<div data-role="layout" data-id="pageLayOut">

                    <header data-role="header">

                           <div data-role="navbar">

                                 <a data-role="backbutton" data-align="left">Back</a>

                                 <span data-role="view-title"></span>

                           </div>

                    </header>

                    <div data-role="footer">

                           <div data-role="tabstrip">

 

                                 <a href="#homeView" data-icon="home">Home</a>

                                 <a href="#bloggerView" data-icon="action">Bloggers</a>

 

                           </div>

                    </div>

             </div>

Step 3

Next we need to create various views. As you notice from the layout we need to create two views. One is homeView and the other bloggerView. In homeView we will display a message.

The homeView is as in the following:
 

<div data-role="view" id="homeView" id="homeView" data-title="Bloggers">

 

            <h1>Welcome!</h1>

            <p>

                In this App we will fetch Bloggers information from WCF REST Service

            </p>

    </div>

 

Step 4

Now we need to create bloggerView. In this view we will put a Kendo UI Mobile ListView control. All the data returned from the service will be bound to this ListView.
 

<div data-role="view" id="bloggerView" data-title="Bloggers" data-show="showBloggers">

           

              <ul id="bloggerList"

                data-source="bloggersData"

                data-endlessScroll="true"

                data-template="bloggersTemplate"

                data-role="listview"

                data-style="inset">               

              </ul>            

     </div>

There are a couple of important points worth discussing about the above code. In the above listview we are setting the data-source and data-template as in the following:

Image5.jpg

So we need to:

  1. Create data-source bloggersData from the returned JSON data from the WCF REST Service (Step 5)

  2. Create data-template bloggersTemplate (Step 4)

Step 4

Data Template allows us to render data as we want. It is used to format the data. A template can be created as in the following. We are creating a Kendo UI list view link button and displaying Name and Technology of the blogger. The Id of this template is set as the data-template property of the list bloggerList.

<script id="bloggersTemplate" type="text/x-kendo-template">
 

<script id="bloggersTemplate" type="text/x-kendo-template">             

                   

                    <a href="\#BloggerDetailsView" class="km-listview-link" data-role="listview-link">

            <h2>#=data.Name#</h2>

            <h4>#=data.Technology#</h4>           

            </a>

                   

 </script>

Step 5

Now we need to create a cdatasource. We are going to create Kendo UI DataSource reading JSON data from the service.

Image6.jpg

In Kendo UI DataSource configuration, the read attribute has been set to the URL of the WCF REST Service. Since the service is retuning JSON data, the Accept type is application/json.

Finally in the data-show method of the view we will fetch data from the DataSource. If you notice, the data-show attribute of the bloggerView is set to showBloggers.

Image7.jpg

Putting all the discussion together the DataSource can be created and data from that can be fetched as shown in following code:
 

var bloggersData;

 

    bloggersData = new kendo.data.DataSource(

       {

           transport: {

               read: {

                   url: "http://localhost:56863/Service1.svc/getBloggers",

 

                   data: {

                       Accept: "application/json"

                   }

               }

           }

 

       });

 

    function showBloggers(e) {

        bloggersData.fetch();

    }

Now we are all set to run the application. On running we should be getting Bloggers data as in the following:

Home View

Image8.jpg

Blogger View

Image9.jpg

In this way you can consume a JSON based WCF REST Service in Kendo UI mobile. I hope you find this article useful. Thanks for reading.
 

Next Recommended Readings