What is Blazor WebAssembly?

This topic can help you understand Blazor WebAssembly: what Blazor WebAssembly is, what advances it provides, and what you might expect as you start to build your websites with Blazor WebAssembly.

Blazor WebAssembly is a single-page application framework, based on ASP.NET. As a framework, Blazor includes:

  • A component-based framework for building single-page applications.
  • A list of built-in features like routing, form management, client-server communication, and more.
  • A suite of development tools to help you refactor code, build, and test.

If you stick with Blazor WebAssembly, you are taking advantage of a framework that can scale from single-developer projects to enterprise-level. Blazor WebAssembly is designed to make your code well-organized, make things as simple as possible, so you can take advantage of the latest developments with a minimum of effort. Most of all, joining the .NET ecosystem means you are joining the biggest ecosystem in the world so that you can easily integrate with the cloud, making your business expand.


Blazor WebAssembly: The core essentials

This section explains the core ideas of Blazor WebAssembly. Understanding these ideas is very important because it can help you develop Blazor WebAssembly websites more effectively.

Components

Components are the building blocks that compose a website. The component in Blazor WebAssembly is called Razor Component. A Razor Component includes HTML template and an @code{ } block for C# codes to update the HTML template and styles. Here is an example of Razor Component.

  • HelloWorld.razor contains HTML template and @code{ } block.
  • HelloWorld.razor.css contains the CSS for the HTML template.

The following is a minimal Razor Component.

<h2>Hello World!</h2>
<p>This is my first component!</p>

@code { 
    // The code in this section drives the component's behaviour. 
}
To use this component, you write the following in another Razor Component:
<HelloWorld></HelloWorld>
When Blazor WebAssembly renders this component, the resulting DOM looks like this:
<!--!-->
<h2>Hello World!</h2>
<p>This is my first component!</p>
<!--!-->

Bindings

Every Razor Component has an HTML template that declares how that component renders. Blazor WebAssembly extends HTML with additional syntax that lets you insert dynamic values from your component. Blazor WebAssembly automatically updates the rendered DOM when your component's state changes. Let's see this example:

<p>@Message</p>
The value of the message comes from the @code{ } block
@code { 
    private string Message = "Hello World!"; 
}
When the Blazor WebAssembly renders the component, the user sees the following:
<p>Hello, World!</p>

Dependency Injection

Dependency Injection allows you to declare the dependencies of C# classes without caring about their initialization. Instead, Blazor WebAssembly handles the initialization for you. This design pattern allows you to write more testable and flexible code. Although understanding dependency injection is not required to use Blazor WebAssembly, we strongly recommend it as a best practice and many aspects of Blazor WebAssembly take advantage of it.

To illustrate how dependency injection works, start with the following simple example:

@using Microsoft.Extensions.Logging

@inject ILogger<HelloWorld> Logger

<h2>Hello World!</h2>

@code {
    protected override void OnInitialized()
    {
        Logger.LogInformation("Dependency Injection is wonderful!");
    }
}

You will need to use the @inject to inject classes from Blazor WebAssembly. Once it is injected, you can use it like another instance. In this example, the Logger instance is injected from Blazor WebAssembly.


.NET CLI

One benefit of using Blazor WebAssembly is that you can use the .NET CLI. .NET CLI is a cross-platform set of commands for developing, building, running and deploying Blazor WebAssembly websites. Here are some examples:
dotnet build Builds a project and all of its dependencies.
dotnet run Runs source code without any explicit compile or launch commands.
dotnet test .NET test driver used to execute unit tests.
dotnet publish Publishes the application and its dependencies to a folder for deployment to a hosting system.

For more information about the .NET CLI, see the Microsoft Docs.


Next steps

This topic is intended to give you a brief overview of what Blazor WebAssembly is, what advances it provides, and what you might expect as you start to build your websites with Blazor WebAssembly.

To see Blazor WebAssembly in action, see our Getting Started tutorial. This tutorial contains an example solution so you can explore and learn.

BLAZOR SCHOOL
Designed and built with care by our dedicated team, with contributions from a supportive community. We strive to provide the best learning experience for our users.
Docs licensed CC-BY-SA-4.0
Copyright © 2021-2025 Blazor School
An unhandled error has occurred. Reload 🗙