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.

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

[guillermorosales]

I discovered this channel over the weekend. It's amazing how you explain the topics and make it seem so easy. As soon as possible I will be buying your courses. Thank you so much from Mexico.

[lammetjeslam]

wonderful training material ! Great thank you very much Bhrugen! 🙏

[alessandro_carta]

Thank you for the course, beautiful and in-depth

[lukevincent]

I have purchased this course. If you want to know Blazor, this is THE course. Can imagine the time spent putting all this good stuff together. Just one thing. I wish course creators would make use of the leading component packages. Currently, it's Mudblazor. This makes a huge difference to the interface and its definitely what customers want. Thanks Bhrugen!

[MiscAccount-ilvh]

Hi, Thanks for a wonderful lecture. I have a question, (0:43:45) Assignment 3 - Binding Product Table to Product Summary. I am not getting the desired table formatting. Columns data is not showing under column headings properly, instead it is getting squeezed at left hand side.

[AdnanYangilic]

We thank you for your wonderful videos and github repos. They are very helpful for us. We need twilio sms code confirmation example in mvc identity account controller. We would be very thankful to you Bhrugen, if you publish an example in github when you have time.

[YesShami]

Sir, Can you make a course on Build Better Apps with .NET Aspire with Blazor and show how to use Azure SQL Databases and SQL and NoSQL databases

[Srpnte]

5:36:44 the Modal doesn't show when i click on delete.

[ComMech]

sir even after using await with OnInitializedAsync, UI is not rendering and pausing for 3 sec(set) then changing UI. Image is not showing because of that .... at 5hr from video

[انورطهالهتار]

greate, what is the best blazor or razor ? please make vs .

[chrishansangeeth]

Can you do a tutorial about MAUI or Xamarin Please 🖤

[itzmebirdy]

Hello sir! I am new to programming and I'm interested in learning .NET. Will it be worth learning .NET in 2024? Will .NET developers get jobs in the future? Please I hope you will answer me.

[ferdicuyar]

Everybody copy paste same examples i am searching for blazor session storage in .net 9 but only this same videos