In this video, we'll explore the process of
integrating Web API methods into a DotNet MAUI application. In our previous video, we created
an ASP.net Core Web API project, specifically creating a product controller to manage
our applications functionality. We have successfully implemented the necessary methods
for performing CRUD operations, encompassing create, read, update and delete operations. Within
our API you will find two distinct HttpGet methods, one for retrieving all the products
and another for fetching a specific product by its unique identifier. Furthermore, we have
included methods to facilitate the creation, modification and removal of products.
To facilitate this integration, we have developed a Class Library project known as "Demo.ApiClient"
which will help us in consuming these API methods. Inside the Demo API client service
class, we have created the methods to interact with the API using the HTTP client object.
In our previous video, we have also created a Blazor application, designed to efficiently
leverage these API methods for managing product data. Now let's delve into the process of
implementing this same functionality in a .NET MAUI application. First, we'll initiate the creation of
a new Maui project within our existing solution. Next, I'll apply a filter to narrow down the
options and focus on the available Maui project templates. Among the choices, you will find the
dotnet MAUI app template which I'll select. For our project to maintain a structured project hierarchy,
we'll house this new project within a folder named presentation. For the Project's name, we label it
as demo dotnet Maui API consumer. With the details in place, let's proceed and create the project.
We now have the project files displayed in the Solution Explorer. First, I'll create a Pages
folder where we'll organize our Content Pages. Let's proceed by relocating the autogenerated
content page labeled "MainPage" into this newly created Pages folder. With main page now in place,
we'll begin customizing it to suit our specific requirements by clearing its existing elements.
Additionally within the 'MainPage.xaml.cs' class, we can safely remove any unnecessary objects and
methods. Following this, we'll establish a project reference to our API client class Library, enabling
us to leverage its methods. Within this .NET MAUI application, you can spot the added library in
the projects folder within the Solution Explorer. Our next step involves navigating to the MAUI
program.cs class to set up dependency injection. To achieve this, we'll integrate the demo API
client service into the Dependency Services, Leveraging the 'AddDemoApiClientService' method
that we created in the previous video. All we need to do is import the necessary namespace to
make it accessible. Now let's configure the API Base Address. Since we'll be running the API
project on this machine for testing purposes, we can use '10.0.2.2' which serves as a reference to the
host machine, when using in the Android emulator. The API application will be listening on port
number 5015 for incoming requests. In addition, we'll include the main page as a dependency using
the AddTransient method. Moving on, we'll open the 'app.xaml.cs' file and designate the MainPage property.
With the main page now established as a dependency, we can retrieve the object through the Constructor
and set it as the initial page. Now within the 'MainPage.xaml' file, I'll provide a straightforward
design to display the list of products. Within this layout, you'll notice two buttons. One for
adding a new product and another for displaying the existing products. We have also incorporated a
ListView control to showcase the added products. As the design details are already covered in
our Dotnet MAUI tutorial playlist, I won't delve into extensive explanations here. I'll proceed to add
the click events for both the buttons and we'll be implementing these functionalities shortly.
Additionally, I'm incorporating the ItemTapped event for the ListView control. When a user taps
on an item, we can present options such as edit and delete. As we transition to the 'MainPage.xaml.cs'
class, you will see the newly created methods. Our next step involves the creation
of a new content page which will facilitate the addition or editing of products. I've named
this page 'AddEditProduct' and I removed the automatically generated VerticalStackLayout
and the label within the AddEditProduct page. I have organized the necessary controls for adding
and editing a product. This includes entry fields for the product code, name and price. We have also
introduced two buttons. One for saving the product and another for cancelling the operation. Let's
proceed to create the button click events right here in this page. Let's begin the implementation
by focusing on the AddEditProduct page. First, we'll declare a private readonly object of our
API client service which is a component of our API client Library. Additionally, will declare
a private object for the product which will be passing from the main page. When editing a
product, we'll obtain the API client service object from the class Constructor and similarly
we'll acquire the product object from the class Constructor itself which will be passed from the
main page. Next, we'll proceed to instantiate our private objects using the received objects. In
addition, I'm introducing a method called LoadProductDetails which will invoke when editing
a product. This allows the users to view the existing product details in the corresponding
Entry Fields. Initially, we'll perform a check to determine whether the product object is null. If
the user is attempting to add a new product the product object will be null and there won't be
a need to populate any data in the Entry Fields. However, if the product object is not null, we'll
populate the values for code, name and price from the product object. Moving forward, we'll proceed
with the implementation of the save functionality. Once again we'll check whether the product object
is null. If it is null, this signifies that we need to add a new product. On the other hand, if it
is not null, we must update the existing product. After successfully saving the details, we'll
close the Page by utilizing the PopModalAsync method. If the product object is null, we can
easily invoke the SaveProduct method of our API client service and provide a new product object
as the parameter. We'll assign the properties by extracting the product code, name and price from
their respective entry fields. For the update operation, we'll call the update product method. In
the product properties, it's crucial to assign the Product ID as the API relies on the identifier for
updating the product. The remaining properties can be assigned in the same manner as when adding
a new product. To handle the cancel button, we can straightforwardly close the ContentPage by
utilizing the PopModalAsync method. With these implementations in place, we have successfully
completed the necessary functionality for this content page. Now let's shift our focus on the main
page. Similarly within the main page, we'll create a private readonly object of our API Client Service.
As we have successfully injected the dependency, we can readily acquire API client service object from
the class Constructor. When the user clicks the add button, we'll seamlessly navigate them to our
AddEditProduct page. To facilitate this transition, we'll provide the necessary parameters. The initial
parameter will be the API client service and the second one will be the product object. In this case,
since the user is attempting to add a new product we can pass null as the product parameter.
Before we proceed with the implementation of the 'Show Products Button' click event, let's first
create a new method named LoadProducts. Within this method, we'll retrieve all the products from
the API client service using the GetProducts method. Subsequently, we can assign the ItemSource
property of the ListView control. Finally, we can invoke the newly created LoadProducts method
when the user clicks the 'Show Products' button. Next, we'll proceed to implement the functionality
when a list item is tapped. We can retrieve the tapped product from the event's item property. But
it's currently of type object. To address this will cast it to the product type. Following this, we'll
display an ActionSheet from which the user can select the desired action. We'll set the title as
'Action' and designate the cancel button text as 'Cancel'. For the destructive button text, we won't
specify any value as it's not needed. Now we'll define the actions to be displayed. In this case, we
require two actions: Edit and Delete. Following the user selection of an action, we'll execute different
tasks. Let's create a switch case to handle two distinct cases: Edit and Delete. If the user opts
for 'Edit' action, we'll seamlessly navigate them to the AddEditProduct page. Here we'll pass the API
client service and the product object. On the other hand, if the user chooses the 'Delete' action, we'll
initiate the product deletion using the delete product method in our API client servers. We'll
also call the LoadProducts method to refresh the list. With these implementations, we have
successfully completed our development process. Before we conclude, let's proceed to test the
application by running it in the emulator. Since we need to run both the API and Android applications
together, I have chosen multiple startup projects in the solution properties. Let's go ahead and run
the application. Great! It appears that both the API and Android applications have loaded successfully.
As you click the show products button, you can see that we are able to view the products that are
already present in the database. Just to verify, I'll run a select query in SQL management studio
and you can observe that we indeed have the same listed products in our database. Now let's attempt
to add a new product. I'm inputting the product code, name and price values and clicking the
save button has seamlessly navigated us back to the main page. Let's refresh the list and you'll
notice the newly added product is now included in the list. Now when tapping on an item, you can
see the ActionSheet displayed. Let's proceed with the editing process. It appears that we missed
a crucial step. The product details are supposed to load into the fields. Let's navigate to the
AddEditProduct.xaml.cs class to rectify this. We actually missed calling the LoadProducts method
in the class Constructor. Let me provide that. I am running the projects again. With both applications
running now, I'll attempt to edit the product you can observe that the product details are now
correctly populated. I'll modify the values and when I click the save button it will seemlessly
navigate us back to the main page. Upon refreshing the list, you can see the modified values have been
successfully updated. Now let's proceed to delete a product and you can observe that the product has
been removed from the list. It's evident that all the API methods are functioning seamlessly and
the application is working perfectly. In summary we have learned how to connect our dotnet Maui app to
a web API. We have covered everything from adding and editing products to listing, updating and
deleting them. If you found this video helpful, please like, share and subscribe the channel. Thanks
for watching and stay tuned for more tutorials.
