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

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

The following are the three parts preceding this article:

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; they are:

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 the service created in this Article.

I have created a Windows Phone Application by choosing to target the 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 a JSON Data from a HTTP Service. For that add the following references to 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 the Bloggers entity from the service. Let us create a class called BloggersClient. We will de-serialize the JSON data returned 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 is in place, add the following references:



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



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

1. Creates a MemoryStream form the returned result
2. Creates an object to de-serialize the returned JSON data
3. Reads the de-serialized data object into the List of BloggersClient
4. Sets the List of BloggerClient as the ItemSource of the ListBox. On the XAML we have used a ListBox with the name lstBloggers.

The code behind to load the data from the ASP.Net Web API HTTP Service on the page load of the application and to display it in the ListBox is as 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;

        }

    }

}

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

If you are not familiar with 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 get the Bloggers details from the ASP.Net Web API service in the Windows Phone Application.



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