Consuming a JSON Service in Window 8 Metro Style Application

In this article we show how to consume a WCF service in a Windows Metro Style Application with Visual Studio 2011.

Introduction

In this article we show how to consume a WCF service in a Windows Metro Style Application with Visual Studio 2011. So, first we are going to explore a WCF service in a Metro Style Application in Visual Studio 2011 on Windows 8. In Windows Metro Style, we have to select a RadioButton, Textbox, Hyperlink and Button and interact with a WCF service in .NET Framework 4.5. This application, upon button click event, loads the data. It is a useful and fully functional web service in Metro Style Apps and it can save efforts (make things easier).

First we have to make a simple WCF service and Metro Style Application customer. So, lets make a WCF service:

• Open Visual Studio 2011
• New>File>Asp.Net Empty Web Application
• Rename this Application

After creating the application, the service interface will look like as:

Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;
using System.ServiceModel.Web; 

// NOTE: You can use the "Rename" command on the "Refactor" menu to change the interface name "ISimpleService" in both code and config file together.
[ServiceContract]
public interface ISimpleService
{
    [OperationContract]
    [WebGet(UriTemplate = "Data", ResponseFormat = WebMessageFormat.Json)]
    List<string> getsomedata();
}

We have to implement the service with the following code.

Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;
using System.ServiceModel.Web;

// NOTE: You can use the "Rename" command on the "Refactor" menu to change the class name "SimpleService" in code, svc and config file together.
public class SimpleService : ISimpleService
{
       public List<string> getsomedata()
       {
        List<string> lst =new List<string>();
        for (int i=0; i<10;  i++)
        {
            System. Threading.Thread.Sleep(100);
            lst.Add(string.Format("total number{0}",i + 1));
        }
        return lst;
       }
}

Output : Here is the web service output.

Here we have to return a list of strings.

Now, we have to publish a WCF service and access this service in a Metro Style Application on the local host.

So, We have to create a Metro Style Application to access this service. We have to follow these steps such as given below.

• Right-click on Solution Item
• Add a new project
• Select Metro Style Application in the template bar
  
  

Now, we have to add a service reference.

In the GridView we have to add the Textbox, RadioButton, Hyperlink, Button and set the format in the GridView. The XAML code will look like as in the following:

Code

<UserControl x:Class="WCFCoustmer.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="768" d:DesignWidth="1366">
    <Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="170*"/>
            <ColumnDefinition Width="335*"/>
            <ColumnDefinition Width="225*"/>           
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="82*"/>
            <RowDefinition Height="189*"/>
            <RowDefinition Height="69*"/>
        </Grid.RowDefinitions>
        <GridView x:Name="griddata" Grid.ColumnSpan="2" Margin="-34,37,352,148" Grid.RowSpan="2" RenderTransformOrigin="0.474999994039536,0.474999994039536" />
        <HyperlinkButton Content="Button for Hyperlink" Grid.Column="1" VerticalAlignment="Bottom" Height="74" Margin="144,0,0,74" HorizontalAlignment="Left" Width="312"/>
        <Button Content="Button" Grid.Column="1" HorizontalAlignment="Right" Height="45" Margin="0,60,231,0" Grid.Row="2" VerticalAlignment="Top" Width="179"/>
        <TextBox HorizontalAlignment="Stretch" Height="29" Margin="85,200,121,191" Grid.Row="1"
                 Text="Textbox" VerticalAlignment="Center" Width="112"/>
        <RadioButton Content="RadioButton" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="141,84,0,0"/>
    </Grid>
</UserControl>

Here, we have to show the designing page look like as.



Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Windows.Foundation;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Data;
namespace WCFCoustmer
{
    partial class MainPage

    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void UserControl_Loaded(object sender, RoutedEventArgs e)
        {

            ServiceReference1.SimpleServiceClient client = new
            ServiceReference1.SimpleServiceClient();          
            var servicedata = client.getsomedataAsync();
            griddata.ItemsSource = servicedata.Result;
        }
    }
} 

On the MainPage.XAML we have the loaded event and the GetSomeDataAsync method used for asynchronous and the await C# keyword and assign the data in the GridView.ItemSource insert the following code. After running this code the data is loaded asynchronously on the button click.

Resources

Here are some useful resources:

• Consuming JSON service in Windows 8 HTML5 Metro App
• Introduction to Windows 8 Metro Style Application
• List View Data Binding in Windows 8 JavaScript Metro Application
• How to Consume WCF REST Service Returning JSON in Windows Phone 7
• RIA Services - exposing JSON endpoint