Introduction to WebAssembly and Blazor
In this introduction we will look at how browsers are now capable of
running .NET assemblies in the Browser using WebAssembly, .NET and Blazor.
Getting hands on is the best way to learn. You will create your first
Blazor project in Visual Studio, run the project to see it work, and
finally inspect the different aspects of the project to get a “lay of the
land” view for how Blazor applications are developed.
- Building Rich Web Experiences, Past, Present and Future
- Introducing Web Assembly
- Web Assembly and .NET
- Getting Started with Blazor – Easy!
Understanding the difference between Blazor WASM and. Blazor Server
- Blazor Features Overview
Generating your project with Visual Studio, dotnet CLI or Visual Studio
- Examining the generated solution and its projects
- LAB: Getting started with Blazor
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
- LAB: Building a simple pizza ordering web site with Blazor
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 to the PizzaPlace application
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
- Component Data Binding
- Attribute Splatting
- Understanding EventCallback
- Referring to Components
- Styling Components
LAB: Create components to improve the pizza ordering web site's
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
- Limiting unnecessary Rerendering of components with ShouldRender
- Using Virtualization to limit rendering
- Help Blazor with change detection using @key
- LAB: Limit unnecessary rerendering with ShouldRender
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
- Example: Using the QuickGrid Component
- LAB: Building for both Blazor WebAssembly and Blazor Server
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.
- 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
Data Storage and Microservices
In general client-side browser applications need to store some of their
data. In some cases, such as game apps, the application can store its data
in the browser itself, using browser local storage. But in most cases
storage will happen on the server which has access to database engines
such as SQL Server. In this chapter we will cover the basics of storing
data using Entity Framework Core and exposing that data using REST and
microservices built on top of ASP.NET Core. Of course Blazor can also work
with REST services built on top of other runtimes.
- What is REST?
- Invoking Server Functionality with REST
- Building a Simple Microservice with ASP.NET Core
- What is Entity Framework Core?
- Generating the Database with Code First
- Testing your Microservice using Postman
- LAB: Storing the pizzas and orders in the database with EF Core
Communication with Microservices
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
- Taking full control with HttpRequestMessage
- Retrieving Data From the Server
- Storing Changes
- LAB: Talk to the server
Single Page Applications and Routing.
Blazor is a .NET framework you use for building Single Page Applications,
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
- LAB: Add a route to show a pizza's detail
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
How can we add authentication to a Blazor application?
- Adding authentication to a Blazor Server application
- Adding authentication to a Blazor WASM application
- LAB: Protecting your Blazor application