Blazor Crash Course for Absolute Beginners

Explore how components serve as building blocks of an application and form a hierarchy within a layout. A component consists of markup and processing logic, implemented in component files.

Explore how a final Blazor project passes a title value from a parent component to a child component via a parameter attribute.

Learn to implement event callbacks in Blazor by wiring a child button to a parent method, invoking async calls, and passing data from child to parent.

Learn how to create a child component reference in Blazor and access the child component's public methods from the parent, and how to notify the child when state changes.

Pass data to templated components using a generic region and receive it in the parent via the context property, then render a product list with foreach.

Learn to separate markup from logic in Blazor by adopting a code-behind approach, moving logic to a separate file, and using partial classes for cleaner, refactor-ready components.

Explore data binding in Blazor by binding input values and checkboxes to variables, enabling two-way binding with on-change handling and immediate reflection in the UI.

Learn to bind properties between a parent and child component in Blazor, enabling two-way data binding that reflects updates across components via parameters and event callbacks.

Explore component lifecycle methods in Blazor, including synchronous and asynchronous ones, each called at least once per component, with examples like set parameters async and should render.

Explore the rest of the Blazor component life cycle, including parameter set, initialisation, and after render methods. See how updated parameters trigger renders and data loading.

Demonstrates the execution sequence of component lifecycle methods in a Blazor app, illustrating parent and child components, parameter binding, and asynchronous lifecycle events.

Explore Blazor forms and input components, including bindings, model attributes, and form submission, with an introduction to validation and common inputs like text, date, radio, select, and textarea.

Create your first form in Blazor by building a person model with name, age, and email; bind inputs to the model, use components, and handle submit status.

Learn how dependency injection removes tight coupling by injecting a service from outside the component, enabling easy replacement of implementations and keeping the system loosely coupled.

Learn how to implement dependency injection in Blazor WebAssembly by creating an employee service, defining an interface, and injecting it into a component to decouple classes.

Compare service lifetimes, showing how singleton and transient objects behave in Balzor WebAssembly versus Balzor Server, and how navigation or page refresh affects object instances.

Explore how to secure Blazor apps by implementing identity-based and claim-based authorization in WebAssembly using identity server.

Explore identity server basics, explain OpenID Connect and OAuth 2.0, and distinguish authentication from authorization, highlighting centralized logic, session management, and single sign-on with external providers.

Secure a Blazor WebAssembly app with Identity Server, authenticate users and API calls using individual accounts backed by a database, and set up registration and login flows.

Learn how to manage multiple roles in a Blazor WebAssembly app by using a custom user factory to convert identity server role claims into separate claims, enabling multi-role authorization.

Learn how to secure a Blazor server app by enabling individual accounts, configuring authentication, and using authorize attributes and roles to control access. Configure admin and super user roles.

Learn to call JavaScript from dotnet in Blazor using two methods: one for void functions like alert, and another for value-returning functions. See examples with a script and buttons.

Call dotnet static methods from JavaScript in a Blazor app using dotnet.invokeMethod, specifying the assembly and function, pass parameters, and expose with an attribute.

Call .NET static methods from JavaScript asynchronously by using dotnet.invokeMethodAsync, pass parameters, and handle the returned promise to display the square root result.

learn to call .NET instance methods from JavaScript in a Blazor app by creating a class with a hello method and using a .NET object reference to invoke it.

Explore how to pass an input element reference from a Blazor component to JavaScript to set focus, using element reference (@ref) and a JavaScript function.

Understand why state management matters and how to maintain state in applications using services, then learn how to persist state with local storage.

Learn how to maintain app state in Blazor Web Assembly by moving state into a singleton service, injecting it into components, and using events to notify updates across the UI.

Persist and restore state in a Blazor Web Assembly app using local storage, via a local storage service with save and load functions tied to the counter component.

Learn to persist state in a Blazor server app using a local storage service, with code identical to previous sections, and apply the server app changes to enable persistent state.

Design a simple shopping site using four components: menu, product, card, and customer, with a main navigation component, displaying product lists and selected items for checkout.

Build a Blazor product catalog component by defining product and catalog models in the shared project, rendering product items with a component, and displaying them using Bootstrap cards.

Create a Shelton Card component that receives cart product data, uses a product item component to display them, and fetches product details via a catalog function using IDs.

Implement removal of a selected product from the cart by using a position-based remove function, updating the shopping cart component and triggering a callback to pass the item’s position.

Open the customer component and define a customer class with name, street, and city plus validation; integrate it in the cart and wire a checkout callback to place the order.

Create and test a product service in Blazor, applying the single responsibility principle, expose a product list, and wire a client service to call it.