Consuming RESTful Services In Xamarin.Forms

Introduction

In this article, we are going to learn how to consume a RESTful service in Xamarin.Forms PCL application. Xamarin.Forms is used to build cross-platform mobile applications by using C# and XAML.

Targeted Audience

People with basic knowledge of C#, XAML, and the basics of Xamarin.Forms.

If you are going to build your first application, then please read this article before implementing API in your project.

Developing First Cross Platform Application Using Xamarin.Forms

What are RESTful Services?

Representational State Transfer (REST) is an architectural style that specifies constraints such as the uniform interface, that if applied to a web service, induces desirable properties such as performance, scalability, and modifiability that enable services to work best on the Web.

Using RESTful Service in Xamarin.Forms

For this example, we are going to use a fake RESTful service in our application. To use a fake RESTful Service in your application, just search for “JsonPlaceholder” and open the first link.

Link - https://jsonplaceholder.typicode.com/

Now, we have to find an end point to use in our application.

Scroll down on the JSON Placeholder page and you will find the resources.
Xamarin

These are all the end points. You can use them in your application. In this example, we are going to use "/posts" end point. So, click on the link and you will see JSON result. Then, copy the link of the end point to use it in our application.

After hitting the "/posts" end point, you can see the results as shown below.

Xamarin

We are going to use this end point in our application.

Now, we have to convert this JSON into C# class. So, we are going to use an easy way to convert JSON to C# by using “Json2csharp”. Open this link and paste your end point there. You will see that this will automatically generate a C# class from JSON, as shown below.

Xamarin

So, copy the link and class code. We are going to use these in our application. Now, open Visual Studio and make a Xamarin.Forms project.

Now, paste the class code and URL in your xaml.cs file.

Xamarin
In order to consume a web service, you have to add two packages to your project.

Now, add these two packages to every project in the solution.

JSON
Net.Http

In order to add these, follow the path:

Right click on solution -> Manage NuGet Package for solution.

Xamarin

Now, search for Newtonsoft.Json, check all the projects and install the package in solution.

Xamarin

Similarly, search for second package “Microsoft.Net.Http” and install it in all projects of the solution.

Xamarin

Now, add the following namespace of packages on top of your xaml.cs file.

using System.Net.Http;
using Newtonsoft.Json;

Also add a namespace for ObservableCollection which we are using in our project.

using Collections.ObjectModel;

Now, make a simple list on your XAML page. And in this list we will show the list of posts coming from our Service.

XAML

<ListView x:Name="Post_List">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding title}" Detail="{Binding body}"></TextCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

Here, you see that in XAML we declare a List View and bind its title and body to theText cell of a List View.

Back to xaml.cs file, override on appearing method and write some code to get the list of posts.

Code

using System.Collections.Generic;
using System.Net.Http;
using Xamarin.Forms;
using Newtonsoft.Json;
using System.Collections.ObjectModel;
namespace XamarinApp3
{
public class Post
{
public int userId { get; set; }
public int id { get; set; }
public string title { get; set; }
public string body { get; set; }
}
public partial class MainPage : ContentPage
{
private const string url = "https://jsonplaceholder.typicode.com/posts";
private HttpClient _Client = new HttpClient();
private ObservableCollection<Post> _post;
public MainPage()
{
InitializeComponent();
}
protected override async void OnAppearing()
{
var content = await _Client.GetStringAsync(url);
var post = JsonConvert.DeserializeObject<List<Post>>(content);
_post = new ObservableCollection<Post>(post);
Post_List.ItemsSource = _post;
base.OnAppearing();
}
}
}

Line by line explanation of code

This is the complete code for your xaml.cs file. Here, you see that all the namespaces are added. Class code is also here. We can also make a separate class for post. But for this example, I pasted the class code in this file because we are not using this class in other files.

After the class code, our URL is placed, then the object of HttpClient is made and initialized, and after this, we made an observable collection. This collection is initialized later in on appearing method and is assigned to our list view which is made in our XAML file.

Now, in the appearing Method, we use object of our HttpClient() and pass URL in it. After this, we deserialized the content coming from our request and then initialized our observable collection. After this, we set item source of our list to the observable collection.

Output

Xamarin

Here, you will see the list of posts coming from our Service.

Title and body of all posts are shown.

Note

*In part-II of this article, we’ll continue and learn to add and delete these posts.

5 Comments

Join the conversation! Your thoughts help the community grow.

Pradeep Singh8y ago
App get crashed at var content = await _Client.GetStringAsync(url); ?
Gregory Goraj8y ago
This package was restored using '.NETFramework, version=v4.6.1' instead of the project target framework '.NETStandard,Version=v2.0' - is there another package I could use instead? something compatible with the version I have. How to find it ? Thx :)
M Munib8y ago
Need some help . i want login page with json in xamarin forms with out using mvvm model it required urgent
Saurav sah8y ago
Good Work, this is the simplest and easiest way in which we can display data from json.
Arvind Chourasiya8y ago
Hi Umair,Very informative post. Here one thing i want to know that, do we need to use Class Library to have all service calls and entity classes related code or We can do it in fomrs project PCL only