Introduction
.NET MAUI (Multi-platform App UI) is a modern framework that enables developers to create cross-platform applications for Android, iOS, macOS, and Windows using a single codebase. In most applications, consuming data from REST APIs is a fundamental requirement. .NET provides the HttpClient class, a powerful and versatile way to handle HTTP requests and responses.
In this article, we will demonstrate how to use HttpClient in a .NET MAUI application to perform GET, POST, PUT, and DELETE operations. We will also display the results using a simple UI, showing responses in JSON format via alerts.
Prerequisites
Before you start, ensure you have the following:
Development Environment:
- .NET 7.0 SDK installed on your machine.
- Visual Studio 2022 with the .NET MAUI workload installed.
Basic Knowledge:
- Familiarity with C# and .NET programming.
- Basic understanding of REST APIs.
Sample API:
- For this tutorial, we will use the placeholder API available at JSONPlaceholder.
Steps to Implement HTTP Operations in .NET MAUI
1. Create a .NET MAUI Project
Open Visual Studio and create a new .NET MAUI App project. Name it HttpClientSample.
2. Define a Model Class
Create a Post class to represent the data structure returned by the API.
public class Post
{
public int Id { get; set; }
public string Title { get; set; }
public string Body { get; set; }
public int UserId { get; set; }
}
3. Create an API Service Class
Encapsulate the logic for making HTTP requests in a reusable service class.
ApiService.cs
using System.Net.Http;
using System.Text;
using System.Text.Json;
using System.Text.Json.Serialization;
public class ApiService
{
private readonly HttpClient _httpClient;
private readonly JsonSerializerOptions _jsonOptions;
public ApiService()
{
_httpClient = new HttpClient
{
BaseAddress = new Uri("https://jsonplaceholder.typicode.com/")
};
_jsonOptions = new JsonSerializerOptions
{
PropertyNameCaseInsensitive = true,
DefaultIgnoreCondition = JsonIgnoreCondition.WhenWritingNull,
WriteIndented = true
};
}
public async Task<List<Post>> GetPostsAsync()
{
var response = await _httpClient.GetAsync("posts");
response.EnsureSuccessStatusCode();
var json = await response.Content.ReadAsStringAsync();
return JsonSerializer.Deserialize<List<Post>>(json, _jsonOptions);
}
public async Task<Post> CreatePostAsync(Post newPost)
{
var jsonContent = new StringContent(JsonSerializer.Serialize(newPost, _jsonOptions), Encoding.UTF8, "application/json");
var response = await _httpClient.PostAsync("posts", jsonContent);
response.EnsureSuccessStatusCode();
var json = await response.Content.ReadAsStringAsync();
return JsonSerializer.Deserialize<Post>(json, _jsonOptions);
}
public async Task<Post> UpdatePostAsync(int id, Post updatedPost)
{
var jsonContent = new StringContent(JsonSerializer.Serialize(updatedPost, _jsonOptions), Encoding.UTF8, "application/json");
var response = await _httpClient.PutAsync($"posts/{id}", jsonContent);
response.EnsureSuccessStatusCode();
var json = await response.Content.ReadAsStringAsync();
return JsonSerializer.Deserialize<Post>(json, _jsonOptions);
}
public async Task<bool> DeletePostAsync(int id)
{
var response = await _httpClient.DeleteAsync($"posts/{id}");
return response.IsSuccessStatusCode;
}
}
4. Build the User Interface
Design the UI in MainPage.xaml with buttons for each HTTP operation.
MainPage.xaml
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="HttpClientSample.MainPage"
Title="HTTP Client Demo">
<StackLayout Padding="20" Spacing="15">
<Label Text="HTTP Operations"
FontSize="24"
HorizontalOptions="Center" />
<Button Text="GET Data"
Clicked="OnGetClicked" />
<Button Text="POST Data"
Clicked="OnPostClicked" />
<Button Text="PUT Data"
Clicked="OnPutClicked" />
<Button Text="DELETE Data"
Clicked="OnDeleteClicked" />
</StackLayout>
</ContentPage>
Add event handlers in the MainPage.xaml.cs to invoke the respective methods from the ApiService.
MainPage.xaml.cs
using System.Text.Json;
public partial class MainPage : ContentPage
{
private readonly ApiService _apiService;
public MainPage()
{
InitializeComponent();
_apiService = new ApiService();
}
private async void OnGetClicked(object sender, EventArgs e)
{
try
{
var posts = await _apiService.GetPostsAsync();
string json = JsonSerializer.Serialize(posts, new JsonSerializerOptions { WriteIndented = true });
await DisplayAlert("GET Response", json, "OK");
}
catch (Exception ex)
{
await DisplayAlert("Error", ex.Message, "OK");
}
}
private async void OnPostClicked(object sender, EventArgs e)
{
try
{
var newPost = new Post { Title = "New Post", Body = "This is a new post body", UserId = 1 };
var createdPost = await _apiService.CreatePostAsync(newPost);
string json = JsonSerializer.Serialize(createdPost, new JsonSerializerOptions { WriteIndented = true });
await DisplayAlert("POST Response", json, "OK");
}
catch (Exception ex)
{
await DisplayAlert("Error", ex.Message, "OK");
}
}
private async void OnPutClicked(object sender, EventArgs e)
{
try
{
var updatedPost = new Post { Title = "Updated Title", Body = "Updated Body", UserId = 1 };
var updatedData = await _apiService.UpdatePostAsync(1, updatedPost);
string json = JsonSerializer.Serialize(updatedData, new JsonSerializerOptions { WriteIndented = true });
await DisplayAlert("PUT Response", json, "OK");
}
catch (Exception ex)
{
await DisplayAlert("Error", ex.Message, "OK");
}
}
private async void OnDeleteClicked(object sender, EventArgs e)
{
try
{
var isDeleted = await _apiService.DeletePostAsync(1);
string message = isDeleted ? "Post deleted successfully." : "Failed to delete the post.";
await DisplayAlert("DELETE Response", message, "OK");
}
catch (Exception ex)
{
await DisplayAlert("Error", ex.Message, "OK");
}
}
}
Conclusion
In this article, we explored how to use HttpClient in a .NET MAUI application to perform CRUD operations on a REST API. We created a reusable service class for HTTP requests, designed a simple UI, and displayed results in JSON format using alerts. This implementation is a starting point for integrating REST APIs into your .NET MAUI applications.
Feel free to extend this example by adding features such as error handling, logging, and more advanced UI elements. Happy coding!
Follow Us
Were this world an endless plain, and by sailing eastward we could for ever reach new distances