Developing Advanced Components in Blazor

In this chapter, we are going to dive deeper into the concept of components by learning about layouts, which define the general shape and the common components of the app pages and how to pass user interfaces (UIs) and other components as parameters using templated components. We will apply these concepts by creating our first layout and templated component. We will also see how we can render components in the UI dynamically using the Dynamic Component technique and learn how to create the Razor Class Library project and package or reuse our components in different projects.

This chapter will provide you with the required knowledge to develop more advanced components, in addition to grouping them in a Razor Class Library for future reusability.

In this chapter, we will cover the following topics:

• Building layouts in Blazor
• Developing templated components
• Rendering components dynamically
• Using the Razor Class Library...

Technical requirements

The code used throughout this chapter is available in the book’s GitHub repository here:

https://github.com/PacktPublishing/Mastering-Blazor-WebAssembly/tree/main/Chapter_03.

Building layouts in Blazor

Most applications have common pieces of UI shared across different pages such as menus, navbars, company branding, and some other content. Rewriting this markup in every page component is very inefficient in modern software development. The solution is to have a single place where we place this shared content and then reference it from the pages, and here is where layout comes into play.

So basically, a layout is a special type of Blazor component that defines the general structure of the app by hosting the shared markup.

Understanding our Blazor project’s default MainLayout

Before getting started with creating our own layout component, let’s understand the default layout that comes with a Blazor project. The MainLayout.razor file within the Shared folder is the default layout for every new Blazor project, so if we open that file, we are going to notice the following:

@inherits LayoutComponentBase<div class="page">...

Developing templated components

We have seen how we can create a component and pass some data to it so it renders them in a specific way; however, what if we want to pass a piece of the UI to that component and inject some markup into it? We call these types of components that take UI elements as parameters templated components.

In templated components, we can receive the UI content to be rendered in a normal parameter, but it’s of the RenderFragment or RenderFragment<Tvalue> types. Each component can have one or multiple RenderFragment parameters.

In this section, we will learn about developing templated components practically by creating two different components that we will use for our project in this book, and which can be used in your other projects as well.

Developing a modal pop-up component

A modal popup is a popular component, as it is the topmost element we see in modern apps. The component allows the user to view further details (for example, for...

Rendering components dynamically

This section’s heading seems interesting, but haven’t we already seen how to render dynamic stuff in the UI? Well, what’s different here is that the component itself is not dynamic, but its rendering is.

Let’s take a real-world scenario that we usually see in many advanced and big apps (Azure Portal, for example), which have a dashboard that is customizable by the user. This app offers a huge collection of widgets (each widget is a component) and the user can create their own dashboard by choosing which widgets to place on the dashboard page.

There are many solutions for such a scenario. For example, we can store the selected widget names in an array and then iterate over the array in the dashboard page, then make an if statement based on the name of the widget, and render the corresponding component. Actually, this works, but if you think about it, the need for a customizable dashboard means a massive number of widgets...

Using the Razor Class Library for packaging and reusability

We have created plenty of components in this chapter and the previous one, but as you may have noticed, all those components are mostly located in the same project within the Shared folder. So, you may have wondered how to use the exact same component in other projects within the same solution or maybe within a totally different solution.

.NET offers another type of project called the Razor Class Library, and the main purpose of this project is to have a Blazor component, and then you can reference this project within your other projects, solutions, your entire organization, or even publish it as a NuGet package so it could be used by other developers worldwide.

In this section, we will create a new Razor Class Library project, reference it within our Books Store project, and learn how to reference static resources such as CSS and JavaScript files within our Blazor WebAssembly project.

Sometimes, reusability is not...

Summary

In this chapter, we covered some interesting topics and concepts in Blazor, from understanding layouts and creating our first one to discovering the amazing concept of templated components while developing and using two interesting components. After that, we went a bit more advanced into showing the power of the DynamicComponent available in Blazor, and finally, we covered the Razor Class Library, understood its benefits, and created and referenced our own component.

After completing this chapter, you should now be able to do the following:

• Create and consume different layouts for your application
• Create templated components to help you wrap and reduce the amount of repeated code by defining a template for a certain task such as a modal popup or a data list view
• Take advantage of the ability of DynamicComponent to have more dynamic UIs in your apps
• Create and reference Razor Class Library projects to have a more organized project structure and more reusability...

Further reading

• Layouts in Blazor: https://docs.microsoft.com/en-us/aspnet/core/blazor/components/layouts?view=aspnetcore-7.0
• Templated components: https://docs.microsoft.com/en-us/aspnet/core/blazor/components/templated-components?view=aspnetcore-7.0
• Dynamic components: https://docs.microsoft.com/en-us/aspnet/core/blazor/components/dynamiccomponent?view=aspnetcore-7.0
• Razor Class Library projects: https://docs.microsoft.com/en-us/aspnet/core/blazor/components/class-libraries?view=aspnetcore-7.0&tabs=visual-studio