Exploring Blazor Web Assembly App

Introduction

Blazor App has two hosting models: Server and Web Assembly.

Blazor Web Assembly Hosting Model for applications is used for running Blazor apps on client side browsers. The app is executed on the Web browser. All the dependencies are downloaded in the browser and the execution of the app takes place. App assets are deployed as static content and served to the client.

Blazor.webassembly.js file handles downloading .NET dependencies and running app runtime.

[Source: https://docs.microsoft.com/en-gb/aspnet/core/blazor/hosting-models?view=aspnetcore-3.1#blazor-webassembly]

Getting Started:

Software Requirements

Visual Studio 2019

Setup Application

Open Visual Studio 2019 IDE
Add New Project
Select Blazor App
Give the project a name
Select Blazor WebAssembly App, Un-tick ASP.NET Core hosted.
Click next and start the app to check if everything works correctly.

Exploring Project Structure

The default project structure looks like this,

A few important files:

wwwroot → index.html

Index.html

This file contains all the dependencies that are essential to host the Blazor app on the client side and all the static assets required globally such as:

<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />

Hosting dependencies

<script src="_framework/blazor.webassembly.js"></script>

And a base url for all the relative URL’s used for Single Page Applications.

<base href="/" />

Startup.cs

It defines the bootstrapping component for application start and html tag component to target to run that component.

In this case <app></app> will be rendered to the app component.

The bootstrapping component will be App.razor which by convention translates to App.

App.razor

<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
</Found>
<NotFound>
<LayoutView Layout="@typeof(MainLayout)">
<p>Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>

The above file is App.razor,

Now App.razor uses Router Component which is part of Microsoft.AspNetCore.Components.Routing; it defines Route Handling mechanisms for the application. It contains two tags to handle found and 404 not found scenarios.

If route is found it will be handled in MainLayout. This class, once defined, does not need to be changed frequently. In a rare case we will be changing the contents of this file.

Let’s look at MainLayout as it is part of RouteView Component.

MainLayout.razor

It contains @inherits LayoutComponentBase, <NavMenu /> and @Body razor syntax based tag.

LayoutComponentBase is an abstract class defined in Microsoft.AspNetCore.Components. It contains Body Parameter that is used by this component.

LayoutComponentBase class inherits from ComponentBase class that contains all the events that are handled in the lifecycle of an application.

Here NavMenu is custom component defined. But @Body is mandatory to render content based on what we want to render inside this layout structure.

Now let us look at NavMenu.razor to check how navigation in client applications work.

NavMenu.razor

NavMenu component contains many <NavLink class=”” href=””>LinkName</NavLink> that defines the routes and their links corresponding to a particular route. They work due to the <Router></Router> Tag which is present in application. That tells us that this application uses routing.

Microsoft.AspNetCore.Components.Routing has 2 important components: <Router/> and <NavLink/> . We will use <NavLink/> more frequently. As Router, once defined, will not be altered in App.razor class, NavLink must only be used when navigating between the pages. Instead of <a> tags.

Outside the <NavMenu> also we will be using <NavLink> only to navigate between the links.

Working with Page Components like: Index.razor / FetchData.razor / Counter.razor

These are the application pages. They define all the UI logic and correspond to a particular route.

@page "/"
@page "/fetchdata"
@page "/counter"

This is how routes are mapped to corresponding page components.

We use @page, which is Razor markup for defining a page and its URL.

@code{ } is a code block.

More than one code block can be defined. They contain properties and fields that are state of the component. They contain event logics and other logic.

Events

The event handling is done in @code block.

The events available are:

OnInitializedAsync and OnInitialized
OnParametersSetAsync and OnParametersSet
OnAfterRenderAsync and OnAfterRender
ShouldRender
StateHasChanged
@implements IDisposable to Dispose()

You can find in-depth information about the events here.