Building Web apps using Blazor

Last modified: 2021-04-26

Audience

Developers

Duration

3 or 4 days

Description

Blazor is a framework for building interactive client-side web UI with .NET. You can now program your client-side code with C# instead of JavaScript.

Course Outline

Blazor First Steps

  • Blazor Model explained
  • Differentiate the Blazor hosting models: Client-Side vs Server-Side
  • Overview of WebAssembly technologies
  • Installing Blazor
  • Creating a new Visual Studio Project
  • Showing how to work with VS Code
  • Structure of a Blazor Project

Layouts

  • Creating a Blazor layout
  • Using a layout
  • Nested layouts

Components

  • Creating a component
  • Component lifecycles
  • One-way vs. two-way binding
  • Binding directives
  • Component events vs. Browser DOM events
  • Cascading values
  • Generated HTML attributes
  • Capturing unexpected params
  • Replacing attributes on child components
  • Multi-threaded rendering
  • Thread safety with InvokeAsync

Render trees

  • Incremental RenderTree proof
  • Optimizing using @key

Templating components

  • Passing data to a RenderFragment
  • Using @typeparam to create generic components
  • Passing placeholders to RenderFragments

Routing

  • Defining routes
  • Route parameters
  • Constraining route parameters
  • Optional route parameters
  • 404 – Not found
  • Navigating our app via HTML
  • Navigating our app via code
  • Detecting navigation events

Forms and data entry

  • Editing form data
  • Descending from InputBase
  • Validation
  • Handling form submission
  • EditContext, FieldIdentifiers, and FieldState
  • Accessing form state
  • Custom validation

Component libraries

  • Creating your own components
  • Consuming a component library
  • Accessing resources
  • Updating Nuget packages

Dependency injection

  • Injecting dependencies into Blazor components
  • Dependency lifetimes and scopes
  • Transient vs. Singleton vs. Scoped dependencies
  • Component scoped dependencies

Calling a Database

  • Entity Framework
  • Code-First vs Database-First
  • Repositories and data managers

Calling API services

  • Creating a simple web API
  • Documenting with OpenApi
  • Calling the API from Blazor

State Management

  • Application state
  • Server-side vs. Client-side

Configuration

  • AppSettings
  • Environment variables
  • Command-line arguments
  • Secret Manager
  • Web config

JavaScript interop

  • JavaScript boot process
  • Calling JavaScript from .NET
  • Passing HTML element references
  • Calling .NET From JavaScript
  • Calling JS Libraries
  • Lifetimes and memory leaks
  • Type safety
  • Calling static .NET methods

Identity

  • Authentication
  • Authorization and permissions
  • Roles, Claims, Policies
  • Security features

Security

(Most of this applies to ASP.NET, not Blazor WebAssembly)

  • Https
  • Cross-Site Request Forgery (XSRF/CSRF)
  • Cross-Site Scripting (XSS)
  • Cross-Origin Requests (CORS)
  • SQL Injection