Build ASP.NET Blazor apps with a clean structure

Explore how Blazor works and its hosting models, including client-side to server-hosted ui, Razor syntax with C#, and efficient dom updates for interactive single-page apps.

Explore Blazor hosting models, from server-rendered pages to web assembly runs in the browser, and learn how server, WebSocket, and shadow DOM drive UI updates.

Explore mockups for the example Blazor project and discuss libraries, helpers, and the chosen front-end framework, outlining an organization app with to-do and grocery list features.

Adopt a consistent front-end framework like bootstrap to build fast, responsive user interfaces. Attach bootstrap classes for buttons and form controls, and include its JavaScript libraries.

Set up your development environment by downloading Visual Studio and installing the asp.net and web development package, using the community edition as a free option.

Open a downloaded solution in Visual Studio, restore and rebuild for a clean state, then run the Blazor WebAssembly demo locally in Chrome to explore weather page using json data.

Explore the Blazor project structure in Visual Studio, from wwwroot and index to shared layout, pages and components, and learn how routing and dependency injection organize a Blazor app.

Create a new Blazor WebAssembly project named Organize, choose the hosting model, and set authentication to none, then remove unnecessary starter files to build from scratch.

Explore the basic techniques of the framework and begin implementing design for an organizer page, while previewing the upcoming sections of the course.

Explore Blazor components and Razor components, learn how they describe the user interface with C# and HTML markup, bind data, handle events, and reuse nested components for dynamic rendering.

Create a sign in page in a Blazor project by adding the sign in component, its page directive, and username and password inputs with a sign up link.

Apply bootstrap styling to the sign-in page, structure styles in a dedicated component style file, and center inputs and buttons with custom classes to create a clean, functional sign-in UI.

Explore data binding in Blazor, including one-way and two-way bindings, and see how UI values bind to component properties and update via events.

Explore event handling in Blazor by wiring inputs and buttons to C# logic, update properties on the change event or the input event, and render text with conditional expressions.

Learn how child components fire events with event callbacks and how parents assign callbacks to handle them, enabling one-way binding and updating the counter value.

Build a structured Blazor project by adding a controls folder, creating a validation input Razor component, and applying bootstrap classes to display a red invalid input box.

Master responsive layouts with flexbox to arrange elements in rows or columns without floats, accommodate varying child dimensions, and ensure some items take the remaining space.

learn how to implement event callbacks in blazer components by creating a validation input base and a derived component, enabling the parent to receive text changes through a parameterized event.

Explore two-way data binding in ASP.NET Blazor apps, enabling bidirectional data flow between UI inputs and logic, including parent-child binding, binding directives, and event considerations.

Harness two-way binding between parent and child components in Blazor using the bind directive, parameter, and event callback, following the property changed naming convention.

Master Razor syntax and Razor components to render dynamic content in Blazor apps, using implicit and explicit expressions, loops, conditionals, directives, and clean coding practices.

Master client-side validation in a Blazor app by validating username and password before submission, using an edit form with a model, error messages, and a separate entity class for validation.

Explore a layered, loosely coupled architecture with UI, business, data access, and shared layers. Create platform independent projects and organize shared folders for entities and contracts.

Understand form validation in a Blazor app by creating a public User class with username and password, binding it to a form, and using data annotations with a validation summary.

learn to replace native inputs with the input text component, bind values for live validation, and display inline validation messages with cascading context to show red borders on errors.

Learn to build a Blazor validation input component with parent binding, an arrow indicator, and a tooltip error message. Display red error boxes only when errors exist.

Master attribute splatting and blending to pass unmatched attributes, including placeholders and types, to a validation input component via an input attributes dictionary.

Create a sign up page in a Blazor app with username, password, and phone inputs, using validation input components and a generic gender dropdown, designed to store the user later.

Create a sign up razor component page routed to /sign up, derived from sign up base, binding a user object with required first name, last name, and phone validation.

Create a Razor component library to share reusable components, styles, and static assets across Blazor projects, then move a validation input into the library and test.

Create a reusable, generic dropdown component in a Blazor class library using two-way binding and a DropDown Item wrapper to display the selected value with Bootstrap.

Define a gender enum and populate a dropdown in a Blazor app, bind the selected item, and enable Bootstrap JavaScript via Libman to ensure the dropdown works.

Demonstrates using query parameters to pass username, including optional parameters, and reading URL values with the navigation manager to set user data, with sign in and sign up examples.

Explore how to pass a username via route parameters between pages, declare a [Parameter] string, and decide when route parameters are required versus optional query parameters.

Build a user manager as a singleton in the business project, implementing async create user and get user methods to store and retrieve users via a storage provider.

Wire sign in and sign up with a miniature user manager, add project references, validate on submit using edit context, and navigate between pages while simulating backend delay for tests.

Master dependency injection in ASP.NET Blazor to decouple data access with interfaces, switch between cloud and local storage, and enable reliable testing with mock data and test implementations.

Define a user manager interface in the contracts folder with try get user async and insert user async methods, then register it as a singleton in Blazor WebAssembly DI container.

Explore using IUserManager with dependency injection in Blazor pages, from inline inject to a dedicated class, test sign-in flows, and fix validation by initializing required user properties.

Create a test fake project in a Blazor solution, implement a fake user manager from the shared contracts, and switch to development mode by adjusting service configuration.

Explore constructor injection by injecting a registered service into another service within a Blazor app, register interfaces and implementations in program, and verify output via console messages.

Explore how dependency injection types—singleton, scoped, and transient—work in Blazor apps, compare server and WebAssembly lifetimes, and explain how registration affects shared resources and per-user isolation.

Demonstrate dependency injection lifetimes in a Blazor app by showing scoped, singleton, and transient interfaces, on-demand service creation, and how registration affects instance numbers.

Conclude the first coding part by reviewing reusable components, binding and event handling, and navigation, and highlight dependency injection to prepare for building a sophisticated Blazor application.

Learn techniques to structure Blazor apps with a clean structure, add patches and components, and create a new items overview page in the pages folder using the page directive.

Explore an items overview page in a Blazor app with a scrollable list, add new items at the bottom by type, and edit items via a type-specific component.

Build an items list component for a Blazor app that handles multiple item types with titles, subtitles, images, and urls, expanding items to reveal details and child tasks.

This lecture explains the data structure: a base entity with an id, a user with an items list, and item hierarchies including base item and text item with subtitle.

Define a base entity and derive user and item classes in the shared project, using observable collections to model item relationships and prepare for database storage.

Implement the current user service by creating CurrentUserService and its interface ICurrentUserService, register it, and inject it to access the current user.

Inject the current user service interface into the items list component with the inject directive, and initialize an observable collection of items in OnInitialized to load items.

Build a Blazor app navigation bar with settings and about pages, display the current user’s name via an injected current user service, and style using bootstrap.

Set the current user via the current user service using test data to speed up development of the items list and navigation bar, leveraging dependency injection and a test project.

Override the user’s string method to display a salutation (Mr. or Mrs.) with first and last name in a Blazor app, using test data to verify display.

Bind current user items to a ui container, iterate with a for-each loop, and prepare an item element component with a checkbox, content, and an arrow.

Create a new item element component in the components folder with a generic item type. Expose a [Parameter] item and render its position, title, subtitle, euro, and the total count.

Style the ItemElement component with a flexbox layout, configuring containers, flex properties, and a checkbox to present item information and position, and test in the browser.

Create a reusable item checkbox component in a Blazor app, using a base class and an inherits directive to manage an item and its done state with a visual checkbox.

Create a separate expansion arrow and detail area in the item element, use a unique id for each item, and expand the corresponding detail area on click with bootstrap attributes.

Learn how item elements share a common container and controls, and how to inject custom content for different item types, including text items with titles and clickable URLs.

Explore templated components in Blazor by passing render fragments from a parent item list to child item elements, using main and detail fragments to render text items, links, and images.

Master fragment styling for a Blazor items list using a flex box layout with content top and bottom, text top and bottom, and item-type colors.

Explore sass, a preprocessor with loops, variables, and functions for clean, reusable styles that compile to css; the lecture covers installing the what compiler extension in visual studio.

Define sass variables for a three-color system in a variables file using a partial underscore file. Import and apply background and border color classes to item components for consistent theming.

Discover cascading parameters in Blazor to pass values from a parent to deeply nested components without explicit parameters, using named cascading values for multiple types and applying to validation contexts.

Attach color-aware styling to item elements by introducing a cascading color prefix parameter and applying primary, secondary, and tertiary background and border classes based on item type.

Adjust checkbox colors across item types using cascading parameters in a Blazor app, refine checkbox styles, and discuss when to use cascading, normal parameters, or a service for data exchange.

Replace the X placeholder with the actual total item count in the element. Use cascading parameters and cascading values from the parent item list to pass and display the count.

Build a clean Blazor app structure by creating an items overview page with an items list, inserting entity classes, and applying templated components with cascading parameters.

Learn to implement a view to edit an item's data in a user item list, navigate by clicking an item to a new view, and update item details.

Insert the item edit component into the items overview, then arrange two flex containers side by side using bootstrap and custom styles for scrollable item list and item added views.

Implement the item edit general view by creating a reusable item-added component that displays the item type and total, and binds a title input to the base item's title.

Learn item edit general view styling in an asp.net blazor app by extending bootstrap form-control with a full-width item added input and importing bootstrap files.

Explore two representative approaches to pass the item to edit by transferring data between components: using a singleton service or route and query parameters, plus event callbacks and cascading parameters.

Register a scope service to track the item for editing, raise item changed events, and inject the service into components to open the edit interface when an item is selected.

Learn to show the item edit page by triggering state changes with StateHasChanged when a boolean property updates, and use InvokeAsync to refresh the UI.

Open the item added component by clicking an item and close it by clicking the background, using stop propagation to prevent the parent click handler, and update item added service.

Retrieve items from a service and listen for item changes through the item added and item edit services, refining the initialize method and state exchange method.

Explore the debugging workflow for a Blazor app: set breakpoints, inspect item edit states, use the item added service and handle item changed, and verify edits across components.

Open an item for editing by passing item type and id in the route, enabling direct deep linking while supporting optional parameters and lifecycle updates.

Explore Blazor component lifecycle methods, including synchronous and asynchronous stages such as set parameters, on initialized, on initialized async, on parameter set async, on after render, and disposal.

Learn to work with life-cycle methods in Blazor apps. Implement IDisposable to unregister event handlers, wire the navigation manager location changed, and manage removal in the item added component.

Implement a switch-based item editor in Blazor to render type-specific fields, bind text item properties (title, subtitle, digital), and handle input changes and links.

Add and edit child items in a Blazor app by clicking to append a child to a parent, then render and edit each child's title in a Bootstrap-styled Razor component.

Register a user item manager as a scoped service with a miniature class and IUserItemManager contract, and implement CreateNewItem to build the item and add it to parent's items collection.

Inject and use the user item manager to create a child item and add it to its parent asynchronously, rename the method, and pass the apparent item property as needed.

Test item edit workflow by validating the item added component, wiring parent-child parameters, and verifying data binding to titles and details; identify unsynchronized state updates and ensure changes display immediately.

Compare centralized and decentralized property change notifications in Blazor apps, using a property changed service or entity-level change events to update item components when text item properties change.

Implement INotifyPropertyChanged by creating a notifying object, applying it to the base entity class, and updating entity properties to raise the PropertyChanged event when values change.

Update all entity classes by adjusting item properties across types, including the parent item and user class, note unnecessary properties, and prepare for property change events in the next lecture.

Register property changed event handlers in item components to automatically refresh the UI when item properties update, and handle property changes by calling state has changed to update bound titles.

Unregister event handlers when navigating away to prevent leaks, and implement an item element component that unsubscribes from property change events; plan to add a view for creating new items.

Learn how to add an item to a user collection by building UI with a dropdown of item types and an add button that activates when a type is selected.

Create a new user item in the Blazor app by asynchronously creating and adding it via the user item miniature, using a generic type and returning the item.

Style the app by defining classes and importing variables to apply a primary color and borders, and create an orga button that extends bootstrap styles for consistency.

Register to the user items collection changed event, assign current user's items to the user items property, and display new items in the list; dispose the handler on disposal.

Extend the Blazor app by enabling item editing and adding items, refine component lifecycle and async methods, and implement an update strategy where entity property changes trigger UI refresh.

Explore JavaScript interop in Blazor, enabling you to call JavaScript functions from C# and vice versa. See practical use cases, including reusing libraries and simple inline examples like alert.

Add a window resize handler in JavaScript and invoke a public static .NET method using the JSInvokable attribute with DotNet.invokeMethodAsync in Blazor WebAssembly.

Invoke a JavaScript function from C# using IJSRuntime to get the browser window width, and register the component as a .NET reference in JavaScript for resize events.

Register a JavaScript resize handler in a Blazor app, pass a dot net reference, and invoke the component's handle resize method with the window width and height.

Create a responsive navbar that switches between short and long text based on window width, using a private check method, resize handling, and a dotnet reference disposed with IDisposable.

Coordinate multiple components through a single resize service by registering JavaScript event handlers, reducing cross-context calls and boosting performance as the window size changes.

Explore state management options in a Blazor app, comparing in-memory session data, browser local storage, and server-side persistence for cross-device durability via route parameters and deep links.

Start with the in-memory approach by building an in-memory database to develop the data access layer, enabling easier testing for unit and integration tests and reinforcing a scalable architecture.

Explore how the data access layer mediates between the business layer and persistence services, enabling independent storage implementations via an interface.

Create a data access class for items and define a new item data access interface for dependency injection. Implement asynchronous methods for getting all items, inserting, updating, and deleting.

Explore an in-memory persistence service for demo data storage, implementing a generic create, read, update and delete interface and a type-based dictionary with authentication, designed for development and testing.

Inject a persistence service into data access, call get async to fetch items, implement insert, update, and delete operations, and iterate over items to apply the in-memory persistence.

Connect the item manager with item data access by injecting the item data access interface in the constructor and wiring async insert calls to add items and children.

Test the insert process for adding items to the user items collection in a Blazor app using in-memory storage and dependency injection for data access and persistence services.

Extend test data creation by using the user item manager to insert items via the persistence service, with an optional parameter and in-memory setup.

Implement the get process to load user items via the item manager, driving parent and child items from the persistence service, and assign them by position.

Demonstrate implementing the update process with an in-memory persistent service, handling property changed events and async updates, and discuss moving to a server persistent service to reduce unnecessary calls.

Learn how to reduce update calls by using a timer that triggers updates only after a 500 millisecond interval of inactivity, delaying writes until input changes settle.

Implement the delete process to remove a parent item and its child items, update positions, and persist changes via the item data access layer, with a new settings-triggered delete workflow.