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!

• 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

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?
• 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 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.

• 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 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
• Implementing custom validation in Blazor - Fluent Validation
• 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

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

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?

• Referring to Components
• Building Templated Components
• Advanced Templated Components with Piggy-Wig
• 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
• Feedback with Error Boundaries
• 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 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

.NET 8 Blazor Application Models

Blazor supports a range of applications, from relatively static websites to highly interactive web experiences. In this chapter, we will explore the various models and how you can reuse the same Blazor components across 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

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
• 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

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
• Displaying a map with a JavaScript library
• LAB: Add a map to show the location of the resto and customer

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

Understanding Claims-Based Security

What actions is a given user permitted to perform in your application? This likely depends on the role the user holds within your organization. These roles are now represented by claims. In this chapter, you will gain a deeper understanding of why claims are more effective than roles and how claims are securely transmitted as tokens.

• Representing the User
• Introducing Claims Based Security
• Understanding Tokens
• Using Claims in .NET

Blazor Authentication with Individual Accounts

Blazor authentication can be facilitated by storing user information in a database, a process Microsoft has greatly simplified in .NET 8 through the integration of Entity Framework and Identity. Additionally, we will explore how to conditionally display UI elements based on the user's identity.

• Auth using Individual Accounts
• Extending Authentication with your own Data
• Authorization using AuthorizeView

Blazor Authentication with OpenID Connect

OpenID Connect (OIDC), an advanced authentication protocol, is built upon the foundational OAuth 2.0 standard, which governs access delegation. This protocol empowers clients to accurately verify an end-user's identity through the authentication procedures of an authorization server. Additionally, it facilitates the acquisition of basic profile information about the end-user, offering this capability in a way that's both interoperable and akin to RESTful practices. How, then, can we seamlessly integrate OpenID Connect authentication into a Blazor application, enhancing security and user experience?

• 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