Table of Contents

The Task is divided into two phases

  1. WCF REST Service
  2. Windows 8 Application

Download

You can download the project from the following link

Download Source Code

WCF REST Service:

Launch Visual Studio 2012 and Go to File -> New -> Project.

In the New Project Window select Visual C# Template and Choose WCF and Select WCF Service Application and Give the name as StudentService.

 Right click and delete the two default files IService.cs and Service1.svc

Right Click the Project StudentService. Select Add -> New Item from the context menu.

Select Code -> Interface and Give the name as IService.cs

Add the Following code to IService.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;
  
namespace StudentService
{
 [ServiceContract]
 public interface IStudent
 {
 [OperationContract]
 [WebGet(UriTemplate = "/GetStudentData", RequestFormat = WebMessageFormat.Json,ResponseFormat=WebMessageFormat.Json)]
 List<StudentDetails> GetStudentData();
 }
  
 [DataContract]
 public class StudentDetails
 {
 private string name = String.Empty;
 private int age = 0;
  
 [DataMember]
 public string Name
 {
 get { return name; }
 set { name = value; }
 }
 
 [DataMember]
 public int Age
 {
 get { return age; }
 set { age = value; }
 }
 }
 }

 Right Click the Project StudentService. Select Add -> New Item from the context menu.

 Select Web -> WCF Service and Give the name as Student.svc

Add the Following code to Student.svc.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;
  
 namespace StudentService
 {
 public class Service1 : IStudent
 {
  
 public List<StudentDetails> GetStudentData()
 {
 List<StudentDetails> studentList = new List<StudentDetails>();
 studentList.Add(new StudentDetails { Name = "Mike", Age = 24 });
 studentList.Add(new StudentDetails { Name = "Jackson", Age = 22 });
 studentList.Add(new StudentDetails { Name = "Micheal", Age = 20 });
 studentList.Add(new StudentDetails { Name = "David", Age = 28 });
 studentList.Add(new StudentDetails { Name = "Wilson", Age = 26 });
 return studentList;
 }
 }
 }

Now comes the Main part, You need to modify you Web Config file and Specify the end points. Since we are using REST Service we should use web http Binding. Add the following code in you web.config.

 

<?xml version="1.0"?>
 <configuration>
 <appSettings>
 <add key="aspnet:UseTaskFriendlySynchronizationContext" value="true" />
 </appSettings>
 <system.web>
 <compilation debug="true" targetFramework="4.5" />
 <httpRuntime targetFramework="4.5"/>
 </system.web>
 <system.serviceModel>
 <services>
 <service name="StudentService.Service1" behaviorConfiguration="ServiceBehaviour">
 <endpoint binding="webHttpBinding" contract="StudentService.IStudent" behaviorConfiguration="webhttpconfig"></endpoint>
 </service>
 </services>
 <behaviors> 
 <serviceBehaviors> 
 <behavior name="ServiceBehaviour"> 
 <serviceMetadata httpGetEnabled="true" httpsGetEnabled="true"/>
 <serviceDebug includeExceptionDetailInFaults="false"/>
 </behavior>
 </serviceBehaviors>
 <endpointBehaviors>
 <behavior name="webhttpconfig">
 <webHttp/>
 </behavior>
 </endpointBehaviors>
 k;"><behavior name="webhttpconfig">
 <</behaviors>
 <protocolMapping>
 <add binding="webHttpBinding" scheme="http" />
 </protocolMapping> 
 <serviceHostingEnvironment aspNetCompatibilityEnabled="true" multipleSiteBindingsEnabled="true" />
 </system.serviceModel>
 <system.webServer>
 <modules runAllManagedModulesForAllRequests="true"/>
 <directoryBrowse enabled="true"/>
 </system.webServer>
 </configuration>

Now press F5 to Run the Project.

In your Browser you will the following window and Click the Student.svc file.

13 After clicking Student.svc you will see a screen like this

Provide method name in service /GetStudentData with the Student.svc Url and you will see the data returning from the service since IE cant handle JSON data it will download the JSON file. You need to specify this url in you windows 8 Application (Example: "http://localhost:8080/Student.svc/GetStudentData"). The url will differ when you run the application in your machine.

Windows 8 Application:

 Launch Visual Studio 2012 and Go to File -> New -> Project.

In the New Project Window select Visual C# Template and Choose JavaScript and SelectBlankApp and Give the name for your project.

Add the code in your Code in Default.html

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8" />
 <title>TestTemplate</title>
  
 <!-- WinJS references -->
 
 <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
 <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
  
 <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
 
 <!-- TestTemplate references -->
 
 <link href="/css/default.css" rel="stylesheet" />
 <script>
 
script src="/js/default.js">
 </script>
 </head>
 <body>
 <fieldset id="templateControlObject">
 <legend>Pick a person:</legend>
 <select id="templateControlObjectSelector">
 <option value="0">Show one</option>
 <option value="1">Show two</option>
 <option value="2">Show three</option>
 <option value="3">Show All</option>
 </select>
 </fieldset> 
 <div id="templateDiv" data-win-control="WinJS.Binding.Template">
 <div class="templateItem">
 <ol>
 <li><span>Name :</span><span data-win-bind="textContent: Name"></span></li>
 <li><span><span>Name :</span><span data-win-bind="textContent: Name">Age:</span><span data-win-bind="textContent: Age"></span></li>
 </ol>
 </div>
 </div>
 <div id="templateControlRenderTarget"></div>
  
 <script type="text/javascript"> 
  
 var stuList;
 WinJS.Utilities.ready(function (r) {
 
 /* Run the student service project and specify the localhost url in the Url. */
  
 WinJS.xhr({ url: "http://localhost:9814/Student.svc/GetStudentData" }).then(function (r) {
 stuList = JSON.parse(r.responseText);
 });
 var selector = document.getElementById("templateControlObjectSelector");
 selector.addEventListener("change", handleChange, true);
 }, false);
 
 function handleChange(evt) {
 var templateElement = document.getElementById("templateDiv");
 var renderElement = document.getElementById("templateControlRenderTarget");
 renderElement.innerHTML = "";
 var selected = evt.target.selectedIndex;
 var templateControl = templateElement.winControl;
 
 if (evt.target.selectedIndex == 3)
 {
 for (var i = 0; i < stuList.length; i++)
 
 {
 
 templateElement.winControl.render(stuList[i], renderElement);
 
 }
 }
 
 
 else
 {
 while (selected >= 0)
 {
 
 templateElement.winControl.render(stuList[selected--], renderElement);
 }
 }
 } 
 
</script>
 
</body>
 
</html>

the most important line in the following which gets the data from the Web Service is the following code

WinJS.xhr({ url: "http://localhost:9814/Student.svc/GetStudentData" }).then(function (r) {
 stuList = JSON.parse(r.responseText);
 });

Press F5 to run the application.