Blazor - Web Applications with C#

Thanks to WASM (WebAssembly) it is finally possible to create C# web applications, running exclusively in the browser. Microsoft created Blazor that, together with ASP.NET Core, allows you to write web application, Progressive web apps (PWA), (native) mobile and desktop applications.

Blazor comes in two flavors: Server and Client side. The code for both flavors is generally the same, so the course will cover both flavors with examples and exercises.

Because Blazor will be in development, the course always covers the latest version. But examples about past or future features will be in the material as well.

The course material will have tens of examples of all the technologies used. Exercises are target to make the students think instead of being directed, to achieve better memorization. At the end of the course the students should be ready to independently start and maintain Blazor projects.

Prerequisite:

• Professional software developer with knowledge of C#. Some knowledge of web technologies like HTML and CSS is helpful.
• Course can be followed on both Mac and Window machines using Visual Studio Code or Visual Studio.

Content:

Introduction:

• Why use Blazor?
• What is Blazor?
• Difference between client-side and server-side Blazor

Getting Started 

• Installation and Tooling
• Project Setup
• Project Templates
• Bootstrap an App

Basic

•  Razor syntax
  • Compile step
  • HTML Head content
• Components
  • Data Binding
  • Conditional rendering
  • List rendering
  • Event Handling
  • Styling with CSS

Multiple Components

• Properties
  • Required
  • Default values
• Custom events
  • Custom event args
• Support @bind-
• Keys
• Recursive Components
• Dynamically render Components

Forms

• Form Controls and
• Input Validation
• Submit handling

Lifecycle

• Component Lifecycle events
• Understanding and forcing updates

Dependency Injection

• Singleton vs Transient
• Services
• State Management

Router

• Layouts
• Routing
  • Route Templates
  • Fallback
  • Route Parameters
  • Route Constraints
  • NavLink Component
  • URI and Navigation State Helpers

DOM & JavaScript

• Accessing JavaScript from Blazor
• Accessing Blazor from JavaScript
• Use native APIs
• JavaScript Initializers
• Render components from JavaScript

Fetch REST APIs

• HTTP:
  • Get
  • Put
  • Push
  • Delete

Cascading Values and Parameters

• Create and consume values
• Multiple values
• Callbacks
• State management

Templated Components

• 1 or multiple slots
• Default values

Performance

• Virtualized list
• ShouldRender() lifecycle
• Prerender

Security

• Authentication
• Authorization
• Handling UI appropriately

Miscellaneous (Covered alongside other topics)

• Error Boundaries
• Handling errors
• Debugging
• Testing
• Hosting & Deploying
• Serverside vs Clientside

Content is always updated to the latest released Blazor and .NET version.

Optional

• Creating a Progressive Web App

 

Other relevant courses