Introduction to Blazor
Blazor allows you to build any kind of application, from building
a static web site (like ASP.NET MVC) to highly interactive Single Page
Applications, and also desktop and mobile applications. Blazor has it all!
Here we will have a high-level look at the features available in Blazor
for building the web site of the future!
- Blazor Components replacing MVC Controllers and Views
- Converting a static web site with Blazor
- Adding Streamed Rendering to improve user experience
- Using Blazor to add interactivity to part of the web site
- Introducing Web Assembly with .NET and Blazor
- Introducing the different application models
- Blazor Features Overview
- Using Visual Studio Templates to Get Started
- LAB: Getting started with Blazor
In modern web development we build applications by constructing them from
components, which typically are again built from smaller components. A
Blazor component is a self-contained chunk of user interface with a single
responsibility. Blazor Components are classes built from razor and C# and
are easier to understand, debug and maintain. And of course, you can
re-use the same component in different pages.
- What is a Blazor Component?
- Building a Simple Blazor Component
- Component Parameters
- Conditional Rendering and ChildContent
- Separating the View and View-Model
- Styling Components
- LAB: Using components for building a simple website
Blazor Data Binding
Modern web applications use the Model-View-ViewModel approach
which heavily relies on data binding. Blazor is no exception! We will look
at the different ways to do data binding with Blazor.
- A Quick Look at Razor
- One Way Data Binding
- Event Handling and Data Binding
- Two Way Data Binding
- Reporting Changes with StateHasChanged
- Component Data Binding
- Understanding EventCallback
- LAB: Using Data Binding
Blazor Forms and Validation
Most applications need users to enter some data. So how do we present this
to the user, capture changes made and validate the data?
- Working with Forms in Blazor
- Adding validation to your forms
- Disabling the "Submit" button when validation detects errors
- Implementing custom validation in Blazor - Fluent Validation
- LAB: Adding a form for data entry
Understanding Blazor Component Lifecycle Hooks
Blazor Components are born, go through changes and get removed. Here we
will look at places where you can intercept some of a component's
- Understanding Lifecycle Hooks
- Implementing the right LifeCycle Hook(s)
- Limiting unnecessary Rerendering of components with ShouldRender
- LAB: Implementing Life Cycle Hooks
Services and Dependency Injection.
Dependency Inversion is one of the basic principles of good
Object-Oriented design. The big enabler is Dependency Injection.
In this chapter we will discuss dependency inversion and injection and why
it is a fundamental part of Blazer. We will illustrate this by building a
Service that encapsulates where the data gets retrieved and stored.
Services are the key enabler for running components both on the server and
- Understanding Dependency Inversion & Injection
- Some Inversion of Control Containers
- Blazor and Dependency Injection
- Building Blazor Services
- LAB: Create a service to talk to the data store
Advanced Blazor Components
Blazor Components are the building blocks for builing web sites. But how
do you create components that are truly re-usable? What about performance?
- Referring to Components
- Building Templated Components
- Advanced Templated Components with Piggy-Wig
- Optimized Rendering with Razor Templates
- Rendering large amounts of rows using Virtualization
- Feedback with Error Boundaries
- Help Blazor with change detection using @key
- LAB: Building a Templated Component
Built-in Blazor Components
Which components do you get for free with Blazor? Of course we only cover
components that are not covered in other places.
- Using Existing Blazor Component Libraries
- Using Dynamic Component
- HeadContent and HeadOutlet
- Setting default focus with FocusOnNavigate
- InputFile of uploading contents
- Showing tables of data with QuickGrid
- LAB: Using QuickGrid
Reusing components with Component Libraries
You can easily distrubute your components as a component libary. This way
your components can be used across several Blazor projects. We will also
look at developing for both Blazor platforms with the ability to used
advanced debugging features.
- Building a Component Library
- Consuming a Component Library
- LAB: Moving your components into a Component Library
.NET 8 Blazor Application Models
Blazor supports different kinds of applications, from fairly static web
Sites to highly interactive web sites. Here we will examine the different
models and how you can re-use the same Blazor components in all of them!
- The new Blazor Application Templates
- Server-Side Rendering
- Understanding Streamed Rendering
- Adding Advanced Navigation and Forms Handling
- Adding Interactive Components Using Three Rendering Modes
- Building a desktop/mobile application with Blazor Hybrid
- Lab: Step-by-Step enhancing a web site
So how do you talk to a REST service with Blazor? We will use the
HttpClient class you probably already know from other .NET
projects, but with a twist.
- Sending and receiving data
- Using the HttpClient Class and IHttpClientFactory interface
- The HttpClientJSONExtensions Methods
- LAB: Talk to the server
Single Page Applications and Routing.
Blazor is a .NET framework you can use for building Single Page
Angular, React and VueJs. But what is a Single Page Application (SPA)? We
will look at using routing to jump between different sections of a SPA and
sending data between different components.
- What is a Single Page Application?
- Using Layout Components
- Understanding Routing
- Setting the Route Template
- Redirecting to Other Pages
- Sharing State between Components
- Lazy Loading parts of your Blazor web site
- Handling location changing events
- Preventing Navigation to avoid losing changes
- LAB: Adding a route and using Lazy Loading
Model (DOM) from your Blazor components. You can too. In this chapter we
build a Blazor Component Library to display a geographic map.
- LAB: Add a map to show the location of the resto and customer
Blazor State Management
So how does Blazor WebAssembly manage state? And how do I avoid losing my
state when the user accidentally hits refresh in the browser. And of
course we will look at Reduxi which allows you to limit the complexity of
- Examining Component State
- Using Protected Browser Storage
- The Redux Pattern
- Using Redux Effects
- Smart and Dump Components
- LAB: Building an Application with Redux
Unit Testing Blazor Applications using bUnit
Unit Testing is seen by many companies as a fundamental approuch to
building stable software. Let us apply this and see how we can unit test
our blazor components?
- Introducing BUnit
- Understanding and Customizing Semantic Compare
- Writing Unit Tests using C#
- Using Razor Unit Tests
Understanding Claims-Based Security
What is a given user allowed to do in your application? This most-likely
depends on the role that user has in your organisation. This role is now
represented with claims. In this chapter you will get a better
understanding why claims are better than roles, and how claims are
transmitted in a secure way as tokens.
- Representing the User
- Introducing Claims Based Security
- Understanding Tokens
- Using Claims in .NET
Blazor Authentication with Individual Accounts
Blazor authentication can be implemented by keeping user information in a
database. Microsoft made this very easy with .NET 8.
- Auth using Individual Accounts
- Extending Authentication with your own Data
- Authorization using AuthorizeView
Blazor Authentication with OpenId-Connect
How can we add authentication with OpenID-Connect to a Blazor application?
- What is OpenId Connect (OIDC)?
- Adding OIDC authentication to a Blazor Server application
- Adding OIDC authentication to a Blazor WASM application
- LAB: Protecting your Blazor application