Blazor - The Complete Guide [.NET 9] [2025] [E-commerce]

Create your Blazor project in Visual Studio 2022 using the Blazor Web App template with dotnet nine preview, select server interactivity, enable top level statements, and start with no authentication.

Add your Blazor project to GitHub by creating a private repository, pushing changes, and tracking updates for each lecture, with the option to revert if something breaks.

Run the default Blazor project, explore the home, counter, and weather components, and review the project files and folders to understand each file's role.

Create a new Blazor razor component in the learn blazer folder and define its route with the add page directive, then navigate using an href anchor and observe hot reload.

Learn how to define a product model in a Blazor app, bind its properties with one-way data binding inside a component, and display product name and active status.

Learn two-way data binding in Blazor by binding price with input, using bind and bind event, and comparing on change versus on input.

Display a product's active state in Blazor using the active flag, showing 'active' when true and 'inactive' when false, with the default value set to active.

Discover how to display product.isActive as active or inactive in a Blazor app and toggle it with a bound checkbox, including binding nuances.

Discover how a global using statement in Blazor lets you access models across pages via _imports. Simplify imports and preview a product layout with divs and a product summary heading.

Blazor, the complete guide shows turning a single product view into a product list via the on initialized lifecycle, loading sample products and comparing synchronized and asynchronous approaches with snippets.

Create a dynamic product table by iterating the product list, using thead and tbody, and apply two-way binding for the product name, price, and is active flag.

Build a product table with a striped header using a div row, column 12, and padding; render product rows with a for each loop, binding name, price, and active fields.

Learn two-way binding in Blazor by binding product name, price, and active status to a product table, displaying the summary in square brackets for each item.

Blazor: display a product summary below the table using a for each loop and two-way binding, showing name, price, and active status with a ternary operator.

Create a demo product component with its own route, display ID and name, add a show properties checkbox to reveal details, and include a nonfunctional delete button.

Create a razor component called demo product, configure navigation at Learn Blazor/demo product, add a nav entry, and render a product list with a show properties toggle and delete button.

Demonstrates handling button clicks in Blazor by wiring an onclick event to increment a counter, updating the ui in real time, and creating a private method in the code block.

Learn how to pass parameters to Blazor method calls using lambda expressions to increment counts by a parameter.

Implement a delete button in the product list to remove a product. Ensure the UI rerenders automatically to display only one product, using counter button fundamentals from the assignment.

Implement a delete product feature in Blazor by wiring an onclick handler to remove a product by id from the product list, a temporary change not saved to the database.

Create a shared, reusable delete button component in Blazor, wire it into a parent page, and learn to consume components with underscore conventions and namespace fixes.

Learn how to pass properties to shared Blazor components using the parameter attribute, enabling child components to receive product id and name from a parent component.

Practice creating and using shared and reusable components in Blazor by extracting the product display into a new underscore_individual_product component, which lacks an add page directive.

Create a new Razor component named individual product, define a product model property, and pass the product as a parameter when consuming the component; run app to confirm no errors.

Add a favorites checkbox to products, show a running favorite count in the parent, and implement a change method invoked by the child to increment or decrement on selection.

Learn to use event callbacks in Blazor to notify a parent from a child when a checkbox changes, passing methods as parameters and updating the favorite count via invoke async.

Practice event callbacks in Blazor by selecting a product with a div click, display the selected product name, and pass its name via onclick arguments.

Explore Blazor event callbacks by wiring a selected product property and a click handler to update and pass the product name through an EventCallback<string>.

Learn to build Blazor apps with a render fragment concept, using a parent and child component pattern, and pass a dynamic title from parent to child.

Explore a simple Blazor event callback to invoke a parent method from a child button click, and learn when you can bypass a local binding method for parameterless handlers.

Explains using render fragments in Blazor charts, highlighting the default child content name and how to use custom names with tags. Shows adding multiple fragments and preserving styling.

Pass a message from a parent component to a grandchild in Blazor using a parameter and a public string property. Note the inconvenience of passing through intermediate components.

Learn how to pass data from parent to grandchild components using cascading value and cascading parameter in Blazor, binding by type rather than name, and avoiding explicit child parameters.

Learn how to pass multiple cascading values in Blazor by using named cascading values, like message and lucky number, and restart the app after changes to avoid overwrites.

Explore routing basics in Blazor by creating a routable Razor component with add page directive, enabling multiple routes, and learning to pass parameters and handle non-existent routes.

Configure a component to accept a route parameter named param one, bind it to the route, and observe automatic binding and conversion. Display param one and test with numbers.

Learn how to pass multiple parameters in Blazor routing by adding param two, binding both parameters, and ensuring routes work with one, two, or no parameters through hot reload.

Enforce route constraints in Blazor by specifying parameter types after a colon, restricting routes to integers or boolean, datetime, decimal, double, long, and showing route not found for invalid inputs.

Learn to capture all route parameters with a catch-all route and assign them to page parameters, then display, test, and verify routing works.

Discover how NavLink replaces the anchor tag by matching the current route to the URL, highlighting the active item with CSS, and supporting exact or prefix routing with NavLinkMatch options.

Learn to route to named elements in Blazor by using element IDs and hash navigation to auto-scroll to a target title.

Learn how to read query parameters in a Blazor component by injecting NavigationManager, parsing the URI with query helpers, and binding them via a load parameters method.

Explore navigating to query parameters in Blazor using anchor tags, nav links, and a button click that performs calculations before navigating via the navigation manager.

Learn how to force a full page reload in Blazor by using navigation manager's refresh with force reload, ensuring query parameters and page state reload correctly.

Explore binding parameters from the query string in Blazor by using supply parameter from query, optionally renaming the bound query names, and see automatic binding in dotnet eight.

Learn how to integrate JavaScript with Blazor using IJSRuntime to invoke a confirm box for delete actions and handle the returned boolean.

Learn to integrate toaster notifications in a Blazor project by adding toaster js and css, wiring a common js file, and invoking warning, success, and error toasts from Blazor.

Explore wiring Toastr notifications in a Blazor razor component using jsRuntime invokeVoidAsync for success and error alerts, and resolve common issues with detailed errors, spelling, and jQuery loading.

Add a JS runtime extension in Blazor to expose toaster success and toaster error as simple static async methods, simplifying toaster notifications via JS interop.

Implement sweet alert two success and error notifications for the assignment, replacing toaster logic, and call directly from the js runtime while adjusting a 200-pixel-wide row with margins.

Add sweet alert to the project, implement a show function to invoke sweet alert with success or error types, and wire it into Blazor JS to display notifications.

Learn how to reference a child component from a Blazor parent using @ref, expose a child's methods publicly, and invoke toaster success from a parent button click.

Remove the default components from the UI nav bar in a Blazor app. Learn data loading with life cycle methods and display a weather forecast and a counter.

Explore Blazor lifecycle with oninitialized and oninitialized async, showing how a component loads data when ready, logs lifecycle events, and demonstrates parent and child components.

Explore the on parameter set and on parameter set async lifecycle methods in Blazor, showing how they run on initialization and whenever parent parameters change, updating child components’ state.

Learn how on after render and on after render async run after UI elements render, enabling event listener setup and JavaScript library initialization with a first render check.

Show how Blazor uses should render to decide user interface refresh and how state has changed triggers re-renders. Demonstrate initial render behavior and how to trigger a re-render when needed.

Learn how to create a Blazor Web App with SSR, exploring interactive render modes (none, server, WebAssembly, auto) and per-page or global interactivity, including server-side rendering.

Discover how enhanced navigation in Blazor updates only changed components via fetch requests, avoiding full page reloads, while keeping header and footer intact and simulating a single-page application.

Learn to make search input data persist across navigation in Blazor by placing the input in a form and declaring it permanent, so the entered text stays across pages.

Explore how stream rendering in Blazor manages loading states during data fetches from API or database, delivering updates while showing loading indicators, with pros and cons to weigh.

Demonstrates building a Blazor counter component with stream rendering, showing live user interface updates as a countdown decrements from ten to zero, using state changes and delayed tasks.

Enable global interactivity in a Blazor server project by adding interactive server render mode, illustrated with a counter component that updates the UI on click.

Compare global versus local interactivity in Blazor Server apps by enabling interactive server render mode per page or component, so interactivity is used only where needed.

Compare Blazor WebAssembly standalone versus Blazor web app architectures, focusing on client-only versus server-enabled interactivity, two projects in solution, and the separation of local and client projects in dotnet nine.

Demonstrate auto interactivity in Blazor, configuring per-component render modes and the server-to-WebAssembly switch, with guidance for beginners to start with Blazor Server.

Explore Blazor interactivity modes by switching render modes between Blazor server, WebAssembly, and auto per component, and observe WebSocket and WebAssembly behavior on the counter and weather components.

Focus on learning Blazor by exploring interactivity modes and building practical features like API calls, validation, grid components, and email, using server and global interactivity to streamline development.

Create a routable Blazor forms component, wire it into navigation, and build a product model with validation and diverse data types to demonstrate form handling in Blazor.

Create and bind a Blazor edit form to a product model using input text fields, unique form names, and built-in form components to enable validation and seamless submission.

In Blazor, bind a submit button to a handle product create method, show a processing state for three seconds, and display a processing message using OnSubmit and isProcessing.

Learn to add Blazor form validations using data annotations for required and range, enforce on valid submit, and display validation messages and summaries.

Learn to implement multiple input types in Blazor: dropdowns from a category enum using input select, checkboxes, and date fields with validation and default today’s date.

Submit the form to populate a new product and assign user inputs to created product, then conditionally display the product name and price when created product is not null.

Bind a product form in Blazor using supply parameter from form attribute to populate the product from form data and assign form name to manage multiple forms.