Using Blazor Server, Blazor WASM, and the .NET 6 (.NET/EF Core) API, create a real-world ecommerce website and deploy it to Azure
About This Video
In Detail
For years, JavaScript frameworks have dominated the front-end/client-side development. But things are about to change …
Using Blazor Server, Blazor WASM, and the .NET 6 (.NET/EF Core) API, create a real-world ecommerce website and deploy it to Azure
About This Video
In Detail
For years, JavaScript frameworks have dominated the front-end/client-side development. But things are about to change with Blazor!
Blazor is an exciting new part of .NET Core (.NET 6) designed for building rich web user interfaces in C#. This course will help developers transition from building basic sample apps to implementing more real-world concepts, design patterns, and features.
This course will provide you with a complete real-world scenario with Blazor, which will make you face many challenges and solve those issues as we proceed with the course. The course covers everything there is in Blazor, from Blazor Server to Blazor WASM applications that consume .NET 6 API.
In this course, we will be using the latest .NET 6 along with Entity Framework Core and Stripe for payment processing, and also work with third-party Syncfusion and Radzen Blazor components.
By the end of the course, you will become an expert and will be able to build your own website using Blazor Server, Blazor WASM, and .NET 6 (.NET Core) API and deploy it to Azure.
Audience
This course is for anyone interested in learning the fundamentals of Blazor using .NET 6, understanding the new file structure in Blazor WASM and Server application, or building an ecommerce website with Blazor WASM and Server in .NET 6!
You must be familiar with .NET Core, EF Core, and the .NET API, as well as have a basic understanding of how to use SQL Server Management Studio 2018 in Visual Studio 2022.
Chapter 1 : Introduction
Welcome to the Course
Project Demo
What is Blazor
Blazor Client Versus Blazor Server
What This Course Is Not About
Create Project
Run the Application
Source Control
Chapter 2 : Blazor Files and Folders
.NET 6 Updates - Nullable
Blazor Files Overview
Blazor Server Project Flow
Blazor Web Assembly Project Brief Overview
Understand the Default Home Page
Creating Razor Component
Chapter 3 : Blazor - Data and Property Binding
One-Way Data Binding
Two-Way Data Binding
Assignment 1 - Data Binding
Assignment 1 Solution - Data Binding
Dropdowns and Data Binding
Organizing Individual Product Playground
Product List
Assignment 2 - Bind Property
Assignment 2 Solution - Bind Property
Assignment 3 - Razor Component
Assignment 3 Solution - New Razor Component
Chapter 4 : Blazor - Shared Components and Event Binding
Create Shared Component
Passing Props to Shared Component
Assignment 4 - Shared Components
Assignment 4 Solution - Shared Components
Favorites Checkbox
Event Callback
Assignment 5 - Event Callback
Assignment 5 Solution - Event Callback
Chapter 5 : Blazor - Render Fragment, Attribute Splatting, and Routing
Render Fragment
Another Way for Basic Event Callback
Multiple Render Fragment
Assignment 6 - Render Fragment
Assignment 6 Solution - Render Fragment
Why We Need Attribute Splatting
Attribute Splatting
Capture All Values with Splatting
Passing Parameters at Multiple Levels
Cascading Parameters
Cascading Parameter with Name
Routing Basics
Routing - Query Parameters
Routing - Navigation Manager
Chapter 6 : Blazor - JavaScript
Confirm Box in Blazor
Toastr JS
JsRuntime Extensions
Assignment 7 - SweetAlert
Assignment 7 Solution - SweetAlert
Referencing Components
Remove Default Components
Chapter 7 : Blazor Lifecycle
OnInitialized Lifecycle
OnParameterSet Lifecycle
OnAfterRender
Render and StateHasChanged
Chapter 8 : Model and Repository
Add Projects to Solution
Set Up ApplicationDbContext
Add DbContext to Container
Push Category to Database
Category DTO
ICategory Repository
Category Repository Setup
AutoMapper
Implement Category Repository
Chapter 9 : Category CRUD
Create Category List Component
Forms in Blazor Part 1
Forms in Blazor Part 2
Validations in Blazor Form
Create Category
List Category
Loading Spinner
Load Category on Edit
Edit Category
Chapter 10 : Delete Component
Delete Confirmation Component
Delete Method and Assignment 8
Assignment 8 - Delete Confirmation EventCallBack
Processing on Delete Confirmation
Cleaning Up Task
Assignment 9 - OnAfterRenderAsync
Assignment 9 Solution - OnAfterRenderAsync
Async Repository
Chapter 11 : Products
Section Introduction
Create Product Table
Product DTO
Assignment 10 - Product Repository
Assignment 10 Solution - Product Repository
Product List Component
Product Upsert Component
Error Solving in Blazor
Category Dropdown
FileUpload Service
Handle File Upload
Create Product
Update Product
Delete Product
Syncfusion Components
Syncfusion RichTextEditor in Action
Create Products
Chapter 12 : Product Pricing
What We Will Cover
Product Price Model and DTO
Assignment 11 - Product Price Repository
Assignment 11 Solution - Product Price Repository
Load Product Details and Product Price
Show Product Summary
Add Syncfusion DataGrid
Syncfusion DataGrid Settings Part 1
Syncfusion DataGrid Settings Part 2
Syncfusion DataGrid Settings Part 3
Syncfusion DataGrid Settings Part 4
Chapter 13 : Tangy API
Create Tangy API
Add Connection String to API Project
Success Error DTO
Product Controller API Endpoint
Return Product Prices from Product API
Chapter 14 : Tangy Client - WASM
Add App Settings to WASM Project
Changing Default Navigation
Basic Settings Such as Server Project
Product Service Interface
Product Service Calls
Home Page UI (User Interface)
Retrieve Products from API
Home Page in Action
Details UI
Details VM
Selecting Product Price
Details UI - Add to Cart Toggle
Chapter 15 : Shopping Cart and Summary
Add Blazored Local Storage
Cart Service
Implement Cart Service
Cart Service Add to Cart in Action
Shopping Cart UI
Shopping Cart Load Data
Increment and Decrement Cart
Displaying Cart Counter
Update NavBar on Cart Update
Chapter 16 : Order
Create Order Header and Detail
Create Order Model and DTO
Order Repository
Order Create Method
Order Repository Implementation
API - Create order controller
Order Service
Order Summary Part 1
Order Summary Part 2
Order Summary UI
Chapter 17 : Authentication and Authorization - Blazor Server
Scaffold Identity in Blazor Server
Add Identity Tables
Add Columns to ASP Net Users Table
Register First User
Login and Logout
Show Email of Logged in User
Authorize Attribute
Authentication State in OnInitialized
Create Admin User
Roles in Action
DbInitializer
Seed New Database
Authorization in NavMenu
Chapter 18 : Authorization in API
Add Identity to API
Account Controller
SignIn SignUp DTO
SignUp API Endpoint
Demo - SignUp API
SignIn API Endpoint Part 1
API Settings Section
SignIn Helper Methods
SignIn Endpoint Part 2
Add Authentication to API
Add Bearer to Swagger
Chapter 19 : Blazor WASM - Authentication and Authorization
JwtParser
Add AuthenticationState Provider
Custom Authentication State Demo
IAuthenticationSerivce
Login Service
Register and Logout Service
Register and Login UI
Register Component
Registration in Action
Splitting Code Files
Login in Action
Toggle Navbar on Authorization
Login and Logout in Action
Avoid Force Load on Auth State Change
Redirect to Login
Load User Details
Chapter 20 : Stripe Payment
Call Create Order from Summary
Create Order Header and Details
Create Stripe Account
Add Stripe to API Project
Payment Service in Blazor WASM
Stripe Payment Controller Method
Call Stripe
Issue with Order Total
Order Confirmation
Stripe Session Status and Payment Successful
Summary Processor
Chapter 21 : Order Management
Create Order List Component
Radzen Component
Order Details Component
Order Details UI
Update Order Details
Ship Order
Payment Intent ID
Refund Order
Chapter 22 : Email and CSS Isolation
Send Email Using MailKit and MimeKit
Send Email Using SendGrid
Blazor WebAssembly Package Issues
Chapter 23 : Azure Deployment
Azure SQL Database
Blazor Server Deployment
API Deployment
Blazor Client Deployment