Explore .NET MAUI Blazor Apps with .NET 6.0 & Visual Studio 2022 Version 17.1.0 Preview 1.1

In a previous article, I wrote about .NET MAUI Apps. In this article, I will discuss the Blazor version of .NET MAUI Apps. This is known as .NET MAUI Blazor Apps.

MAUI is not yet officially released. The current bits offer a glimpse into what the final product will look like. 

This is the environment that I am using:

• Windows 11 Version 21H2
• Visual Studio 2022 Version 17.1.0 Preview 1.1
• .NET 6.0.101

Source code for this application can be found at: https://github.com/medhatelmasry/FirstMauiBlazorApp

Setup

You will find installation instructions for .NET MAUI at: https://docs.microsoft.com/en-us/dotnet/maui/get-started/installation

The only workload I installed in Visual Studio 2022 (Preview) is "Mobile development with .NET", as shown below:

It is also worth noting that I do not have any other Android development application (like Android Studio) installed on my computer. The above Visual Studio 2022 workload also installed an Android emulator.

Application

Let's get started exploring what apps we can develop with .NET MAUI. Start Visual Studio 2022 (Preview) and select "Create a new project":

Enter "maui" in the filter field. You will discover that there are three MAUI-related projects that you can create - namely: 

1. .NET MAUI App
2. .NET MAUI Blazor App
3. .NET MAUI Class Library

In this article, I explore the second in the above list - .NET MAUI Blazor App. Select this project type then click Next:

I named my application FirstMauiBlazorApp:

Let's firstly run our app on Windows. From the drop-down-list at the top, make sure you have chosen "Windows Machine".

Click on "Windows Machine" to run the application. Soon after, you should experience the following application running on your desktop:

Stop the application by either closing it or clicking on the red square button on the top of Visual Studio 2022. You will find that the application is installed in your "Apps and Features" on windows. You can, of course, uninstall it if you so desire.

Adding our own page

Add a "Razor Component..." to the Pages folder of your application.

I named my file Toons.razor.

We will modify Toons.razor so that it reads an online API that contains some cartoon characters. If you point your browser to https://apipool.azurewebsites.net/api/toons it will show the following data:

[{"id":1,"lastName":"Flintstone","firstName":"Fred","occupation":"Mining Manager","gender":"M","pictureUrl":"https://api4all.azurewebsites.net/images/flintstone/fred.png","votes":0},{"id":2,"lastName":"Rubble","firstName":"Barney","occupation":"Mining Assistant","gender":"M","pictureUrl":"https://api4all.azurewebsites.net/images/flintstone/barney.png","votes":0},{"id":3,"lastName":"Rubble","firstName":"Betty","occupation":"Nurse","gender":"F","pictureUrl":"https://api4all.azurewebsites.net/images/flintstone/betty.png","votes":0},{"id":4,"lastName":"Flintstone","firstName":"Wilma","occupation":"Teacher","gender":"F","pictureUrl":"https://api4all.azurewebsites.net/images/flintstone/wilma.png","votes":0},{"id":5,"lastName":"Rubble","firstName":"Bambam","occupation":"Baby","gender":"M","pictureUrl":"https://api4all.azurewebsites.net/images/flintstone/bambam.png","votes":0},{"id":6,"lastName":"Flintstone","firstName":"Pebbles","occupation":"Baby","gender":"M","pictureUrl":"https://api4all.azurewebsites.net/images/flintstone/pebbles.png","votes":0},{"id":7,"lastName":"Flintstone","firstName":"Dino","occupation":"Pet","gender":"F","pictureUrl":"https://api4all.azurewebsites.net/images/flintstone/dino.png","votes":0},{"id":8,"lastName":"Mouse","firstName":"Micky","occupation":"Hunter","gender":"M","pictureUrl":"https://api4all.azurewebsites.net/images/disney/MickyMouse.png","votes":0},{"id":9,"lastName":"Duck","firstName":"Donald","occupation":"Sailor","gender":"M","pictureUrl":"https://api4all.azurewebsites.net/images/disney/DonaldDuck.png","votes":0}]

Each JSON object contains the following properties:

id (int)

lastName (string)

firstName (string)

occupation (string)

gender (string)

pictureUrl (string)

votes (int)

Replace the content of Toons.razor with the following code:

@page "/toons"

@using System.Text.Json

@using System.Text.Json.Serialization

<h1>Toon Characters</h1>

@if (toonList == null) {

  <p><em>Loading...</em></p>

} else {

  <table class="table">

    <tbody>

      @foreach (var item in toonList) {

        <tr>

          <td>@item.FullName</td>

          <td><img src="@item.PictureUrl" style="height: 40px" alt="@item.FirstName @item.LastName"> </td>

        </tr>

      }

    </tbody>

  </table>

}

@code {

  private Toon[] toonList;

  protected override async Task OnInitializedAsync() {

      HttpClient client = new HttpClient();

      var stream = client.GetStreamAsync("https://apipool.azurewebsites.net/api/toons");

      toonList = await JsonSerializer.DeserializeAsync<Toon[]>(await stream);

  }

  public class Toon {

    [JsonPropertyName("id")]

    public int Id { get; set; }

    [JsonPropertyName("lastName")]

    public string LastName { get; set; }

    [JsonPropertyName("firstName")]

    public string FirstName { get; set; }

    [JsonPropertyName("occupation")]

    public string Occupation { get; set; }

    [JsonPropertyName("gender")]

    public string Gender { get; set; }

    [JsonPropertyName("pictureUrl")]

    public string PictureUrl { get; set; }

    [JsonPropertyName("votes")]

    public int Votes { get; set; }

    public string FullName {

      get {

        return string.Format("{0} {1}", this.FirstName, this.LastName);

      }

    }

  } 

} 

Finally, edit the home page, Index.razor, so that it displays cartoon characters. This is done by updating Index.razor so that it looks like this:

@page "/"

<Toons />

Run your application and you will see the following output:

Let us see what this app looks like in an android emulator. To setup an emulator, choose Tools >> Android >> Android Device Manager...

You can configure an Android device of your choice. In my case, even though I configured both Pixel 4 & Pixel 5, I found Pixel 4 to be more cooperative.

You can start the emulator of your choice from within the Android Device Manager.

Choose the android emulator of your choice in the run drop-down-list at the top of Visual Studio 2022:

Run your app in the Android emulator. This is what it should look like:

If you have built some application using Blazor, here is an opportunity for you to migrate some of that functionality into the mobile world.