How To Fetch Data Using Web API in Xamarin.Forms

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

Steps to create a Web API project

Step 1

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

1. Select the Empty template.
2. Select MVC (Model View Control and Web API)
3. Click OK.

 

Then this type of window will appear.

Step 3

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

 

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

Step 4

 

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.

 

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

 

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.

 

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

 

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

 

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

 

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

 

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

Step 11

 

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

 

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.

 

Our Web API controller is created now. 

Step 13

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

 

Select Web API 2 with actions using Entity Framework.

 

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.

 

Step 15

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

 

This selected copied text will put in the next step.

 

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.

 

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.

 

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.

 

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.

 

 

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

 

Same class attributes as in the Web API class.

 

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.

 

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).

 

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.

 

Let's verify it by going in the Solution Explorer, expand NuGet. You should see Newtonsoft.Json Package in the list.

 

 

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.

 

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.  

 

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

 

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

 

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

 

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.