Universal Windows Platform - Http Client

Now a days Web API is the most commonly used cloud service for any type of application. It’s flexible and easy to use. It works like normal HTTP get and post method and other advanced functionality. In this article, we’ll talk about how we can retrieve data and send data to the server via Azure Mobile Service API using HttpClient NuGet package. So, let’s get crack in HttpClient in Universal Windows Platform Application.

To make the API we’ve to go to Azure Mobile Service option. If you’ve followed my last article, that described how to create an Azure Mobile Service. Now, open your Mobile Service and navigate to the API tab.



Now, open the Mobile Service, here we’ve named it ‘traffic’, and go to the permission tab. Make the GET & POST permission to everyone and save it.



Now move to the SCRIPT tab, and past the following JavaScript code. Your code may vary due to the Table structure of your Mobile Service.



Here, in GET method, we make a simple SQL query and send to the client who will request it and in POST method we’ve just send the response message ‘Hello world’, if the request made successful.

Now, create a new class and give it a name Item and initialize two property Message and Location.

classItem
{

    [JsonProperty(PropertyName = "message")]
    publicstring Message
    {
        get;
        set;
    }

    [JsonProperty(PropertyName = "location")]
    publicstring Location
    {
        get;
        set;
    }
}

Listing: 1

In MainPage.xaml, the design is same as the previous article. We’ve created a simple ListBox control and bind with the Table’s attribute.

<ScrollViewer>
    <StackPanel Margin="10,10,0,0">
        <ListBox x:Name="listBox" Margin="10,10" RequestedTheme="Dark" FontSize="20" Background="White" Foreground="Black" BorderThickness="1" BorderBrush="Transparent">
            <ListBox.ItemContainerStyle>
                <Style TargetType="ListBoxItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
                </Style>
            </ListBox.ItemContainerStyle>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Border BorderThickness="0,0,0,1" BorderBrush="#c0c0c0">
                        <StackPanel>
                            <TextBlock Foreground="Black" Text="{Binding Message}" />
                            <TextBlock Foreground="Black" Text="{Binding Location}" />
                        </StackPanel>
                    </Border>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </StackPanel>
</ScrollViewer>

Listing: 2

Now in code behind, MainPage.xaml.cs file create a List item named _itemsList of Class Item type, and in Constructor generate a Method stub MainPage_Loaded. All the implementation is given below.

privateList < Item > _itemsList = newList < Item > ();

public MainPage()
{
    this.InitializeComponent();
    this.Loaded += MainPage_Loaded;
}

asyncvoid MainPage_Loaded(object sender, RoutedEventArgs e)
{
    try
    {
        String uri = "_YOUR API URL GOES HERE_";
        JArray items = await GetAsync(uri);

        int i = 0;
        int length = items.Count;

        Debug.WriteLine(length);

        while (i < length)
        {
            _itemsList.Add(newItem
             {
                Message = items[i]["message"].ToString(), Location = items[i]["location"].ToString()
            });
            Debug.WriteLine(items[i]["message"].ToString() + " " + items[i]["location"].ToString()); // For testing purpose.
            i++;
        }

        this.listBox.ItemsSource = _itemsList;

        Item item = newItem
        {
            Message = "",
                Location = ""
        };

        string jsonData = JsonConvert.SerializeObject(item);

        JObject message = await PostAsync(uri, jsonData);
        Debug.WriteLine(message); // For testing purpose.

    } catch (Exception ex)
    {
        Debug.WriteLine(ex.Message);
    }
}

Listing: 3

Here, first we need the API Uri, then Json Array (JArray) and get it from the given Uri. Then we get the length of the Json array and loop while it becomes zero. Inside the loop we insert the items in to the List we’ve created before and then make it the ItemSource of the ListBox.

Then we’ve created a new instance of Item class and declare two null values for POST operation. After that, we send the data to server by serializing it as a Json format. The GetAsynce and PostAsynce methods are given below.

privateasyncTask < JArray > GetAsync(string uri)
{
    var httpClient = newHttpClient();
    var content = await httpClient.GetStringAsync(uri);
    returnawaitTask.Run(() => JArray.Parse(content));
}


publicasyncTask < JObject > PostAsync(string uri, string data)
{
    var httpClient = newHttpClient();
    var response = await httpClient.PostAsync(uri, newStringContent(data));

    response.EnsureSuccessStatusCode();

    string content = await response.Content.ReadAsStringAsync();
    returnawaitTask.Run(() => JObject.Parse(content));
}

Listing: 4

These are the simple implementation of the two methods. The GetAsynce will return the Json Array from the Uri and the PostAsynce will return the success message if the data transfer done successfully. It will check if there is any error by response.EnsureSuccessStatusCode() method.

If we run the Application, it will give the same result but an attribute less than the previous article.



To test your API Uri, you can use Postman Google Chrome App. This is a good way to test the Uri working or not.



You can view the data in different format also test the Uri by GET, POST and many other HTTP methods.

If you want to see the POST is successful or not, you can see the output windows. If you see the success message that you’ve sent from server, then you good to go.



This is the same message in Figure 3 which we’ve set in line number 6.

This article is for demonstration purpose, how you can use the Web API in your Universal Windows Platform Application. Hope this will help to understand the ins and outs of HttpClient Nuget package and handling JSON data. Happy coding.