Full Stack Development with C# and Blazor

Introduction to Blazor

Blazor empowers developers to construct any type of application, ranging from static websites (akin to ASP.NET MVC) to highly interactive Single Page Applications, as well as desktop and mobile applications. Blazor truly has it all! In this overview, we'll take a high-level look at the features Blazor offers for building the websites of the future!

• Why Blazor?
• Introduction to Component-Based architecture
• Introduction to the Different Render Modes
• Using Visual Studio Templates to Get Started
• Blazor Features Overview
• LAB: Getting started with Blazor

Blazor Components

In modern web development, we construct applications from components, which, in turn, are often composed of smaller components. A Blazor component is a self-contained segment of the user interface, designed with a single responsibility. Blazor components, crafted from Razor and C#, offer ease of understanding, debugging, and maintenance. Naturally, these components can be reused across different pages, enhancing development efficiency.

• What is a Blazor Component?
• Razor Syntax
• Using Multiple Components
• Component Parameters
• ChildContent
• Separating the View and View-Model
• Styling Components
• Inheriting a Component
• LAB: Using components for building a simple website

Blazor Data Binding

Modern web applications frequently adopt the Model-View-ViewModel (MVVM) approach, underscoring the critical role of data binding. Blazor aligns seamlessly with this trend! In the upcoming chapter, we will delve into the diverse methods of data binding that Blazor offers.

• One Way Data Binding
• Event Handling
• Two Way Data Binding
• Reporting Changes with StateHasChanged
• Component Data Binding
• Understanding EventCallback
• LAB: Using Data Binding

Blazor Forms and Validation

Most applications require users to input data. But how do we present this information to the users, capture any changes they make, and validate the data?

• Working with Forms in Blazor
• Adding validation to your forms
• Disabling the "Submit" button when validation detects errors
• Using Fluent Validation
• Feedback using CSS
• Static server-side rendered forms
• LAB: Adding a form for data entry

Understanding Blazor Component Lifecycle Hooks

Blazor components are created, undergo changes, and are eventually removed. In this section, we will explore the points within a component's lifecycle where you can intercept and interact with these stages.

• Understanding Lifecycle Hooks
• Implementing the right LifeCycle Hook(s)
• Limiting unnecessary Rerendering of components with ShouldRender
• LAB: Implementing Life Cycle Hooks

Advanced Blazor Components

Blazor components are the foundational elements for building websites. But how can you create components that are truly reusable? And what considerations should be made for performance?

• Cascading Properties
• Referring to Components
• Building Templated Components
• Attribute Splatting
• Using Templated Components
• Optimized Rendering with Razor Templates
• Rendering large amounts of rows using Virtualization
• Help Blazor with change detection using @key
• LAB: Building a Templated Component

Built-in Blazor Components

What components are included with Blazor out-of-the-box? Is it possible to dynamically select components for use? Furthermore, does Blazor offer a component for displaying a data table that supports sorting and filtering? It's worth noting that we will focus on components not discussed elsewhere.

• Using Existing Blazor Component Libraries
• Using Dynamic Component
• HeadContent and HeadOutlet
• Setting default focus with FocusOnNavigate
• InputFile of uploading contents
• Showing tables of data (using EF Core) with QuickGrid
• Error Handling with Error Boundaries
• LAB: Using QuickGrid

Reusing components with Component Libraries

You can easily distribute your components as a component library, enabling their use across multiple Blazor projects. Additionally, we will explore developing for both Blazor platforms with the capability to use advanced debugging features.

• Building a Component Library
• Consuming a Component Library
• LAB: Moving your components into a Component Library

Services and Dependency Injection.

Dependency Inversion is a foundational principle of sound Object-Oriented design, with Dependency Injection serving as its crucial facilitator. In this chapter, we will delve into both dependency inversion and injection, exploring their essential roles in Blazor architecture. We will demonstrate these concepts by developing a service that abstracts the processes of data retrieval and storage. Such services are pivotal in enabling components to operate efficiently both on the server and in WebAssembly (WASM).

• 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

REST Communication

So, how do you communicate with a REST service using Blazor? We'll employ the HttpClient class, which you're likely familiar with from other .NET projects, albeit 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 that enables the creation of Single Page Applications (SPAs), similar to how popular JavaScript frameworks like Angular, React, and Vue.js are used. But what exactly is a SPA? We will explore how routing allows us to navigate between different sections of an SPA and how data can be shared among various components.

• What is a Single Page Application?
• Using Layout Components
• Understanding Routing
• Setting the Route Template
• Redirecting to Other Pages
• Handling location changing events
• Preventing Navigation to avoid losing changes
• Sharing State between Components
• Lazy Loading WASM Comonents
• LAB: Adding a route and using Lazy Loading

JavaScript Interoperability

Sometimes, there's simply no avoiding JavaScript 😊. For instance, Blazor utilizes JavaScript to update the browser's Document Object Model (DOM) from within your Blazor components—and you can do the same. In this chapter, we'll delve into interoperability with JavaScript. As a practical example, we will construct a Blazor Component Library designed to display geographic maps.

• Why do we still need JavaScript in Blazor?
• Calling JavaScript from C#
• Calling .NET Methods from JavaScript
• Using ES Modules
• LAB: Add a map to show the location of the resto and customer

Render Modes

A confusing part of Blazor are the different render modes. In short: a component can be interactive or static. This chapter gives an detailed overview of all the render modes, how to set a render mode and how to inspect which render mode is being used. We also look at the process of prerendering, which can improve Search Engine Optimization (SEO), and its implications.

• Interactive Server
• Interactive WASM
• Interactive Auto
• Static Server with streamed rendering and enhanced navigation
• Inspect the Render Mode of a component
• Render Mode Inheritance
• Application Structure
• Prerendering
• Persisting Prerendered State
• Lab: Step-by-Step enhancing a web site

Blazor Hybrid

You build a cool Blazor component for your website, NICE! But now you want to also use it in a mobile or desktop application. With Blazor Hybrid, you can use Blazor coponents in .NET MAUI, WPF and WinForms. It is also possible to add a Blazor Component in a MVC view. This chapter is an overview of how Razor components can be used in other parts of the .NET world.

• Configuring Blazor Hybrid for mobile and desktop development
• Using Blazor as a Progressive Web App (PWA)
• Razor Component Integration in MVC

Blazor State Management

How does Blazor WebAssembly manage state, and how can we prevent losing this state when a user accidentally refreshes the browser? Additionally, we will explore Redux, a pattern that helps manage the complexity of large applications..

• Examining Component State
• Using Protected Browser Storage
• The Redux Pattern
• Using Redux Effects
• Smart and Dumb Components
• LAB: Building an Application with Redux

Unit Testing Blazor Applications using bUnit

Unit testing is viewed by many companies as a fundamental approach to building stable software. Let’s explore this concept and see how we can unit test our Blazor components?

• Unit Testing Overview
• Introducing BUnit
• Understanding and Customizing Semantic Compare
• Writing Unit Tests using C#
• Using Razor Unit Tests

Security and Identity

We are not always going to make websites for everyone. We want to make parts of the application saeled. For this we can use authorization in Blazor. But before we can decide what you can or cannot see we need to know the identity of the user, which is called authentication. In this chapter we look at how we can use authentication and authorization in Blazor, we look at the differences between Blazor Server and Blazor WASM and we briefly talk about OpenID Connect in Blazor.

• Representing the User: Claims-Based Security
• Get the current User with AuthenticationState
• Authorization
• Blazor with OIDC
• Consuming Secured Web APIs
• LAB: Protecting your Blazor application

Deploying a Blazor Application

Enough of all this localhost development. We want to go into production! But how do we do this?

• Deploying a Blazor Server Project
• Blazor Standalone WASM as a static Web App