ASP.Net Web API Service in Windows Phone: Part 4 of Many

Before reading this article, please go through the following articles:

1. Creating First HTTP Service using ASP.NET Web API: Part1 of Many

2. Consuming ASP.NET Web API Service using HttpClient: Part2 of Many

3. How to Self-Host ASP.Net Web API: Part 3 of Many  

In this article we will consume an ASP.Net Web API HTTP Service in a Windows Phone Application. If you do not specify header information in a HTTP request then by default the ASP.Net Web API service returns JSON data. So essentially there are three steps involved in consuming a HTTP Service from an ASP.Net Web API in a Windows Phone Application.

1. Make a HTTP Request
2. Read data from HTTP Response
3. Parse returned JSON data and bind data to data bound control

In this article we are going to consume a service created in this article.

I have created a Windows Phone Application by targeting Framework 7.1. We are going to display Bloggers Data returned from an ASP.Net Web API service in a ListView. Essentially we are going to consume JSON Data from a HTTP Service. To do that add the following references in the project:



We are going to de-serialize JSON data using the DataContractJsonSerializer class. We need to create a class at the client side representing a Bloggers entity from the service. Let us create a class called BloggersClient. We will de-serialize JSON data returning from the HTTP service in this object of this class.

namespace WindowsPhoneClient

{

    public class BloggersClient

    {

        public string Id { get; set; }

        public string Name { get; set; }

        public string AreaOfIntrest { get; set; }

 

    }

}

Once the client class has been created, add the following references:



We are going to download JSON data from the ASP.Net Web API service using the WebClient class. Make sure that you are passing the URL of your HTTP Service.



In the completed event, we will parse the returned JSON using the DataContractJsonSerializer class. In the following code:

1. Creating MemoryStream form returned result
2. Creating object to de-serialize the returned JSON data
3. Reading de-serialized data object in List of BloggersClient
4. Setting List of BloggerClient as ItemSource of ListBox. On the XAML we have put a ListBox with name lstBloggers.

The code behind to load data from the ASP.Net Web API HTTP Service on the page load event of the application and display in the ListBox is as in the following:

using System;

using System.Collections.Generic;

using System.Net;

using Microsoft.Phone.Controls;

using System.Runtime.Serialization.Json;

using System.IO;

using System.Text;

 

namespace WindowsPhoneClient

{

    public partial class MainPage : PhoneApplicationPage

    {

        // Constructor

        public MainPage()

        {

            InitializeComponent();

            WebClient proxy = new WebClient();

            proxy.DownloadStringCompleted +=

                              new DownloadStringCompletedEventHandler(proxy_DownloadStringCompleted);

            proxy.DownloadStringAsync(new Uri("http://localhost:39192/api/Bloggers"));

        }

 

        void proxy_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)

        {

            Stream s = new MemoryStream(Encoding.Unicode.GetBytes(e.Result));

            DataContractJsonSerializer ser = new DataContractJsonSerializer(typeof(List<BloggersClient>));

            List<BloggersClient> result = (List<BloggersClient>) ser.ReadObject(s);

            lstBloggers.ItemsSource = result;

        }

    }

}

In the XAML, we have used a ListBox control to bind data from the HTTP Service in the control.

If you are not aware of Data Binding in a ListBox then watch a quick Video here.
 

<Grid x:Name="LayoutRoot" Background="Transparent">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

 

        <!--TitlePanel contains the name of the application and page title-->

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

            <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>

            <TextBlock x:Name="PageTitle" Text="ASP.Net Web API" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

        </StackPanel>

 

        <!--ContentPanel - place additional content here-->

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

            <ListBox x:Name="lstBloggers">

                <ListBox.ItemTemplate>

                    <DataTemplate>

                        <StackPanel Orientation="Vertical">

                            <TextBlock Text="{Binding Name}" Style="{StaticResource PhoneTextTitle2Style}" />

                            <TextBlock Text="{Binding AreaOfIntrest}" Style="{StaticResource PhoneTextAccentStyle}" />

                        </StackPanel>

                    </DataTemplate>

                </ListBox.ItemTemplate>

            </ListBox>

        </Grid>

    </Grid>

Now press F5 to run the application. You should able to get the Blogger's details from the ASP.Net Web API service in the Windows Phone Application.



I hope you find this article useful. Thanks for reading.