Blazor WASM Application

Introduction 

 

This sample Blazor WASM (WebAssembly https://webassembly.org/) application, aims to demonstrate a client-side application.

 

The sample use case is an application that lists all the Noble Houses in a dropdown. The user can then select any of the House to retrieve information around the House.

 

For use case, a simple HTTP REST API has been created which serves as a data provider to the client application.

 

 

 

 

 

Functionality

 

The MainLayout aims to set up a structure for the application. Here, we can add the Header, Navigation Bar, and Footer component place holders.

 

MainLayout.razor

@inherits LayoutComponentBase
    <div class="w3-container">
            @Body
    </div>

@code{
}

Index.razor

 

It displays the list of Houses in a dropdown. The value that is selected by the user is bind to the _selectedHouse variable.

 

The foreach loops over the Houses collection & adds an option to the select input.

 

The button Get Details, when clicked an event is generated which is handled by HandleGet function.

<div class="w3-row-padding">
    <div class="w3-col m3">
        <select class="w3-select w3-border" id="houses" @bind="_selectedHouse">
            <option>---Select House---</option>

            @foreach (var house in Houses)
            {
                <option value="@house.Id">@house.Name</option>
            }

        </select>
    </div>
    <div class="w3-col m1 w3-left ">
        <button class="w3-button w3-black w3-round-xxlarge" @onclick="HandleGet">Get Details</button>
    </div>
</div>

The below code is executed on the pageload or an Initialized event. Here, HttpClient is used to make an HTTP call to the API.

protected override async Task OnInitializedAsync()
    {
        Houses = await HttpClient.GetFromJsonAsync<House[]>("house");
    }

The HandleGet is the event handler that handles the click event of the Get Details button. Here we retrieve the selected value by the user which is bound to _selectedHouse.

 

The selected value is then used to make an HTTP call to retrieve the House details.

private async Task HandleGet()
   {
       long houseid;

       if (long.TryParse(_selectedHouse, out houseid) == false)
       {
           return;
       }

       House = await HttpClient.GetFromJsonAsync<House>($"house/{houseid}");
   }

Once the House details are retrieved and assigned to the variable, the below code helps to display the information.

@if (House != null)
{
    <div class="w3-card-4">

        <header class="w3-container">
            <h1>@House.Name</h1>
        </header>

        <div class="w3-container">
            <div class="w3-row-padding">
                <div class="w3-col m2 ">
                    <img src="data:image/jpeg;base64,@House.Banner" style="max-width:100%;padding:10px;" alt="Banner" />
                </div>
                <div class="w3-col m10" style="padding:10px;">
                    @House.Information
                </div>
            </div>
        </div>

    </div>
}

HTTP Client Injection

 

HTTP Client is configured & added to the Service collection so that it can be injected throughout the application. For the current purpose, the base URL is set to point towards the API which provides data for the application.

builder.Services.AddTransient(sp => new HttpClient
           {
               BaseAddress = new Uri("http://localhost:5010/api/")
           });

Injecting the HTTP Client in pages.

@inject HttpClient HttpClient

Running/Developing the Application.

 

Basics.GameOfThrones.Api

 

Execute the http://localhost:5010/api/seed endpoint on the API URL, so that an In-Memory database can be seeded with information.

dotnet run Basics.GameOfThrones.Api.csproj

Basics.GameOfThrones.BlazorWebApp

 

Note the watch switch. The watch monitors any changes made to any files, once the changes are saved, it automatically recompiles the application.

dotnet watch run Basics.GameOfThrones.BlazorWebApp.csproj

I hope that this article helps you to understand a quick sample application in Blazor.

 

The source code is available on GitHub