.Net Maui Creating And Using Models And Dtos Complete Guide

Step 1: Create a .NET MAUI Project

First, you need to have the .NET Multi-platform App UI (MAUI) workload installed in Visual Studio. You can create a new project with this setup:

1. Open Visual Studio.
2. Select "Create a new project."
3. Choose "MAUI App (.NET 6)" and click "Next."
4. Enter a project name, location, and solution name, then click "Next."
5. Leave the defaults and click "Create."

Step 2: Define Your Model

A Model is a representation of a data entity in your application. It typically contains properties that correspond to fields in a database or other data source.

For example, let's define a simple Book model:

Create a new folder named Models in your MAUI project.

Inside the Models folder, add a new class file named Book.cs:

// Models/Book.cs
namespace YourProjectName.Models
{
    public class Book
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public string Author { get; set; }
        public int YearPublished { get; set; }
        public string Genre { get; set; }
    }
}

Step 3: Define Your DTO

A Data Transfer Object (DTO) is used to transfer data between layers of an application. It typically has fewer and only necessary properties compared to the full model.

Create another folder named DTOs in your MAUI project.

Inside the DTOs folder, add a new class file named BookDto.cs:

// DTOs/BookDto.cs
namespace YourProjectName.DTOs
{
    public class BookDto
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public string Author { get; set; }
    }
}

Step 4: Create a ViewModel

A ViewModel in MVVM (Model-View-ViewModel) architecture acts as an intermediary between the Model and the View.

Create a new folder named ViewModels in your MAUI project.

Inside the ViewModels folder, add a new class file named BooksViewModel.cs:

// ViewModels/BooksViewModel.cs
using System.Collections.ObjectModel;
using System.Net.Http;
using System.Threading.Tasks;
using Newtonsoft.Json;

namespace YourProjectName.ViewModels
{
    public class BooksViewModel
    {
        public ObservableCollection<Book> Books { get; set; }

        private readonly HttpClient _httpClient;

        public BooksViewModel()
        {
            _httpClient = new HttpClient();
            Books = new ObservableCollection<Book>();
            GetBooksAsync().ConfigureAwait(false);
        }

        private async Task GetBooksAsync()
        {
            var response = await _httpClient.GetStringAsync("https://api.example.com/books"); // Replace with your API URL
            var bookDtos = JsonConvert.DeserializeObject<List<BookDto>>(response);

            foreach (var bookDto in bookDtos)
            {
                Books.Add(new Book
                {
                    Id = bookDto.Id,
                    Title = bookDto.Title,
                    Author = bookDto.Author,
                    YearPublished = 0, // Assuming we don't have year information in DTO
                    Genre = "" // Assuming we don't have genre information in DTO
                });
            }
        }
    }
}

Step 5: Create a View

Now let's create a simple XAML page that binds to our BooksViewModel.

Create a new Content Page in your MAUI project, let's say it's named BooksPage.xaml.

<!-- Views/BooksPage.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="YourProjectName.Views.BooksPage">

    <CollectionView ItemsSource="{Binding Books}">
        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="models:Book">
                <StackLayout Padding="10">
                    <Label Text="{Binding Title}" FontSize="Medium" />
                    <Label Text="{Binding Author}" FontSize="Small" />
                </StackLayout>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>

</ContentPage>

In BooksPage.xaml, make sure to define the namespaces at the top if they don't exist already:

xmlns:models="clr-namespace:YourProjectName.Models"

Step 6: Set the BindingContext

You need to set the BindingContext of BooksPage.xaml to BooksViewModel.

Modify the BooksPage.xaml.cs file:

// Views/BooksPage.xaml.cs
using YourProjectName.ViewModels;

namespace YourProjectName.Views
{
    public partial class BooksPage : ContentPage
    {
        public BooksPage()
        {
            InitializeComponent();
            BindingContext = new BooksViewModel();
        }
    }
}

Step 7: Add Navigation to Your Page

Finally, add navigation to your new BooksPage.

Open your AppShell.xaml file or wherever you are managing navigation.

<!-- AppShell.xaml -->
<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       x:Class="YourProjectName.AppShell">

    <!-- Replace this with your actual navigation items -->
    <TabBar>
        <Tab Title="Books"
             Icon="dotnet_bot.png">
            <ShellContent Route="BooksPage"
                          ContentTemplate="{DataTemplate local:BooksPage}" />
        </Tab>
    </TabBar>

</Shell>

And don't forget to register your page in AppShell.xaml.cs:

// AppShell.xaml.cs
using Microsoft.Extensions.DependencyInjection;
using YourProjectName.Views;

namespace YourProjectName
{
    public partial class AppShell : Shell
    {
        public AppShell()
        {
            InitializeComponent();
            Routing.RegisterRoute(nameof(BooksPage), typeof(BooksPage));
        }
    }
}

Step 8: Run Your Application

Build and run your application to see the BooksPage displaying the list of books retrieved from the API.

Summary

1. Models: Defined a Book model representing the full structure of the data.
2. DTOs: Defined BookDto which is a simplified representation of Book.
3. ViewModel: Created BooksViewModel which fetches the data and transforms it from BookDto to Book.
4. View: Created a simple user interface BooksPage to display books.
5. Navigation: Added navigation to BooksPage through AppShell.