Building Full Stack Web Apps with Blazor

An introduction to Blazor

In this introduction module, students will get to know the Blazor framework and will explore how Blazor apps run. We will look at web assembly and the link with Blazor as well as the different hosting models of Blazor, including the new server-side rendering model introduced with ASP.NET Core 8. The required tools will also be explored. You will get to know the component model as you’ll build a first, small application too.

Topics:

• Understanding Blazor and WebAssembly
• Working with the different hosting models
• Understanding Blazor Full Stack Web UI
• Using Visual Studio and Visual Studio Code to create Blazor apps
• Using the different templates in Visual Studio
• Creating a first Blazor component

Understanding the core concepts of ASP.NET Core

Blazor is a key part of ASP.NET Core and many of the features are the same, since they are built on the same foundations. In this chapter, you will get to understand the bigger picture and see which foundational concepts, including dependency injection and middleware, can be leveraged.

Topics:

• Understanding ASP.NET Core and the .NET 8 stack
• The history of the different .NET platforms and how we got here
• Working with dependency injection
• Using middleware

Working with Blazor components

Blazor applications are built using components. There are many options to create apps using components, and in this chapter, we will explore the different options. A very important aspect will be data binding which is baked into Blazor, which is covered in-depth in this chapter, as well as the life-cycle of components, which you’ll need to understand to create your apps with the full power of components.

Topics:

• Creating Blazor components
• Using components
• Adding parameters in components
• Data binding in components
• Handling events in component
• Lifecycle hooks in components

Accessing remote data from Blazor apps

Blazor apps need to connect to up-to-date data. There are several ways to do this. In server-side Blazor, we can use EF Core. A better and more scalable approach is using remote data over REST services. In this chapter, we will learn how we can work with remote data.

Topics:

• Setting up an API using ASP.NET Core
• Accessing a REST API from Blazor
• Using HttpClient
• Using services and dependency injection to work with data

Creating forms in Blazor

Forms are a very important concept in any web application. Using the data binding features we have in Blazor, creating forms is very well supported. In this chapter, we will explore data binding further and use it to create different types of forms.

Topics:

• Creating forms in Blazor
• Using the built-in form components
• Validating data in Blazor apps

Routing in Blazor apps

Using the Router in Blazor, we can customize how we can route to different pages and components in our application. In this chapter, we will explore how the router can be used. We will look at the layout component and while we’re at it, we will also explore how state can be stored in the application using a topic called state management.

Topics:

• Routing basics
• Using route constraints
• Working with state management
• Lazy-loading inside Blazor apps

Creating more advanced components in Blazor

By now, you have understood that components are the vital building block for any Blazor application. But there’s much more to discover around them. That will be the focus of this module where we look at topics including the component life cycle, templated components, error boundaries, virtualization, built-in components such as HeadOutlet and QuickGrid and much more.

Topics:

• Built-in components (QuickGrid…)
• Templated components
• Cascading state
• Virtualization
• Error boundaries
• Using @key

Using the JavaScript interop from Blazor apps

Although writing JavaScript isn’t needed to create Blazor apps, some features will require JavaScript to be invoked from Blazor. This includes LocalStorage, drag and drop and many others. In this module, you’ll learn how to bring in functionality exposed by JavaScript into your Blazor apps as well as calling JavaScript from the Blazor application.

Topics:

• Invoking JavaScript code from Blazor
• Using components that use JavaScript under the hood
• Invoking .NET code from JavaScript

Understanding the different hosting models in ASP.NET 8 & Full Stack Web UI

We have already looked at the different hosting models that Blazor supports early in the course. We will now explore these in more depth, as we will first look at how we can convert a WASM application into a Blazor Server app. Since .NET 8 and ASP.NET Core 8, Blazor components can also be use to render server-side. In this chapter too, we will look at this new hosting model and we will move the application to be a server-side rendered app including the new options such as streaming rendering, advanced navigation and form handling and we’ll see how we can then here too, bring in client interactivity by mixing the different hosting models.

Topics:

• Introducing Blazor Full Stack Web UI
• Working with the new Blazor Web App Template
• Using server-side rendering
• Working with streaming rendering
• Advanced navigation and forms handling
• Using the render modes to create mixed applications
• Using Blazor Hybrid

Adding Authentication and Authorization in Blazor

Just like other web applications, Blazor apps will require authentication and authorization. When we are communicating with APIs, then too we need to send in authenticated requests using a token. In this chapter, we will explore how we can secure our Blazor apps.

Topics:

• Adding authentication using ASP.NET Identity endpoints
• Applying authorization

Understanding advanced topics in Blazor

In this final chapter, you’ll get to understand many other features about Blazor, including creating component libraries, state management and unit testing with bUnit.

Topics:

• Applying state management
• Creating unit tests with bUnit
• Creating and reusing component libraries