The Missing Manual
⌘K
All topics / Blazor From Zero

Blazor From Zero

Learn to build interactive web UIs in C# instead of JavaScript: components and Razor, the Server vs WebAssembly hosting models, data binding, events and the component lifecycle, forms and validation, component communication and state, and calling APIs with dependency injection. Microsoft's answer to single-page apps, taught mental-model-first.

  1. What Blazor Is (Server vs WebAssembly) Blazor builds interactive web UIs in C# instead of JavaScript, from components that re-render on state change. Meet a component, the Server vs WebAssembly hosting models, and run your first app.
  2. Components & Razor How a Blazor component works: a .razor file mixing HTML markup with C# in an @code block, compiled into one class — plus Razor essentials, directives, and composing components into a tree.
  3. Data Binding How Blazor ties markup to state: one-way (@field renders into the DOM) and two-way (@bind links inputs to C# fields both ways), plus @bind:event, @bind:format, and @bind:after.
  4. Events & the Component Lifecycle Wire up @onclick and other DOM events to C# methods, run code at the right moment with OnInitializedAsync and friends, and use StateHasChanged to force a re-render when state changes outside Blazor's view.
  5. Forms & Validation Build a product create/edit form with EditForm, the built-in input components, and DataAnnotationsValidator — wiring model annotations to validation messages and the OnValidSubmit event.
  6. Component Communication & State How Blazor components talk: parameters down, events up with EventCallback, cascading values for deep data, and a DI-registered service for app-wide shared state.
  7. Calling APIs & Dependency Injection Inject collaborators into components with @inject, register services in Program.cs, and load data from a backend with HttpClient and the System.Net.Http.Json helpers — building a real products UI.
  8. Where to Go Next You can build interactive web UIs in C#. Now meet Blazor vs the JS frameworks, the .NET 8 render modes, component and state libraries, and the one project to build next.