Blazor: Building Interactive Web Applications

Learn how to build a Web Application using Microsoft Blazor in a practical manner

Description

In this course you will learn, while working on a practical assignment in combination with an explanation of the theory, the basics of Building a Web Application with Microsoft Blazor. At the beginning of the training you will receive a simple scenario that will increase in complexity during the course. Guided by the trainer you will learn to build a Web Application in C#, HTML, CSS and JavaScript.

Learning Goals

• Analyze the pros and cons of Server-Side Rendering (SSR) vs Single Page Applications (SPA) [Analyze]
• Design and use Razor components that can run both client-side and server-side [Create]
• Understand Blazor forms, input components and Form Validation [Understand]
• Manage layouts and styles of a Blazor Web App [Analyze]
• Understand the core concepts and functionality of Entity Framework (EF), including proper handling of a DbContext in server-side Blazor apps [Understand]
• Develop controller-based APIs and minimal APIs in ASP.NET Core [Create]
• Employ HttpClient in Blazor for calling external web APIs [Apply]
• Develop unit tests for Blazor components using bUnit [Create]
• Understand authentication in a Blazor Application [Understand]
• Handle authorization in Blazor applications [Apply]
• Improve Blazor Application performances [Create]
• Understand different state management strategies in Blazor and their applications, including in-memory state containers, browser storage, and server-side storage. [Understand]
• Apply JavaScript interop techniques to invoke JavaScript functions and call .NET methods from JavaScript in Blazor applications. [Apply]

Subjects

• Components
• Render Modes
• JavaScript interop

• Static Server Side Rendering
• Interactive Server
• Interactive WebAssembly
• Interactive Auto
• Render mode selection

• Component classes
• Component parameters
• Route parameters
• Child content

• One way binding
• Two way binding
• Binding with component parameters
• Bind across more than two components

• Event arguments
• Lambda expressions
• EventCallback

• Lifecycle events
• Component initialization
• State changes

• RenderFragment
• CascadingTypeParameter

• Layout components
• Apply a layout
• Nested layouts

• Binding a form
• Handle form submission
• Built-in form components
• Basic validation
• Data Annotations Validator component and custom validation
• Validator components

• Default services
• Add services to a Blazor app
• Service lifetime
• Request a service in a component
• Use DI in services

• Route templates
• Route to components from multiple assemblies
• Route parameters
• Route constraints
• URI and navigation state helpers
• Query strings
• NavLink and NavMenu components

• Blazor JavaScript interoperabiliy (JS Interop)
• Call JavaScript from .NET
• Call .NET from JavaScript

• Create an RCL
• Consume a Razor component from an RCL
• Create an RCL with static assets in the wwwroot folder
• Create an RCL with JavaScript files collocated with components
• Supply components and static assets to multiple hosted Blazor apps
• JavaScript isolation in JavaScript modules

• Persist state across browser sessions
• Where to persist state
• Server-side storage
• URL
• Browser storage
• In-memory state container service

• Detailed errors during development
• Manage unhandled exceptions in developer code

• Implement Web API
• Minimal API
• Call a web API from ASP.NET Core Blazor
  • Add the HttpClient service
  • HttpClient and JSON helpers
  • Named HttpClient with IHttpClientFactory
  • Typed HttpClient
  • HttpClient and HttpRequestMessage with Fetch API request options

• Authentication
• AuthenticationStateProvider service
• Expose the authentication state as a cascading parameter
• Authorization
• AuthorizeView component
• Authorize attribute
• Policies, Requirements, Handlers, Claims

• Publish the app
• Ahead-of-time (AOT) compilation
• Standalone deployment