Components in Blazor

Components are the main building blocks of each Blazor application. Each component is a self-contained piece of the user interface (UI) and its related logic, and comprises a dynamic part of the application UI. A Blazor application is basically a set of components placed together, each of which has its own responsibility within the UI, and the interaction of these components builds up the full app that we are aiming for in this book.

In this chapter, we are going to understand the concept of components from scratch, create our first component, and then use it. We will discover the available mechanisms to pass data between components by introducing parameters, cascading parameters, and event callbacks.

After that, we will look at the component life cycle events and how we can leverage them during the component’s lifetime. Finally, we will add some CSS styling for a better look.

In this chapter, we will cover the following topics:

• Understanding...

Technical requirements

You can find the source code for this chapter at https://github.com/PacktPublishing/Mastering-Blazor-WebAssembly/tree/main/Chapter_02.

Understanding the concept of components

A Blazor application basically consists of a set of components working together to form rich dynamic applications. Blazor components are formally known as Razor components in which C# and HTML code are combined and the file extension .razor is used. Components can be nested within each other, shared, and reused by a different project.

While developing your Blazor application, you should think about it as an organization, where each component is an employee responsible for a certain task. The collaboration of those employees together is what represents the workflow of the organization. The same concept applies to a Blazor app in which every component should have a clear and specific role in the app UI. At the same time, each component should be able to receive corresponding data from other components to get its part of work done.

The following screenshot shows a sample podcast application (Productive+, which I developed for tracking how...

Moving data among components

Methods in C# work by accepting parameters to process and return other types of data post processing. Blazor components work according to the exact same concept. Because each component represents a piece of UI alongside its logic, there is always the need to give the component some data for it to function according to the set logic. So functionally, a Blazor component either renders the data that is input in a certain way, or responds based on the set logic.

A Blazor component, in some cases, requires some data as an input either to render the data in the UI or to control its internal logic based on the values provided. Also, in many scenarios, components have the ability to send data back to the parent. The effective collaboration of the app components by communicating with each other provides us with the clean, well-functioning, and effective app that we are trying to build.

Luckily, Blazor provides us with powerful mechanisms to allow the transfer...

Discovering the component life cycle

Blazor components go through a set of methods from initialization to rendering and finally being disposed of. These methods have synchronous and asynchronous versions that we can leverage to perform certain tasks.

The following list shows the methods that the components go through; not all of them are being called. Being called depends on whether the component is being rendered for the first time:

• SetParameterAsync: This sets the value of the parameters from the component parent and the route parameters. (More about route parameters will be covered in Chapter 4, Navigation and Routing.)

The default implementation of this method sets the values of the parameters and the cascading parameters available. SetParameterAsync is called only for the first render of the component. Overriding its implementation allows you to control the process of setting the values of the parameters and write some logic based on that, as shown in the BookCard...

Styling the components using CSS

CSS is a web utility that allows us to change the look and feel of our elements. In this section, we will deep dive into the different ways supported by Blazor with which we can add CSS styles to our components.

In Blazor apps, we have four different ways to style our components:

• Global styles
• Isolated styles (scoped)
• Inline styles
• Embedded styles

Isolated styles

Blazor provides us with a powerful way to style our components by keeping the styles separated from each other. This means small, clean styles, scoped for each component.

To reference the isolated styles, you need to add a link tag with a reference using the syntax {AssemblyName}.styles.css.

Let’s get started using isolated styles to style our BookCard component:

1. Create a CSS file in the same folder of the BookCard component following the convention {ComponentName}.razor.css – in our case, BookCard.razor.css. This will make Visual...

Summary

Throughout this chapter, we have discovered various aspects of Blazor components, including how to create them using Razor syntax. We have also written our first component and learned how we can pass data between our components from parents to children and vice versa using parameters, cascading parameters, and EventCallbacks.

We also understood the life cycle events of each Blazor component, which are helpful to execute some logic in certain stages in the component’s lifetime. Finally, we walked through the available ways to write our project’s CSS, and saw how Blazor handles things behind the scenes for isolated CSS.

By now, you should be able to do the following:

• Create and use a Blazor component
• Pass data between components and across the components hierarchy
• Leverage the component life cycle events and react to certain changes within the component lifetime in the app
• Style your components and learn the different ways to deal with...

Further reading

• Cascading values and parameters: https://docs.microsoft.com/en-us/aspnet/core/blazor/components/cascading-values-and-parameters?view=aspnetcore-7.0
• Component life cycle: https://docs.microsoft.com/en-us/aspnet/core/blazor/components/lifecycle?view=aspnetcore-7.0
• Isolated CSS styles: https://docs.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-7.0