Creating a Blazor WebAssembly Application — Part 3

Blazor WebAssembly is a great way to create Single Page Application (SPA) apps using C# language. In this part 3 of the series “Creating a Blazor WebAssembly Application”, I present how to create the Razor components (also known as Blazor components) for Categories and Books. If you want to check the previous articles, you can read part 1 by clicking here, and part 2 by clicking here.

Components Overview

As mentioned in the first article of this series, Blazor apps are based on components, similar to other SPAs. A component in Blazor is an element of UI (such as a page, a dialog, a button, etc), which can be used once or multiple times in the app. A component has the .razor extension in its file name, and it’s built with C# code, HTML, and contains the UI and the logic of this UI.

There are four components that we will need for this project:

At the end of the implementation, that’s how the components should look like:

The component to list the categories:


The Component to Add or Edit a category:


The component to list the books:


The component to Add/Edit a book:


Install Blazored Toast

Before starting with the components implementation, let’s add a package that will be used to show messages of success and error in the app. In order to do that, we can create our own message component, or we can make use of some existing package for that. For this project, let’s add the “Blazored Toast” package, which can be installed in the project via NuGet package (search by Blazored.Toast):

The complete documentation related to how to configure (personalization) and how to use the component can be found on this GitHub repository.

With this component (after being configured in the project), we can make use of Toast messages like this:

Adding references in Index.html

Let’s add the following references in the index.html file:

[Extra]: Alternatively, instead of using bootstrap from a CDN, you can also install bootstrap directly in your project. If you want to do that, right-click in the project > select the option Add > select “Client-side library” > in the “Provider” field select cdnjs, and in the “Library” search for bootstrap and select the version you want and click on Install. This will add the bootstrap files to a new lib folder inside wwwroot, so just remember to update the configuration in the index.html file.

In this same file, on line 24, there is a reference to the blazor.webassembly.js file:

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

This is the JavaScript file that loads the Blazor application and it is already included in a Blazor project. We don’t need to configure anything, this is automatically configured by Microsoft.


The MainLayout.razor component, is the default layout when creating a Blazor project using the template. Let’s then update the CSS for changing the color of our app. You can click on the left arrow and you will see the CSS class for this component. In this CSS class I changed the background color to light blue:

Still in the MainLayout.razor, let’s remove the nav bar at the top of our page, and our razor page should be like this:


In the NavMenu.razor, let’s create the menu with some NavLink, which will generate a button in the UI that will redirect to the components that we are going to have in this app, which are: Home, Categoriesand Books. We don’t have those components yet but don’t worry about that for now, let’s first create the initial structure and later we are going to implement those components. This is the NavMenu.razor with the changes:

On line 4 there is an @onclick event that calls the method ToggleNavMenu, this method will be executed every time the user clicks on the button, and it is responsible to collapse the nav menu depending on the resolution of the screen.

This is the new menu now:

In the Index.razor file (on the Pages folder), let’s do some changes for the Homepage:

On line 1 we have the @page directive, as this is the Home page, we only need to use @page "/" and this means that once the user doesn’t type any specific rout in the URL, it will be redirected to Home.

On line 6, we have a NavLink which refers to books. Since these pages don’t exist yet, in case you run the app and click on some of these buttons, you should see a message saying “Sorry, there’s nothing at this address”.

If you run the application, this is how the UI looks like:

And it is also mobile responsiveness:

Creating the Components

We need to create four components: a component for the list of categories (CategoryList.razor), a component for add/edit a category (CategoryEdit`.razor), a component for the list of books (BookList.razor) and a component for add/edit a book (BookEdit.razor). For demonstration purposes, I’m going to use the two book components as an example, and you can find the complete code in my GitHub by clicking on this link.

When creating components, the name of the component needs to start with an upper case. To create a component, inside the “Pages” folder I create a new folder named “Categories”, where all components related to Category will be added, and a folder named “Books”, where we will create the components related to Book. To create a component, right-click on the folder you want to create> click in Add > and click on “Razor Component…”:

Let’s start implementing the BookList.razor component. This is the final result of this component:

At the beginning of the component, we need to add the @page directive with the name of the page we want this component to have, which in this case is /books. We also need to add the usings that we need, which is the Interfaces and Models. For confirmation dialog, let’s use the IJSRuntime (which represents an instance of a JavaScript runtime to which calls may be dispatched). And let’s also include the IToastService, for the notifications:

With IJSRuntime, we can have a confirmation dialog like this (is not the most beautiful dialog I must say, but it’s helpful and easy to use without creating a component for that):

Now let’s implement the HTML for this component. As demonstrated before, we need a title, a button to add a new book, a search field and a grid to display books. This is the initial part of the Html for this component:

The second part of the HTML, we have the grid of books:

To implement the component’s code, there are two ways to add logic to the component, you can create the C# code inside the @code directive in your Razor component, or you can have a separate file for the code. I will demonstrate how to do it for both cases. For this component, let’s use the code inside the same file, to do that, below the HTML code, add the directive @code, and add the code inside the braces:

Now let’s implement the methods we need:

This is the DeleteBook method:

And the last method is the SearchBook. This method will execute an in-memory filter (it will not make new requests to the API):

This method is called when the user types something in the search field.

The next component we need is the BookEdit.razor component. This component will be used to add a new book and also to edit an existent book. This is how we want to have this component:

For this component, let’s create the C# code in a separate file. So we will need two files, one for the HTML, which is the BookEdit.razor, and one file for the C# code, which is the BookEdit.cs file. Let’s start with the HTML:

The C# code for this component, instead of adding in the same HTML file, we created a new file for it. This class then needs to be a partial class:

The first method we have is the OnInitializedAsync:

After a book is added or edited, the user is redirected to the book list page. For that, there is a private method that will execute this action by using the NavigationManager, which is the NavigateToBooksPage:

The next method is the HandleValidSubmit:

This method is executed when the page is submitted (when the user clicks on the Save button). It will check if the book should be added or updated. If there is an id, means that it is an existent book, so it will update the book, otherwise, it will add a new book.

This is the AddBook method:

This is the UpdateBook method:


As presented in this article, with Blazor we can create components using HTML and C# and Razor, and we can also make use of JavaScript functionalities in our components. Now we have a functional Single Page Application (SPA) made with Blazor WebAssembly and .NET 6.

This is the link for the project in GitHub:

If you like this project, I kindly ask you to give an ⭐️ in the repository.

Thanks for reading!



.NET Software Engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store