Master Blazor in .NET 10: Build Inventory Management System

Write the view inventories use case by detailing preconditions, steps, and alternative scenarios, using a mockup with a search bar and view button for use case driven development.

Start with implementing use cases to center business logic in a clean, plugin-based architecture, with entities at the center and UI and database outside the core use cases layer.

Start building the view inventories by name use case in a separate IMS dot Use Cases library, organize by inventories concept, and set up plugin interfaces with dependency injection.

Implement a replaceable inventory plugin with dependency injection, starting with an in-memory repo and later an EF Core version; register the IInventory repository in program.cs via the service collection.

See how dependency injection decouples components by injecting use cases and repositories through the framework, using service collections and interface mappings to enable plug-in data stores in a clean architecture.

Explore dependency injection lifetime management in Blazor, registering interfaces in the service collection and choosing transient, scoped, and singleton lifetimes; contrast use cases with an in-memory inventory repository.

Create a page component in Blazor using the router to navigate to an inventory list page, configure a relative path, and use a nav link for automatic highlighting.

Break down a single page application into reusable, self-contained components such as search inventory, inventory list, and list item in Blazor. Learn component communication through parameters and callbacks.

Create a reusable inventory list component under the controls folder, inject a use case to populate inventory data, and render a bootstrap html table in the page via _Imports.razor.

Break a large inventory list into a dedicated inventory list item component and pass data from parent to child via component parameters and parameter attributes, following the single responsibility principle.

Demonstrate use case driven development by implementing an ad inventory add use case with dependency injection and a repository, executing an async method to insert inventory data.

Implement the add inventory repository method in the in-memory store with a defensive duplicate-name check and auto-incremented id. Integrate via dependency injection to enable adding inventories from razor components.

Create an add inventory button on the inventory list page that navigates to a new razor page at /add inventory, introducing an empty Add Inventory page component titled Add Inventory.

Build an add inventory form with edit form in static ssr, binding inventory fields from the form and submitting to the server via the form name and use case.

Apply data annotations to enforce required fields, length, and range in an edit form, display errors with data annotation validator, validation summary, and per-field messages in Blazor.

Learn how to navigate between Razor components using NavigationManager in Blazor, navigate back to the inventory list after saving, and implement a cancel action with an anchor link.

Implement the edit inventory use case by routing to inventory details, updating the data store via an async repository call, and configuring dependency injection.

Implement edit inventory in the repository by locating the item with Linq, updating quantity and price, and simulating async with Task.CompletedTask while checking for duplicate inventory name.

Replace the edit button with an anchor link to the added inventory page, passing the inventory id as an int routing parameter.

Implement the view inventory by id use case to load existing inventory when the page opens, using the repository’s get inventory by id async method via dependency injection.

Implement edit inventory page in Blazor by loading inventory by id, binding a form to an inventory model, and updating via edit inventory use case, with supply parameter from form.

Handle inventory not found in Blazor .NET 10 by using navigation manager not found to render a custom not found page and a 404 via the router.

Build a reusable inventory list component by adding a component parameter for a search filter, wiring it to the execute async method, and validating filtering with user input.

Master Blazor teaches how to implement a grouped search bar in the inventory list using an edit form, binding an inventory name to search, and posting back to filter results.

Extract a shared search bar into a reusable component and use event callback to pass the search filter from child to parent upon parameter set.

Leverage enhanced form handling to enable partial page rendering in Blazor, intercepting http post requests with fetch API via Blazor app.js to refresh only the needed content.

Learn to implement a delete inventory use case and its repository method by wiring an async delete by ID through a repository, interface, and dependency injection in .NET.

Learn to implement secure delete in Blazor using enhanced form handling: a unique per-item form name via explicit Razor syntax, post back, and navigation manager refresh.

Learn to implement the view products by name use case with a product repository using interactive server side rendering via SignalR, in a use-case driven development approach.

Create the products list by duplicating the inventory list, adapting components for product use, and enabling interactive server side rendering with dependency injection of the product repository.

Enable interactive server rendering and configure the SignalR channel to support deleting products. Inject the delete product use case, wire an async on click handler, and update state to rerender.

Explore building an interactive add product form in Blazor using interactive SSR, wiring product and inventory relationships, search and select inventories, and two-way binding through SignalR without postback.

Build a Blazor inventory search and display component to associate inventories with products, using a stateful, two-way bound interface, async search, and a use case for name-based results.

Implement real-time inventory filtering using two-way data binding on input with oninput, updating a state variable and using state has changed to rerender after asynchronous data retrieval.

Isolate component styles by moving inline CSS into a component-specific style sheet, created alongside the Razor component, ensuring no class-name conflicts and verifying the result by running the app.

Master Blazor demonstrates building a many to many product inventory system in .NET 8 with a product inventory association and a reusable Razor component for adding and displaying inventories.

Implement a custom validation attribute on the product inventories to ensure price covers total inventory cost, using data annotations in a validations class inside the core business project.

Wrap the add product inventory area in a bootstrap card to create a bordered, visually grouped section and improve layout.

Implement the edit product workflow by loading a product by ID, populating the edit screen, and saving updates with the update product use case, mirroring the add page.

Implement the view product by id use case by injecting the product repository, calling get product by id async, and returning a copied in-memory product.

Implement the edit product use case by injecting the product repository, validating unique product names, and updating product properties through the repository, with an async execute method.

Create an edit product razor component that accepts an id route parameter, retrieves the product, displays an update form, and saves changes using use cases with navigation.

Use navigation manager's not found to redirect users when a product is null on the edit product page, and customize the not found page as needed.

Learn to implement purchasing inventory in a simplified flow: create a purchase order, select an inventory via an auto-complete component, and record the transaction in an in-memory repository.

Develop the purchase inventory use case by recording a transaction with PO number and pricing snapshot, updating inventory quantities via the inventory transaction repository through async and dependency injection.

Develop a generic autocomplete component in Blazor that binds input in real time, uses a search delegate to return item view models, and tests it on the purchase page.

Build and refine a Blazor autocomplete component that populates the input on item select, supports navigation with up/down arrows and enter, highlights items, and notifies the parent via event callback.

Create a purchase inventory page in Blazor by building a purchase view model, validating Po number, inventory id, and quantity, fetching the current price, and executing the purchase.

Explore the produce product use case by implementing production number, product, and quantity handling, while decreasing inventories, updating product quantities, and recording product transactions via repositories.

Build a produce product page component in a Blazor .NET 8 app using a produce view model to manage production, inventory updates, server rendering, and validation to prevent negative inventories.

Fix an in-memory data store bug by using the inventory repository to fetch latest inventory and update quantities during production.

Create a custom validation attribute for the quantity to produce property to ensure enough inventory by loading product and inventory data and validating each inventory against the requested quantity.

Learn to prevent enter-triggered form submission in Blazor using JavaScript interop with IJSRuntime, registering a one-time script after render and a prevent-default listener.

Explore .NET 10 JavaScript interop updates, including getvalue async, setvalue async, invoke async, and invoke constructor async, using the window object and a car class example to access inner properties.

Design a sell product use case with an async execute method, sales order number, inject product and product transaction repositories, record a sale transaction, and decrease quantity to update inventory.

Create a sell product page component in Blazor with a sell view model capturing sales order number, product id, quantity, and unit price, plus validations to enforce stock and pricing.

Master Blazor demonstrates a custom validation to prevent selling more inventory than available, by deriving a validation attribute, accessing the view model, and enforcing quantity to sell.

Enhance the autocomplete component by turning the search function into an asynchronous delegate returning a task, using async/await, adding a view items async helper, and triggering StateHasChanged for proper rerender.