Blazor Deep Dive in .NET 10 - From Beginner to Advanced

Blazor uses two component types: routable (page) components and non-routable (reusable) components. See how the page directive enables routing and how non-routable components are embedded, with centralized imports.

Learn how implicit razor expressions render C# variables in Blazor components using the at sign, displaying dynamic server data in html and attributes.

Learn how explicit Razor expressions use parentheses after the at sign to run C# logic in Blazor markup, enabling conditional text, dynamic attributes, and color styling based on server status.

Create a static in-memory servers repository to support a server management app, implementing add, get servers, get by city, get by ID, update, delete, and search using Linq.

Build a city button list in a Blazor .NET 8 app using Razor loops to render cities from a static repository above a server list, with filtering to come.

Blazor serves static resources and maps static assets via middleware, and displays city images from the wwwroot images folder using bootstrap cards and string interpolation.

Create a root page component with the @page directive at /servers/edit, link each server to this edit page, and update the layout nav to expose manage servers.

Learn how to pass a server ID through route parameters in Blazor, map to an edit page, and apply route constraints to require an integer, with optional parameters.

Override OnParametersSet to receive the URL parameter id, load the server information from the repository, and render its name, city, and online status with a null check.

Explore form submission in static server-side rendering, including edit forms, onsubmit handling, and model binding via supply parameter from form with form names and hidden ids.

Learn to navigate with the navigation manager in blazor and inject it via dependency injection, register it in the di container, and navigate after updates.

Add a server in Blazor by building a root ball component, implementing a single form, and using the navigation manager to navigate away from the root ball component.

Create a routable ad server page in Blazor SSR, bind a server model to a form, initialize offline, validate input, persist the server, and navigate back to the servers list.

Learn how to delete data with an edit form in Blazor, using unique form names per server, a delete handler, and optional navigation manager refresh for static server side rendering.

Learn how stream rendering in Blazor improves user experience by loading data progressively on weather page, using Blazor JS and root component to show a loading indicator until data arrives.

Explore static assets fingerprinting in .NET 10, which adds content-based hashes to asset references to bust browser caches for css and javascript files, ensuring updated resources load reliably.

Explore how enhanced navigation in static server-side rendering enables interactivity by intercepting fetch requests with blazor.js, enabling partial DOM updates instead of full page reloads.

Learn how enhanced form handling enables dynamic content and partial page updates in static server side rendering via the edit form component. Enable interactive partial reloads with enhanced navigation.

Explore server interactivity and interactive server-side rendering in Blazor, contrasting SignalR WebSocket channels with traditional HTTP requests, using in-memory render trees and DOM patching.

Enable server interactivity in a Blazor server app by adding interactive server components and setting render mode to interactive server, then test with Visual Studio.

Explore server interactivity in the Visual Studio blazer template, comparing per page per component and global interactive render modes, and learn how to apply interactive server rendering to selected components.

Exclude a page from interactive routing in Blazor to use static server side rendering while the rest stays interactive. Configure root render modes and cascading parameters for page-specific rendering.

Explore the three main aspects of interactive components in Blazor—view, event, and state—showing how user actions trigger events, update state variables, and refresh the view via SignalR WebSocket.

Learn how to pass data to Blazor event handlers, update state with the selected city, and load city-specific servers using interactive server rendering.

Highlight the current selected city with a state variable and bootstrap border in a Blazor component, and learn how server-side state and Razor expressions update the view.

Learn how to update state variables with the onchange event in Blazor, bind inputs, and filter servers using a search bar and click-to-search button.

Master two-way data binding in Blazor by binding the state to the view with bind-value, so input changes update the state automatically.

Explore interactive edit forms in Blazor, using render mode interactive server that enables two-way data binding via SignalR. Ignore the form name and supply parameter form; they are not required.

Explore how to use the key directive in Blazor to improve list rendering performance, ensuring unique item identifiers and efficient DOM updates during server interactivity.

Wire an onClick add task button to update the todo items via the repository, modify the state variable, and reload items to reflect the new task in Blazor.

Bind the task name input to item.name with bindvalue for two-way data binding. Use bootstrap form-control, border-0, and bottom margin for spacing; edits persist in memory data store.

Implement the mark task as completed use case in Blazor by wiring a checkbox and a date display with two-way binding, conditional date visibility, and dynamic styling.

Think in components by breaking a page into focused pieces, like city and server lists, and apply the single responsibility principle to ensure each component does one thing in Blazor.

Use component parameters to pass the selected city name from a parent to a child server-list component and refresh the server list on parameter set for the selected city.

Extract the server component from the serverless component in Blazor, and practice passing information from the parent serverless component to the child via component parameters.

Extract the server list into a reusable server component and pass data from the parent to the child via a component parameter, inheriting interactivity for simpler maintenance.

Learn to use event callback to bubble city selection from the grandchild to the parent and then to the grandparent in Blazor, updating city highlighting and server listings.

Build a reusable search bar in a Blazor app, using an event callback to filter the servers list and manage the search filter state.

Learn to reference a child component in Blazor, expose methods on city list and search bar components to clear selections and filters, and synchronize the UI of parent and child.

Learn how to reuse a routable root component as a non-routable component by embedding it inside another component, and toggle its visibility with a button and a state variable.

Practice conditional rendering with an if-else to display online users when the server is on, using a random number; show nothing or n/a when off.

Explore a Blazor assignment that displays the number of online users using a reusable server component, conditionally rendering random counts via C# code and Blazor markup.

Explore css isolation in Blazor, learning how component-scoped styles prevent conflicts by using per-component stylesheets and generated scope identifiers.

Use cascading parameter to pass the selected city down the component tree in Blazor, and receive it with a cascading parameter in the server component to set the background color.

Learn why cascading parameters do not cross render mode boundaries between static server rendering and interactive server in Blazor, and how dependency injection via add cascading value enables cross-boundary cascading.

Explore templated components to build generic, highly reusable Blazor user interfaces, using render fragments as templates for fields and validations, and create higher-level repeater and field components that centralize styling.

Build a typed templated component in Blazor by defining a generic item type, supplying data, and providing a render fragment to render each item, with optional header and footer.

Replace an ordered list with an html table in a repeater component, using thead, th, tr, and td for name, city, status, and online users, with edit and delete actions.

Display servers in a Blazor data grid using QuickGrid. Install the QuickGrid NuGet package, bind a servers list, and define columns with on/off, edit, and delete actions.

Explore sorting and pagination in quick grid by configuring sortable and template columns. Use server sort with a grid sort object and enable items per page and a pager.

Filter Quick Grid by city using property column options, bind after modifier, and a city filter variable to create a dynamic, case-insensitive server list.

Learn to componentize a to-do list app by creating a reusable items list component and a parent list component, wiring them with parameters and centralized state for a Blazor app.

Extract the item list into a reusable item component, declare a parameter of type todo item, and bind data to display the information of the individual todo item.

Explore the Razor component lifecycle, from instantiation to disposal, and understand how server and WebAssembly interactivity place components in memory, while learning to hook into parameter events and rendering stages.

Demonstrates the Blazor component lifecycle sequence by overriding events in a city list component, showing set parameters, on parameter set, and dispose across static server side rendering and signalR-driven interactivity.

tackles the double initialization problem in Blazor caused by pre-rendering under interactive server-side rendering, and outlines after render and uninitialized with interactive render info to run once.

explains the problem with on parameter set in Blazor when multiple parameters change, and shows using set parameters async to detect changes and prevent unnecessary data reloads.

This course explains when a Blazor component renders or re-renders, including UI events and event callbacks, parameter changes, and state changes, and how diffing the component tree optimizes updates.

Explore how complex parameter types trigger re-renders in Blazor and learn to optimize with the should render event, using previous parameter values to avoid unnecessary updates.

Blazor server interactivity relies on a SignalR synchronization context to keep browser and server threads in sync, making UI events feel single-threaded; marshal timer callbacks with invoke async.

Explore the differences between static routing and interactive routing, and learn how the SignalR channel and WebAssembly enable browser navigation after the first render.

Use the navigation lock to prevent accidental navigation away by configuring on before internal navigation and JavaScript prompts. Make the router interactive to handle internal and external navigation.

Explore optional parameters in Blazor by using a single routable component for add and edit server, with an optional id and route templates to simplify navigation.

Master query strings in Blazor by binding city data through the supply parameter from query, then initialize values in the on parameter set lifecycle.

Learn to use the NotFound method in NavigationManager to show a not found page when a requested item is missing, via router and middleware with status code pages and Re-execute.

Use browser storage in Blazor to maintain state across steps, replacing url parameters with session storage and leveraging protected local storage via dependency injection.

Use the observer pattern to share state across component trees and notify subscribers of changes, enabling dynamic online-server counts across cities in a Blazor app.

Explore WebAssembly interactivity locations in Blazor, balancing global versus component-level interactivity. Learn how static server rendering contrasts with WebAssembly interactivity, with only changed components downloaded and run in the browser.

Create a Blazor WebAssembly app with per-page interactivity, configure the main and client projects, and explore static server-side rendering versus WebAssembly interactivity, routing, and component download.

Discover how to mix render modes by moving the render mode from the component to the HTML element, enabling both WebAssembly interactivity and server interactivity.

Learn to use a DI container to persist state for Blazor WebAssembly components via a container storage class registered in both server and client projects, with singleton lifetimes.