Live Online Shop (Ecommerce)by ASP .NET Core 9 Blazor Server

Explore the overall structure of an online shop design using a bootstrap five e-commerce template. Navigate sections such as header, slider, banners, product listings, cart, checkout, and PayPal sandbox payments.

Learn how routing connects urls to Razor components in a Blazor server app, mapping home, weather, and privacy pages via slash paths with routing data and uppercase naming.

Discover how to structure a Blazor Server layout with common header, footer, and content regions, and implement multiple layouts, sidebars, and page routing for an ecommerce site.

Design and implement the main layout by creating a default layout, organizing pages into an admin folder, and applying the admin layout in a Blazor server app.

Explore how databases power web design by comparing ado.net with the Entity Framework. See why the Entity Framework provides a simple, scaffolding-friendly data access layer.

Explore the structure of razor pages and the entity framework, including dbcontext and dbset, and how they connect models to a database for search functionality.

explains the database first workflow in entity framework, from creating SQL database to scaffolding razor pages, generating DbContext, DbSet, and models automatically with EF tools.

Explain how to create a SQL Server database for an online shop using Entity Framework Core, and define a menus table for top and bottom menus loaded via MVC.

Install and configure Entity Framework Core in a Blazor server project by adding the SQL Server, tools, and design NuGet packages compatible with dotnet 9.0, ensuring successful installation.

Learn to scaffold a DbContext, DbSet, and models from a menu table using Entity Framework Core in a Blazor server app, configuring SQL Server, NuGet packages, and Visual Studio tooling.

Learn to scaffold razor pages and generate the crud for the menu model or menu table in a Blazor server app by configuring the DbContext, EF scaffolding, and quick grid.

Connect the menus page to the admin layout and customize the navigation in a Blazor Server app, building an admin dashboard and menus section.

Learn to add a combobox or select tag for menu type in a Blazor server app, enabling create and edit forms with top and bottom menu options and binding.

Learn to load dynamic top and bottom menus from the database in a Blazor server app using Entity Framework Core, and render menu items with a for-each loop.

Learn to make dynamic sliders and banners by creating a database table, scaffolding DbContext and models, and generating Razor pages for banners in an ASP.NET Core Blazor Server project.

Add a combobox for banner position on create and edit pages, binding slider, banner one, and banner two options in a Blazor Server app.

Master multi-line title and subtitle inputs for banners on create and edit pages, using text areas with configurable rows, sliders, and banner priorities in a Blazor Server ecommerce app.

Learn to add an image input on the create banner page, load the selected file with onchange, and save it to wwwroot/images/banners and the database.

Show image previews in the banners index by using a template column that renders an img with src from the images/banners folder and the database image name.

Learn how to implement image preview in the edit page of banners in an asp.net core 9 blazor server ecommerce app, including input file handling and displaying previews.

Learn to upload and save banner images on the edit page using C# with DbContext and DB factory and web host environment, updating image names in the database.

Learn to delete a banner record and its image file after record removal in a Blazor Server app using C#, including id handling, file existence checks, and database updates.

Design the index page by integrating the slider and banners, including banner one and banner two, within the layout, header, and the footer, using the required HTML tags.

Write C# code to load data for sliders and banners, including banner one and banner two, using EF Core and a DbContext factory; filter by position and order by priority.

Load dynamic sliders by looping through slides from the database and binding each image. Render titles and subtitles with html breaks, and conditionally render banner links on the index page.

Learn to load banners in a Blazor ecommerce app by iterating two banners, binding image src, alt, title, subtitle, and text, with a conditional shop button based on a link.

Learn how to enable Blazor default validation with data annotations for menus and banners, using scaffolding to enforce max lengths and render validation summaries and messages.

Design and implement a product database from scratch in SQL, including products and galleries. Scaffold the DbContext and models, generate Blazor CRUD pages, and integrate admin navigation with data annotations.

Customize the product create page by wiring in product fields, adding a multi-line full description input, and enabling the main image and gallery image uploads with multiple file selection.

Learn to save a product's main image in a Blazor Server app using C#, uploading to wwwroot/images/products with a unique file name and updating the product image in the database.

Learn to implement C# code to save gallery images for a product by handling IBrowserFile inputs, saving files on the server, and recording entries in the product gallery table.

Design a Blazor Server edit page for products with image name handling, main and gallery image previews, a multi-line description text area, and gallery management including add and delete operations.

Write C sharp code to save changes for a product's main image and gallery images on the edit page, including file uploads, unique naming, and DbContext updates.

Learn to implement a delete page with C# code that removes a product and its main and gallery images by deleting files and updating the database via a DbContext.

Design the shop main page by adding sliders, banners, and products, then load product data with EF Core and Blazor Server, building a shop Razor component with the /shop route.

Design the shop main page in a Blazor server app by slimming the layout, preserving breadcrumb and categories, adjusting bootstrap columns, and preparing dynamic product data loaded from the database.

Learn to load main product images from the server in a Blazor server app, using a database and a for-each loop to render multiple items from wwwroot/images/products.

Learn to display a discount percentage badge on product thumbnails by calculating from price and discount fields, while safely handling nulls and zero values and ensuring conditional display.

Learn to dynamically display product prices in Blazor Server app, showing discounted and original prices, calculating discounts, and updating list and grid views with conditional price logic.

Learn to implement product search in a Blazor Server app by creating a reusable search component, binding input, and querying title or tags with EF Core like queries.

Explore how Blazor components enable adding features like charts, maps, grids, and progress indicators with the Blazor Bootstrap library, including saving progress messages during uploads.

Install the Blazor Bootstrap component in a Blazor server project via NuGet, selecting version 3.3.1 for dotnet nine, then update CSS and JS references and register Blazor Bootstrap in program.cs.

Learn to implement a preload loading indicator using Blazor Bootstrap components, adding save messages to the create and edit pages for products and banners.

Learn to replace the slick slider with the Blazor bootstrap component in a Blazor server app, using a for loop to render items and activate the first slide.

Design and implement a product details page in a Blazor Server app. Load the selected product by id and display title, price, stock, description, color, size, and a gallery.

Build a dynamic product image slider for the product details page, loading the main image and gallery with a Blazor carousel and breadcrumb navigation.

Speed up loading of product details by resizing the slider and product images with an online image resizer, then update the products and gallery images in the shop.

Learn to load dynamic product data and images for a Blazor shop, render price and discount, track stock, and enable add to cart and tag-based search links.

Design and implement a product details tab in a Blazor app using bootstrap tabs, passing the product data, and rendering description, reviews, tags, and a video embed.

Fix item widths by customizing the products index table: remove or adjust description and tags, and reorder columns—id, image, title, price, discount, quantity—for a cleaner admin view.

Design and implement a new products slider in the product details page using blazer carousel, loading eight items from the online shop db context across two pages.

Connect shop items to product details by adding dynamic links and IDs, and update shop and product details pages using the new product components.

Fix the view switching error in the shop page by updating anchor tags, integrating a change view script in main.js, and wiring onClick handlers in app.razor for Blazor Server.

Design a reviews database for the product section by creating a comments table with id, name, email, comment text, product_id, and create_date; scaffold the EF Core DbContext to the shop.

Load existing product reviews in the product details tab with a tab control, using a comment component and ef core to fetch by product id.

Learn to design a product review form in Blazor, wire a comment model, implement an edit form, and add validation for author, email, and comment text.

Implement a Blazor Server submit comment feature to save reviews to the database, using fluent validation and preload, then show a toast and reset the form.

Learn to add fluent validation to the comment form in a Blazor app, ensuring required fields and length limits for reviews.

Create and customize admin comment pages using Razor components and Entity Framework CRUD, scaffold new pages, update navigation, and refine button styling.

Create the users database and scaffold dbcontext and user models with entity framework core, then build razor pages for register and login with is admin, registration date, and recovery code.

Design and scaffold a register page in a Blazor server app, adding email, full name, and password fields and creating the register view to capture user data.

Learn to add fluent validation to the register form in a Blazor server app, defining a user validator with rules for full name, email, and password.

Implement register button to save user data in the database with input validation and a valid-submit flow. Use DbContext to check emails, create the user, save, and navigate to login.

Add a login page in the Blazor server app by creating a Razor component, a login view model with email and password, and a fluent validator, including post-register navigation.

Explore how to implement a Blazor login page in a live online shop by building a login service, validating credentials, and using cookies and claims for authentication.

Demonstrates building a dynamic user menu in a Blazor Server app by updating the login state to show my account, orders, and logout after login, with login and register before.

Learn to implement a logout feature in a Blazor Server app by wiring a logout page to the login service, signing out the cookie authorization, and redirecting to login page.

Showcases a recovery code workflow in a Blazor Server app: validate user, generate and store a code, and send via Gmail SMTP with an app password, with a loading indicator.

Create a reset password page in a blazor server app using email, new password, and a recovery code, with a reset password view model and validator.

Design and implement the add to cart feature by creating a shared add to cart button and a cart table with id, user_id, product_id, and count, plus scaffolding the DbContext.

Implement an add to cart button across shop pages using C# code, scaffolding the cart database and DbContext, and persist cart data per user with authentication handling.

Learn to design and implement a shopping cart page in a Blazor server app, including a cart razor component, items with image, title, price, quantity, and total, plus layout tweaks.

Learn to build a shopping cart page in Blazor app by writing C# code and defining a cart view model with id, title, image, price, discount, count, and row sum.

Load cart data by building a cart view model from the database for the authenticated user, load items, fetch product details, and compute row sums using price, discount, and count.

Create a dynamic shopping cart page by rendering cart view items from a view model, displaying image, title, price, discount, and quantity, with computed row sums and final price.

Learn to implement cart quantity updates with onblur events, updating item quantities, recalculating row totals and grand total, and persisting changes via a database context in a Blazor Server app.

Learn to implement a clear cart feature in Blazor with DbContext: fetch the current user's cart, delete items, save changes, and display an empty cart message.

Learn to delete a cart item in a Blazor Server app by wiring an onclick delete button, removing by user and product id via DbContext, then reloading the cart.

Design and implement a new login page in a Blazor server app, enabling automatic page refresh after successful login and after logout, using cookies, a login handler, and JavaScript redirects.

Design a dynamic logout experience by adding a user menu component in the default layout with authorize view and refreshing the page after sign-out.