Blazor: Building Interactive Web Applications

Leer stap-voor-stap een webapplicatie bouwen met Microsoft Blazor

Beschrijving

In deze training leer je een webapplicatie bouwen met Microsoft Blazor.

Je ontvangt bij de start van de training een eenvoudig scenario dat gedurende de training in complexiteit toeneemt. Samen met de trainer leer je zo stapsgewijs een Blazor applicatie te bouwen met C#, HTML, CSS en ECMAScript.

Leerdoelen

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

Onderwerpen

• 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