Consuming JSON in Windows 8 Metro style
Application using WinJS
In this post
Since creating a simple REST
Service returning JSON is not the main focus of this post, I will show creation
WCF REST Service returning JSON in a later part of this post.
Consuming JSON using WinJS
We need to consume the service in a HTML 5 Metro application. Very first let us design a HTML page
default.html
<!DOCTYPE
html>
<html>
<head>
<meta
charset="utf-8"
/>
<title>HelloWorldJavaScript</title>
<!-- WinJS references -->
<link
rel="stylesheet"
href="/winjs/css/ui-dark.css"
/>
<script
src="/winjs/js/base.js"></script>
<script
src="/winjs/js/wwaapp.js"></script>
<!-- HelloWorldJavaScript references -->
<link
rel="stylesheet"
href="/css/default.css"
/>
<script
src="/js/default.js"></script>
</head>
<body>
<label
>First
Number</label>
<input
id="TextboxFirstNumber"
type="text"
/>
<br/>
<label
>Second
Number</label>
<input
id="TextboxSecondNumber"
type="text"
/>
<br
/>
<button
id="ButtonAdd">+</button>
<br
/>
<span
id="SpanResult"
/>
</body>
</html>
I have put a button and two
text boxes. User will input number to be added in textboxes and on click event
of the button service would get called.
In the JS file to make call to
REST Service returning JSON, we need to make call using WinJS.xhr
![metrostylapp.gif]()
In the above snippet
1. The url is URL of REST Service
2. Using JSON.parse we are parsing returned text
3. ResultSpan is span in which result is being
displayed
defaul.js
(function
()
{
'use strict';
WinJS.Application.onmainwindowactivated
=
function
(e)
{
if
(e.detail.kind
===
Windows.ApplicationModel.Activation.ActivationKind.launch)
{
Calculator();
function
Calculator()
{
var
Number1
=
document.getElementById('TextboxFirstNumber');
var
Number2
=
document.getElementById('TextboxSecondNumber');
var
ResultSpan
=
document.getElementById('SpanResult);
var
ButtonToAdd
=
document.getElementById('ButtonAdd');
ButtonToAdd.addEventListener('click',
function
()
{
var
baseURl
=
"http://test2dj8.cloudapp.net/Service1.svc/rest/add/";
var
url
=
baseURl+Number1.value+"/"+Number2.value;
WinJS.xhr({
url:
url
}).then(function
(r)
{
var
result
=
JSON.parse(r.responseText);
ResultSpan.innerHTML
=
result;
});
});
}
}
WinJS.Application.start();
})();
Creating simple Add Service
To start with let us create a
WCF REST Service returning JSON as below. There is one operation contact named
Add in the service and that is taking two strings as input parameters and
returning integer.
[ServiceContract]
public interface
IService2
{
[OperationContract]
[WebGet(UriTemplate="/Add/{Number1}/{Number2}",RequestFormat=WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json
)]
int
Add(string Number1,
string Number2);
}
Service is implemented as below
using
System;
namespace
MultipleBindingWCF
{
public
class Service1
: IService2
{
public
int Add(string
Number1, string Number2)
{
int num1 = Convert.ToInt32(Number1);
int num2 = Convert.ToInt32(Number2);
return num1 + num2;
}
}
}
Next in this
section we need to configure service. We need to configure service
webHttpBinding to eanble it as REST Service. So in Web.Config
we need to do the below changes.
<?xml
version="1.0"?>
<configuration>
<system.web>
<compilation
debug="true"
targetFramework="4.0"
/>
</system.web>
<system.serviceModel>
<behaviors>
<serviceBehaviors>
<behavior
name
="servicebehavior">
<serviceMetadata
httpGetEnabled="true"/>
<serviceDebug
includeExceptionDetailInFaults="false"/>
</behavior>
</serviceBehaviors>
<endpointBehaviors>
<behavior
name="restbehavior">
<webHttp/>
</behavior>
</endpointBehaviors>
</behaviors>
<services>
<endpoint
name
="RESTEndPoint"
contract
="MultipleBindingWCF.IService2"
binding
="webHttpBinding"
address
="rest"
behaviorConfiguration
="restbehavior"/>
</service>
</services>
</system.serviceModel>
<system.webServer>
<modules
runAllManagedModulesForAllRequests="true"/>
</system.webServer>
</configuration>
After configuring, Service is ready
for hosting. After hosting consume service in Windows 8 Metro application.
I hope this post is useful. Thanks for reading.