How To Fetch Data Using Web API in Xamarin.Forms

Fetching data from a database via a Web API in Xamarin.Forms is the common functionality developers need. Today, I am going to elaborate on this process with a detailed explanation.

I also have attached step by step screenshots for understanding it easily. 

Steps to create a Web API project

Step 1

How To Fetch Data From Web API Using Xamarin.Forms
  1. First Select Web from left side menu.
  2. Select the ASP.NET Web Application (.NET framework)
  3. Give your project a unique name by your choice.
  4. Press OK.

Step 2

How To Fetch Data From Web API Using Xamarin.Forms
  1. Select the Empty template.
  2. Select MVC (Model View Control and Web API)
  3. Click OK.

How To Fetch Data From Web API Using Xamarin.Forms 

Then this type of window will appear.

Step 3

Add a class into the model by following the screenshot below.

How To Fetch Data From Web API Using Xamarin.Forms 

Right click on to the Model and go to add then select class.

Step 4

How To Fetch Data From Web API Using Xamarin.Forms 

Give it a name and press OK.

Step 5

Now, I am going to make some properties members to the class. These properties represent data.

How To Fetch Data From Web API Using Xamarin.Forms 

I have created a class named “Login” and give it some attributes that are required in a Login page - Id, Email, and Password of type int and strings.

Step 6

How To Fetch Data From Web API Using Xamarin.Forms 

Now build the project. Without a successful build, we won't be able to add a controller.

Step 7

Now after successfully build, add a controller that will give controls to our class attributes.

How To Fetch Data From Web API Using Xamarin.Forms 

Right click on the Controller then go to Add and then select Controller.

How To Fetch Data From Web API Using Xamarin.Forms 

Add MVC 5 controller with views using entity framework. Then click Add.

Why MVC 5 controller with views using entity framework

This option will generate a controller and views for updating, deleting, creating, and displaying the data in your model.

Step 8

How To Fetch Data From Web API Using Xamarin.Forms 
  1. When adding a Controller, give Model class a name that we've generated previously.
  2. Then click on the plus (+) button in the next field. The popup will appear. Just edit it by writing (db) before context and press Add. Then add this controller.

Step 9

How To Fetch Data From Web API Using Xamarin.Forms 

Copy the Selected area and then press the Upper selection for deploying the project. It will open in Google Chrome or your default browser.

Step 10

How To Fetch Data From Web API Using Xamarin.Forms 

After deploying this type of error will appear. No need to worry. Because there is no data available at this point.

Step 11

How To Fetch Data From Web API Using Xamarin.Forms 

Now paste the Get Call text that we have selected in Step 9 above. Then click Enter, the error will vanish and a page for creating data will appear.

Step 12

How To Fetch Data From Web API Using Xamarin.Forms 

Now, on this screen, we can add data. Enter an email and a password and click Create button. This action will add a new record and it will look like the following.

How To Fetch Data From Web API Using Xamarin.Forms 

Our Web API controller is created now. 

Step 13

Now, let's add another controller. Right click on Controllers and select Add > Controller. 

How To Fetch Data From Web API Using Xamarin.Forms 

Select Web API 2 with actions using Entity Framework.

How To Fetch Data From Web API Using Xamarin.Forms 

Select the Web API 2 Controller and press Add button.

Step 14

Give the same name to the new Web API controller as given to the Class before. (i.e. Login)

And then click on Add button. Web API controller will be added.

How To Fetch Data From Web API Using Xamarin.Forms 

Step 15

Now copy the selected area below for getting the Web API in XAML form.

How To Fetch Data From Web API Using Xamarin.Forms 

This selected copied text will put in the next step.

How To Fetch Data From Web API Using Xamarin.Forms 

As you can see in the screenshot below, I have added the copied text in the link area then just press Enter and we will get our XAML file.

How To Fetch Data From Web API Using Xamarin.Forms 

That's all. We've successfully got our XAML file in a browser.

Now we will create a cross-platform application that will use the Web API to fetch this data.

Please follow the few more steps to achieve this goal.

Steps to create a cross-platform application (Xamarin.forms)

Step 1

  1. First select Cross Platform from left side menu.
  2. Then Select Mobile App (Xamarin.Forms)
  3. Give your project a unique name of your choice.
  4. Then Press Ok.

How To Fetch Data From Web API Using Xamarin.Forms 

Step 2
  1. On next screen, select Blank template.
  2. Select Platform (Android, iOS, and UWP). You can select one or more, depending on your target platform.
  3. Then Press Ok.

How To Fetch Data From Web API Using Xamarin.Forms 

Step 3

Right click on your C# file and add a class with the same name as we have created in our Web API project earlier. More over the attributes of this class should be same that we have given our previous class in Web API project, otherwise data will not be fetched.

Follow these next three steps.
 
How To Fetch Data From Web API Using Xamarin.Forms 

Add a class with the same name as in Web API project.

How To Fetch Data From Web API Using Xamarin.Forms 

Same class attributes as in the Web API class.

How To Fetch Data From Web API Using Xamarin.Forms 

New, we will set our front end page that will display data in a ListView control. 

Step 4

Open MainPage.xaml and add the following code. Here we have a ListView control with two Label controls that are bound with the Email and Password.

How To Fetch Data From Web API Using Xamarin.Forms 

Step 5

Add a NuGet package for managing HTTP requests and fetching data.

Follow the steps below to add NuGet package (Newtonsoft.Json).

Right click on your Solution Explorer and select (Manage NuGet Packages for solutions).

How To Fetch Data From Web API Using Xamarin.Forms 

Adding NuGet Package

  1. First go to the Browser.
  2. Write in the search box (Newtonsoft.Json).
  3. Select NuGet Package.
  4. Select All in the project.
  5. Press Install button.

How To Fetch Data From Web API Using Xamarin.Forms 

Let's verify it by going in the Solution Explorer, expand NuGet. You should see Newtonsoft.Json Package in the list.
 
How To Fetch Data From Web API Using Xamarin.Forms 

Step 6

New go to the MainPage.xaml.cs page.

Create a method, Login() and call it just after InitializeCcomponent in the constructor of MainPage.

How To Fetch Data From Web API Using Xamarin.Forms 

This method is declared in the next step. Before that, import two namespace of Newtonsoft.Json package.

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

Http class provides a base class for sending and receiving requests from a URL. It is a supported async feature of .NET framework. HttpClient is able to process multiple concurrent requests. It is a layer over HttpWebRequest and HttpWebResponse.

The Newtonsoft.Json namespace provides classes that are used to implement the core services of the framework. It also provides methods for conversion between .NET types and JSON types.
 
Now, create the Login method as shown below.  
How To Fetch Data From Web API Using Xamarin.Forms 

Copy the link from browser that is running our XAML Code.

How To Fetch Data From Web API Using Xamarin.Forms 

Now paste this link in the response variable for getting all the responses.

How To Fetch Data From Web API Using Xamarin.Forms 

You need to make sure the Web API project is up and running because the Xamarin app will call WebAPI to access data.

How To Fetch Data From Web API Using Xamarin.Forms 

That is all. In this tutorial, we saw how to create a Web API, and connect with a data source. We saw how to create a Xamarin App and how to consume data via a Web API.