How To Make Web API And How To Get Data Through Xamarin.forms

Learn how to build a Web API and how to consume a Web API in a Xamarin.Forms app.

ASP.NET Web API

The ASP.NET Web API is a stretched cross platform for building HTTP-based services that can be accessed in different applications on different platforms such as iOS, Windows phone, and Android. It works more or less the same way as ASP.NET MVC Web applications, but the exception is that it only supports HTTP protocol.

How To Make Web API And How To Get Data Through Xamarin.forms 

First of all let's discuss how to do this Web-Api procedure.

Create a project in Visual Studio by choosing these features for the ASP.NET project.

How To Make Web API And How To Get Data Through Xamarin.forms 

And then click in the check box MVC. And add Web Api to the given Box.

How To Make Web API And How To Get Data Through Xamarin.forms 

And now when the project is done, move on to the next step..

The next step is create a class with the name of your desire.

Now, my class name is Registration. And write these attributes in it.

  • Id
  • Name
  • Email
  • Password

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5.   
  6. namespace Web_Api.Models  
  7. {  
  8.     public class Registration  
  9.     {  
  10.         public int Id { getset; }  
  11.         public String Name { getset; }  
  12.         public string Email { getset; }  
  13.         public string Password{ getset; }  
  14.     }  
  15. }  

And the Next step is to build the project before adding controller.

How To Make Web API And How To Get Data Through Xamarin.forms 

Add this controller and create it with the name of your class and db class context.

How To Make Web API And How To Get Data Through Xamarin.forms 

And then run your project ….and then add a data in interface designing.

And then add a new controller for the sake of Api .

How To Make Web API And How To Get Data Through Xamarin.forms 

Now run the project …..with the help of url /Api/Registrations.

And now we can check this web-Api on PostMan software.

PostMan software is basically used for the sake of testing our project.

Now the first step is to create a project in Xamarin.forms, for the sake of binding and checking the Api ..

How To Make Web API And How To Get Data Through Xamarin.forms 

Now the next step is to add a class with the same name of the last project and the same attributes.

Go to Main Page.xml. and write this code for designing the  interface.

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              xmlns:local="clr-namespace:App8"  
  5.              x:Class="App8.MainPage">  
  6.     <ListView x:Name="LV">  
  7.         <ListView.ItemTemplate>  
  8.             <DataTemplate>  
  9.                 <ViewCell>  
  10.                     <StackLayout>  
  11.                         <Label Text="{Binding Id}"></Label>  
  12.                         <Label Text="{Binding Name}"></Label>  
  13.                         <Label Text="{Binding Email}"></Label>  
  14.                         <Label Text="{Binding Password}"></Label>  
  15.   
  16.                     </StackLayout>  
  17.                 </ViewCell>  
  18.             </DataTemplate>  
  19.         </ListView.ItemTemplate>  
  20.     </ListView>  
  21. </ContentPage>  

Now install the package, Newton.json, in your project with the help of nutget packege .

Write this code in MainPage.Xamls.cs, for the sake of getting data for the web-Api.

  1. public partial class MainPage : ContentPage  
  2.     {  
  3.         public MainPage()  
  4.         {  
  5.             InitializeComponent();  
  6.             GetRegistration();  
  7.         }  
  8.   
  9.         public async void GetRegistration()  
  10.         {  
  11.             var httpClient = new HttpClient();  
  12.             var response = await httpClient.GetStringAsync("http://localhost:56103/api/Registrations ");  
  13.             var employee = JsonConvert.DeserializeObject<List<employee>>(response);  
  14.             LV.ItemsSource = employee;  
  15.         }  
  16.     }  
  17.       
  18. }  

Now move on  and add registration.

Add a page with the name of AddRegistration.

Go to AddRegistration .xml. and write this code for design interface.

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              x:Class="App8.AddRegistration">  
  5.         <StackLayout>  
  6.             <Entry Placeholder="ID" x:Name="id"></Entry>  
  7.         <Entry Placeholder="Name" x:Name="Name1"></Entry>  
  8. <Entry Placeholder="Email" x:Name="Email1"></Entry>  
  9. <Entry Placeholder="Password" x:Name="Pass"></Entry>  
  10.             <Button Text="AddRegistration" x:Name="Add" Clicked="Add_OnClicked"></Button>  
  11.         </StackLayout>     
  12. </ContentPage>  

Now move to the AddRegistration.Xmls.cs and write this code for the sake of entering data.

  1. private void Add_OnClicked(object sender, EventArgs e)  
  2.         {  
  3.             Registration Registration=new Registration            {  
  4.                 Name =Name1.Text,  
  5.                 Email=Email1.Text  
  6.                 Password=Pass.Text  
  7.   
  8.             } ;    
  9.             var httpClient = new HttpClient();  
  10.             var Json = JsonConvert.SerializeObject(employee);  
  11.             HttpContent httpContent=new StringContent(Json);  
  12.             httpContent.Headers.ContentType=new MediaTypeHeaderValue("application/Json");  
  13.             httpClient.PostAsync("http://localhost:56103/Api/Registration", httpContent);  
  14.             DisplayAlert("Added""Your Data has been added""OK");  
  15.         }  

Add this library with the binding of httpClient and any other classes. 

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

And then add a new page with the name of AddUpdate…

And write this code in AddUpdate.xml,

  1.     <?xml version="1.0" encoding="utf-8" ?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              x:Class="App8.AddUpdate">  
  5.       
  6.         <StackLayout>  
  7.             <Entry Placeholder="ID" x:Name="id"></Entry>  
  8.               <Entry Placeholder="Name" x:Name="Name1"></Entry>  
  9.                <Entry Placeholder="Email" x:Name="Email1"></Entry>  
  10.                <Entry Placeholder="Password" x:Name="Pass"></Entry>             
  11.             <Button Text="AddUpdate" x:Name="Add" Clicked="Add_OnClicked"></Button>  
  12.         </StackLayout>  
  13.      
  14. </ContentPage>  

Now move on to the AddUpdate.Xmls.cs and write this code for the sake of updating data.

  1. private void Add_OnClicked(object sender, EventArgs e)  
  2.   {  
  3.     Registration Registration=new Registration  
  4.             {  
  5.                 Name =Name1.Text,  
  6.                 Email=Email1.Text  
  7.                 Password=Pass.Text  
  8.             };  
  9.             var httpClient = new HttpClient();  
  10.             var Json = JsonConvert.SerializeObject(employee);  
  11.             HttpContent httpContent = new StringContent(Json);  
  12.             httpContent.Headers.ContentType = new MediaTypeHeaderValue("application/Json");  
  13.             httpClient.PutAsync(string.Format ("http://localhost:56103/api/Registration /{0}",Id), httpContent);  
  14.             DisplayAlert("Added""Your Data has been Update""OK");  
  15.         }  

And then add a new page with the name of AddDelete…

And write this code in AddDelete.xml,

  1.     <?xml version="1.0" encoding="utf-8" ?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              x:Class="App8.AddDelete">  
  5.       
  6.         <StackLayout>  
  7.             <Entry Placeholder="ID" x:Name="id"></Entry>  
  8.            <Entry Placeholder="Name" x:Name="Name1"></Entry>  
  9.             <Entry Placeholder="Email" x:Name="Email1"></Entry>  
  10.             <Entry Placeholder="Password" x:Name="Pass"></Entry>  
  11.   
  12.             <Button Text="AddDelete" x:Name="Add" Clicked="Add_OnClicked"></Button>  
  13.         </StackLayout>  
  14.      
  15. </ContentPage>  

Now move on to the AddDelete.Xmls.cs and write this code for the sake of deleting data.

  1. private void Add_OnClicked(object sender, EventArgs e)  
  2.         {  
  3.             Registration Registration=new Registration  
  4.             {  
  5.                 Name =Name1.Text,  
  6.                 Email=Email1.Text  
  7.                 Password=Pass.Text  
  8.             };  
  9.             var httpClient = new HttpClient();  
  10.             var Json = JsonConvert.SerializeObject(employee);  
  11.             HttpContent httpContent = new StringContent(Json);  
  12.             httpContent.Headers.ContentType = new MediaTypeHeaderValue("application/Json");  
  13.             httpClient.DeleteAsync(string.Format ("http://localhost:56103/api/Registration /{0}",Id), httpContent);  
  14.             DisplayAlert("Added""Your Data has been Delete""OK");  
  15.         }