Consume Rest API from .Net MAUI

Hi guys, I will show you how I consume Rest API from .Net MAUI apps in this blog. As we all know Rest API is essential for mobile apps to send & receive data from databases.

Let’s Jump into it.

What are we going to implement?

We are going to create a sample app that will show user details with the click of Get User button. The user data will be fetched from our favorite Free Fake Rest API - JsonPlaceholder and we are going to fetch data from this URL https://jsonplaceholder.typicode.com/users/1

User Data

Video Output

We will only display the Name, Username & Email of the user.

We will break this blog into the following steps

1. Install Plugins
2. Create View, ViewModel & Model
3. Create RestService class

1. Install Plugins

Install the CommunityToolkit.Mvvm is a very useful plugin that helps us to provide a lot of Mvvm pattern codes inbuilt so that we don’t have to write them manually.

CommunityToolkit.Mvvm

Install Newtonsoft.Json, well is no need to explain why we need this plugin but still, this package is useful for us to serialize & deserialize the JSON data.

Newtonsoft.Json

2. Create View, ViewModel & Model

1. View

I am not creating any new view, we are going to use the existing MainPage.xaml which is given by .Net MAUI out of the box when we create a new project, and will modify it a little bit as per our need.

I have used a Button to get the user details & 4 labels to show user details along with a message to show on API response, and an ActivityIndicator to be displayed while the API call is in progress.

2. ViewModel

Add the ViewModels folder to the project & add MainPageViewModel class to it.

Some of the things to be noticed from the above code are that I have made our ViewModel class a partial class and it should inherit from ObservableObject. Because if we want to use the CommunityToolkit.Mvvm features such as ObservableProperty & AsyncRelayCommand we have to make our ViewModel a partial class.

MainPageViewModel

Another thing to notice is that all the properties with annotation [ObservableProperty] need to be declared in camelCase and while updating those properties their first character should be capitalized for example the property isBusy as shown below.

Observable Property

And the same property is consumed from xaml with Capitalized letter IsBusy.

3. Model

I have created a simple user model with 3 properties Name, Username & Email.

User Model

Add Services & Set BindingContext:

Open the MauiProgram.cs file and add the following lines to add our View & ViewModel to the builder services.

Adding Services

Open the MainPage.xaml.cs and bind the MainPageViewModel as BindingContext to the MainPage.

Setting BindingContext

3. ResetService Call

Let’s create RestServiceCall class where all the API call magic will happen. I have created a Generic type of ResetServiceCall class so that we can reuse that and have added only the Get method as of now.

I have declared Base Url with https://jsonplaceholder.typicode.com/ and HttpClient objects with a 60-second request timeout.

As far as the method Get is concerned, I have taken 3 parameters as follows URL endpoint, Action to be called on API success & Action to be called on API failure with Exception.

We just have to call the method as shown below in our ViewModel to get User Data with respective success & failure methods as parameters.

API Call

Success & Fail Methods

Thanks for following the blog till here you can also view my other .Net MAUI Styles blog from here.