Full Stack Development with C# and Blazor

Introduction to Blazor

This module gives you an introduction to modern web development. You will learn where Blazor positions itself in this story and why it is a great choice for building the websites of the future using C#.

• Evolution in Web App Development
• What is Blazor and why use it
• Introduction to Component-Based Architecture
• Introducing WebAssembly

Blazor Core Concepts

In this module you'll get acquainted with the most important building blocks for any Blazor application. This builds the foundation for all following chapters.

• Introduction to the Different Render Modes
• Using Visual Studio Templates to Get Started
• Inspecting a Blazor Web App
• Data Binding
• Components
• Services
• Routing
• Debugging, Hot Reload

Data Binding

Data binding allows you to forget about the HTML while writing C# code. It allows you to inject data into a view without creating a strong dependency between the two. This results into more flexible, testable and maintainable code.

• Introducing Razor Syntax
• Component to View
• Value Conversion
• View to Component
• Two-Way data binding
• Reporting Changes with StateHasChanged
• LAB: Using Data Binding

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?
• Using Multiple Components
• Input and Output
• Cascading Parameters
• Rendering nested content with ChildContent
• Separating the View and View-Model
• Styling Components
• Inheriting a Component
• Building a Component Library
• LAB: Splitting your Application up in Multiple Components

Understanding Component Lifecycle

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

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
• Validation feedback using CSS
• Static server-side rendered forms
• LAB: Creating a Form for Data Entry

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: Using Services in Blazor

Blazor Data Access with Entity Framework Core

Data access is a fundamental aspect of any application. In this module, we will explore how to use Entity Framework Core (EF Core) to interact with a database in a Blazor application.

• Introduction to Entity Framework Core
• Setting up EF Core in a Blazor Application
• Scaffolding the UI
• Creating a Database Context
• Using a Service to Interact with the Database
• LAB: Using EF Core to Interact with a Database

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. We will also see how we can use the HttpClient in Blazor WASM for data access.

• The Need for Communication
• Sending and receiving data
• Using the HttpClient Class and IHttpClientFactory interface
• The HttpClientJSONExtensions Methods
• Data Access in Blazor WASM
• LAB: Consume a Web API
• LAB: Data Access in Blazor WASM

Templated Components

Blazor components are the foundational elements for building websites. But how can you create components that are truly reusable?

• Building Templated Components
• Using Templated Components
• 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 Dynamic Component
• HeadContent and HeadOutlet
• InputFile of uploading contents
• Rendering large amounts of rows using Virtualization
• Showing tables of data with QuickGrid
• Error Handling with Error Boundaries
• Using the Microsoft Fluent UI Blazor Components
• LAB: Using FluentUI to make a modern website
• LAB: Using QuickGrid to Display Employees

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
• LAB: Making a SPA Task Manager

Introduction to State Management

How does Blazor manage state, and how can we prevent losing this state when a user accidentally refreshes the browser? The module give you an introduction to state management and persisting state in Blazor.

• Component Level State
• Global State
• Persisting State
• Smart and Dumb Components
• Managing Authentication State
• Lab: Adding State Management to a Web Shop
• Lab: Managing Authentication State

Render Modes

A confusing part of Blazor are the different render modes. In short: a component can be interactive or static. This chapter gives a detailed overview of all the render modes, how to set a render mode and how to inspect which render mode is being used.

• Interactive Server
• Interactive WASM
• Interactive Auto
• Static Server with Streamed Rendering and Enhanced Navigation
• Render Mode Inheritance
• Inspect the Render Mode of a Component
• Lab: Making Render Mode Agnostic Components

Managing Blazor Applications

In this module, we focus on managing Blazor applications beyond local development. You'll learn how to structure your application for scalability, ensure its quality through testing, and prepare it for deployment.

• Structuring your Application
• Testing your Application
• Deploying your Application