Xamarin Forms Rest Api Integration Using Httpclient And Refit Complete Guide

Part 1: REST API Integration using HttpClient

Step 1: Create a New Xamarin.Forms Project

1. Open Visual Studio.
2. Go to File > New > Project.
3. Select Xamarin.Forms App (.NET Standard).
4. Provide a project name and location, and click Create.
5. Select the template as Blank and make sure Use .NET Standard is selected. Click OK.

Step 2: Add a Model Class

Add a new class for the data that the API will return. This example will use a simple Post class, which is typical for REST APIs.

// Models/Post.cs
namespace YourNamespace.Models
{
    public class Post
    {
        public int UserId { get; set; }
        public int Id { get; set; }
        public string Title { get; set; }
        public string Body { get; set; }
    }
}

Step 3: Create Service to Call the API

Create a service class to handle the API calls using HttpClient.

// Services/ApiService.cs
using System.Collections.Generic;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Text.Json;
using System.Threading.Tasks;
using YourNamespace.Models;

namespace YourNamespace.Services
{
    public class ApiService
    {
        private static readonly HttpClient httpClient = new HttpClient();

        static ApiService()
        {
            // Set the base URL of the API
            httpClient.BaseAddress = new System.Uri("https://jsonplaceholder.typicode.com/");
            httpClient.DefaultRequestHeaders.Accept.Clear();
            httpClient.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
        }

        public async Task<List<Post>> GetPostsAsync()
        {
            var response = await httpClient.GetAsync("posts");

            if (response.IsSuccessStatusCode)
            {
                using (var responseStream = await response.Content.ReadAsStreamAsync())
                {
                    return await JsonSerializer.DeserializeAsync<List<Post>>(responseStream);
                }
            }

            return null;
        }
    }
}

Step 4: Use the Service in XAML and C#

Now, modify the MainPage.xaml and MainPage.xaml.cs to use the ApiService.

MainPage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourNamespace.MainPage"
             Title="HttpClient Example">
    <StackLayout>
        <ListView x:Name="ListViewPosts">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Title}" Detail="{Binding Body}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

MainPage.xaml.cs:

using System.Collections.Generic;
using System.Threading.Tasks;
using YourNamespace.Models;
using YourNamespace.Services;
using Xamarin.Forms;

namespace YourNamespace
{
    public partial class MainPage : ContentPage
    {
        private ApiService apiService;

        public MainPage()
        {
            InitializeComponent();
            apiService = new ApiService();
            LoadPosts();
        }

        private async Task LoadPosts()
        {
            var posts = await apiService.GetPostsAsync();
            if (posts != null)
            {
                ListViewPosts.ItemsSource = posts;
            }
            else
            {
                await DisplayAlert("Error", "Failed to retrieve posts from the API.", "OK");
            }
        }
    }
}

Part 2: REST API Integration using Refit

Step 1: Install Refit NuGet Package

1. Right-click on YourProject in the Solution Explorer.
2. Go to Manage NuGet Packages.
3. Search for Refit and install it.

Step 2: Define an API Interface

Create an interface for your API endpoints.

// Services/IApiService.cs
using System.Collections.Generic;
using System.Threading.Tasks;
using Refit;
using YourNamespace.Models;

namespace YourNamespace.Services
{
    public interface IApiService
    {
        [Get("/posts")]
        Task<List<Post>> GetPostsAsync();
    }
}

Step 3: Implement the API Interface Using Refit

Modify the ApiService class to use the IApiService interface.

// Services/ApiService.cs
using System.Collections.Generic;
using System.Threading.Tasks;
using Refit;
using YourNamespace.Models;

namespace YourNamespace.Services
{
    public class ApiService
    {
        private IApiService apiService;

        public ApiService()
        {
            apiService = RestService.For<IApiService>("https://jsonplaceholder.typicode.com/");
        }

        public async Task<List<Post>> GetPostsAsync()
        {
            return await apiService.GetPostsAsync();
        }
    }
}

Step 4: Use the Service in XAML and C# (Same as before)

No changes are needed here since the service is still being used in the same way.

Summary

• HttpClient is a standard way to consume Web APIs, but it can get verbose.
• Refit provides a more elegant and type-safe way to handle REST APIs, reducing boilerplate code.