Introduction to Blazor in .NET 9 (2024)

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 9) 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.

Full Course Link : https://www.dotnetmastery.com/Home/Details?courseId=24

Course TimeLine

⭐️ Section 1 – Welcome & Getting Started ⭐️
⌨️ (0:00:01) Welcome
⌨️ (0:02:07) What we will cover

⭐️ Section 2 – Create Blazor Project ⭐️
⌨️ (0:04:59) Create Project
⌨️ (0:08:10) Add Project to source control
⌨️ (0:09:45) Run default application

⭐️ Section 3 – Blazor Fundamentals Part 1 ⭐️
⌨️ (0:11:08) Create First Blazor Component
⌨️ (0:15:51) One way data binding
⌨️ (0:19:60) Tow way data binding
⌨️ (0:25:12) Assignment 1
⌨️ (0:25:48) Assignment 1 Solution
⌨️ (0:29:04) Dropdown in Blazor
⌨️ (0:35:03) Global using statement
⌨️ (0:37:48) Product List
⌨️ (0:40:28) Assignment 2 – Product Table
⌨️ (0:41:08) Assignment 2 Solution – Product Table
⌨️ (0:43:45) Assignment 3 – Binding Product Table to Product Summary
⌨️ (0:44:28) Assignment 3 Solution- Binding Product Table to Product Summary
⌨️ (0:46:17) Assignment 4 – Product Demo Component
⌨️ (0:47:36) Assignment 4 Solution- Product Demo Component
⌨️ (0:53:46) Button clicks in Blazor
⌨️ (0:57:09) Passing parameter to method calls in blazor
⌨️ (0:58:13) Assignment 4 – Delete Product
⌨️ (0:58:48) Assignment 5 Solution – Delete Product

⭐️ Section 4 – Blazor Fundamentals Part 2 ⭐️
⌨️ (1:00:37) Create Shared Component
⌨️ (1:05:57) Passing Props to Shared Components
⌨️ (1:09:36) Assignment 6 – Shared Component
⌨️ (1:11:31) Assignment 6 Solution – Shared Component
⌨️ (1:13:26) Create Favorite CheckBox
⌨️ (1:16:29) Event Callback
⌨️ (1:22:24) Assignment 7 – Event CallBack
⌨️ (1:24:18) Assignment 7 Solution – Event Callback

⭐️ Section 5 – Blazor Fundamentals Part 3 ⭐️
⌨️ (1:28:19) Create Parent and Child Components
⌨️ (1:32:43) Render Fragment
⌨️ (1:34:56) Simple EventCallBack for methods with no parameters
⌨️ (1:38:17) Multiple Render Fragment
⌨️ (1:41:10) Passing Parameters at multiple level
⌨️ (1:44:43) Cascading Parameter
⌨️ (1:48:29) Cascading Parameter with Name

⭐️ Section 6 – Routing in Blazor ⭐️
⌨️ (1:52:25) Routing Basics
⌨️ (1:55:05) Passing parameters to route
⌨️ (1:56:40) Multiple Parameters
⌨️ (1:58:33) Route Constraints
⌨️ (2:00:17) Catch all Route Parameters
⌨️ (2:01:58) NavLink
⌨️ (2:06:05) Named Elements Routing
⌨️ (2:07:10) Query Parameters
⌨️ (2:10:55) Navigate using Navigation Manager
⌨️ (2:13:19) Force Refresh
⌨️ (2:15:13) Query String

⭐️ Section 7 – Blazor and JavaScript
⌨️ (2:16:46) Confirmbox in Blazor
⌨️ (2:22:37) Toastr JS Part 2
⌨️ (2:26:38) Toastr JS
⌨️ (2:31:02) JS Runtime Extensions
⌨️ (2:34:45) Assignment 8 – SweetAlert
⌨️ (2:36:37) Assignment 8 Solution – SweetAlert
⌨️ (2:40:08) Referencing Components
⌨️ (2:44:24) Remove Default Components

⭐️ Section 8 – Blazor Lifecycle ⭐️
⌨️ (2:47:40) OnInitialized LifeCycle
⌨️ (2:56:16) OnParameterSet LifeCycle
⌨️ (3:01:27) OnAfterRender Lifecycle
⌨️ (3:06:53) Should Render and StateHasChanged

⭐️ Section 9 – Blazor Project and Configurations ⭐️
⌨️ (3:16:01) Create Blazor Web App – SSR
⌨️ (3:20:41) Enhanced Navigation in Blazor
⌨️ (3:23:28) Make Data Permanant in Nagivation
⌨️ (3:25:54) Stream Rendering in Blazor
⌨️ (3:28:60) Stream Rendering Example
⌨️ (3:31:49) Blazor Server Project with Global
⌨️ (3:35:45) Global vs Component Level Interactivity
⌨️ (3:38:18) Blazor WASM Standalone vs Blazor Web App
⌨️ (3:42:32) Blazor Auto Interactivity
⌨️ (3:45:24) Blazor Server VS WASM VS Auto in Action
⌨️ (3:50:49) Focus on Learning Blazor

⭐️ Section 10 – Forms in Blazor ⭐️
⌨️ (3:52:51) Product Model Setup
⌨️ (3:55:30) Edit Form in Blazor
⌨️ (3:59:47) Bind Method for Form Submit
⌨️ (4:02:57) Validations in Blazor Forms
⌨️ (4:08:47) More Input Types
⌨️ (4:12:05) Display Created Product
⌨️ (4:14:44) Bind Property to Form

⭐️ Section 11 – Final Project ⭐️
⌨️ (4:18:04) Create Project
⌨️ (4:20:46) Add Project to GitHub
⌨️ (4:23:43) Setup Project
⌨️ (4:25:53) Create Database

⭐️ Section 12:Category CRUD ⭐️
⌨️ (4:28:03) Create Category Model and Table
⌨️ (4:32:10) Create ICategoryRepository
⌨️ (4:34:18) Implement Category Repository
⌨️ (4:39:11) Category List UI
⌨️ (4:46:02) Show Loading Spinner
⌨️ (4:47:42) Load Categories Table
⌨️ (4:53:02) Importance of Await
⌨️ (4:56:28) Async Repository
⌨️ (5:00:58) Another approach to load initial data
⌨️ (5:05:29) Upsert Category Component
⌨️ (5:09:43) Add Bootstrap JQUERY and Toastr CDN
⌨️ (5:12:21) Category Upsert UI
⌨️ (5:18:25) Edit and Create Category
⌨️ (5:24:56) Add toastr to Project
⌨️ (5:31:56) How to Show and Hide Modal
⌨️ (5:36:44) Show Modal from Delete Button
⌨️ (5:40:01) Delete Endpoint in CategoryList
⌨️ (5:43:44) Delete in Action
⌨️ (5:47:36) Modal Parameters
⌨️ (5:50:30) Conclusion