Ibraheem Osama Mohamed (ابراهيم اسامه محمد)

Welcome to my blog :)

Consume Soap based JSON Web Service in Windows 8 HTML Metro Style Application

with 2 comments

Before start in the post I should mention something that Yasser Makram posted post about HTMl and Web Services before me :).
You can download my the Sample from the MSDN from Here
Consuming a web service in a non .net language my seen a little harder comparing to .net language. so you may find it harder to consume the web service in HTML .In Windows 8 there something called Windows Runtime Component  which enables to use  VB , C# or C++ Class in you metro Style Application. That’s the point we will consume the web service in C# in an easy way and use C# function tot returns the web service result to JavaScript application.
The sent data will be in JSON Format. Windows 8 doesn’t have a reference to system.json library so you have do download it from NuGet

Let’s Start
1)Add a New Windows 8 JavaScript black Application (The Main Application)

2)In The Solution Add a New WCF Application (The Web Service)

3)Add a New Windows Runtime Component (To consume the web service in an easy way then use it in JavaScript )

4)In the WCF Application open  the  IService1.cs and changed the interface functions to


        string GetJSONData();

and in the Service1.svc  write the following function but don’t forget to include system.json reference in your WCF Application

public string GetJSONData()


            //KeyValuePair<string, JsonValue> pair2 = new KeyValuePair<string, JsonValue>(“FName”, “Ibraheem”);

            //KeyValuePair<string, JsonValue> pair3 = new KeyValuePair<string, JsonValue>(“LName”, “Osama”);

            //List<KeyValuePair<string, JsonValue>> list = new List<KeyValuePair<string, JsonValue>>();




            //KeyValuePair<string, JsonValue> pair4 = new KeyValuePair<string, JsonValue>(“Title”, “SW Developer”);

            //KeyValuePair<string, JsonValue> pair5 = new KeyValuePair<string, JsonValue>(“Interests”, “Metro Style”);

            //List<KeyValuePair<string, JsonValue>> list1 = new List<KeyValuePair<string, JsonValue>>();




            //JsonObject jObject = new JsonObject(list);

            //JsonObject o = new JsonObject(list1);

            //JsonArray array = new JsonArray();




            //KeyValuePair<string, JsonValue> allData = new KeyValuePair<string, JsonValue>(“allData”, array);


            //JsonObject oo = new JsonObject(allData);

            //return oo.ToString();


            string st = @”{“”allData””: [{“”FName””: “”Ibraheem””, “”LName””: “”Osama””, “”Title””: “”SW Developer””,””Interests””:””Metro Style””},{“”FName””: “”Ibraheem””, “”LName””: “”Osama””, “”Title””: “”SW Developer””,””Interests””:””Metro Style””}]}”;

            JsonValue value = JsonValue.Parse(st);

            JsonObject obj = value asJsonObject;

            return obj.ToString();


let’s understand the code : if you are going to write your json data like in the commented code C# will parse the data for you and you’ll not get any troubles in receiving it but if you are going to send it as the not commented code you must parse the data before sending it so in the HTML application you can parse it as json and use it.

5)View the web service in the browser(Run it) . then add a service reference to the web service in the Windows runtime Component project.(Name the reference JSONServiceReference)

6)Now open the Windows Runtime Component and open the added class (You can edit it’s name) and add the following functions

async private static Task<string> getKPIFromWebService()


            return await Task.Run(async () =>


                var client = new JSONServiceReference.Service1Client();

                string data = await client.GetJSONDataAsync();

                return data;




        publicstatic Windows.Foundation.IAsyncOperation<string> getData()


            return getKPIFromWebService().AsAsyncOperation();


7)Now build the Windows Runtime Component project to have the CSharpMetroComponenet.winmd (The reference that you can add in JavaScript project) you’ll find it in YourProject\CSharpMetroComponenet\bin\Debug

8)Now open the HTML Application and add a reference to the  CSharpMetroComponenet.winmd the file we had from last step

9)Open the default.js or default.html and add the following JavaScript Code

var dataClass = CSharpMetroComponenet.WSClass;//this is the name of the windows runtime component then the name of the class
dataClass.getData().then(function (result) {//the name of the class function that returns the data is getData()

var items = JSON.parse(result);//if you didn’t parse the data in the C# you’ll get error in paring it in the JavaScript

(new Windows.UI.Popups.MessageDialog(items.allData[0].FName)).showAsync();//if you don’t understand this //items.allData[0].FName read about json in JavaScript

if you don’t know where to put it in the html between the last scripts tag and in the JavaScript in onactivated function read the comments in the project and you’ll understand.

10) Now run the project and wait 1 or 2 seconds and the message dialog will show to you with the required data
If you have any question you are so welcome

Ibraheem Osama Mohamed


Written by Ibraheem Osama Mohamed

September 8, 2012 at 6:36 pm

2 Responses

Subscribe to comments with RSS.

  1. SutoCom

    September 10, 2012 at 12:52 pm

  2. […] We’ll use Windows RunTime component to receive the soap web service. Read more about consuming here […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: