Blazor

This tutorial shows you how to build and modify a Blazor app.

Blazor Tutorials

Build your first Blazor app

• .NET SDK
• dotnet command
• Blazor WASM App
• Run with Hot Reload
• Try and understand the Counter sample
• Add a new component (.razor)
• Modify an existing component
• Blazor Rounting

Build a Blazor todo list app

• Create a Blazor app
• Add a new Todo Razor component
• @page Razor directive
• Add the Todo component to the navigation bar
• Add a TodoItem class (POCO)
• Add a field for the todo items in the @code block
• Add unordered list markup and a foreach loop
• Add UI (HTML)
• Layouts
• Forms and validation
• Add @onclick attribute
• Add @bind attribute
  • Blazor Basics: Data Binding in Blazor - telerik.com
• Use @todos.Count

SEO

• How do you create an SEO-friendly Blazor WebAssembly application? - syncfusion.com

Concepts

• Component lifecycles - blazor-university.com
• Service Lifetimes in Blazor - chrissainty.com

Blazor todo list app (Hero Touches)

• Add a remove Todo feature
  • How to Pass Arguments to Your onclick Functions in Blazor
• Handle Keyboard Events in C#
  • How to capture input keyboard events? - syncfusion.com
• Working with Query Strings in Blazor - chrissainty.com
• Blazor JavaScript interoperability (JS interop)
• CSS isolation
• ASP.NET Core Blazor forms validation
• Publish to Azure Static Web Apps

Migration

• Migrate from ASP.NET Core 7.0 to 8.0

Demo

• Live Demo