Web Development


Blazor - The Complete Guide (WASM & Server .NET Core 5)

Build real world resort booking website using Blazor Server, Blazor WASM and .NET 5(.NET Core) API and deploy to azure.

4.81 (84 reviews)

Blazor - The Complete Guide (WASM & Server .NET Core 5)



15.5 hours


Dec 2020

Last Update
Regular Price

What you will learn

Build real world application using Blazor Web Assembly

Manage admin features using Blazor Server

Build .NET 5 API from scratch

Consume .NET 5 API using Blazor WASM

Authentication & Authorization in Blazor Server and WASM

Emails with Blazor

Integrate Stripe Payments in Blazor WASM

Repository Pattern and Dependency Injection

Deploying .NET API, Blazor WASM & Server to Azure


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

With that there are many questions.

  • How do you scale an existing application? 

  • How do you architect a mid-large scale project?

  • How to correctly process payments?

  • How to efficiently understand Blazor and use it in real world projects?

This course will provide you a complete real world scenario with Blazor which will make you face many challenges and solve those issues as we proceed with the course.

There are other courses on Udemy, but this is the ultimate course, it covers everything there is to Blazor from Blazor Server to Blazor WASM applications which consumes .NET 5 API.

This course will help developers transition from building basic sample apps to implementing more real world concepts, design patterns, and features.

So join me in this exciting course of exploring what real world challenges are with Blazor as it evolves drastically!

We will be using the latest .NET 5 for this course along with Entity Framework Core and Stripe for payment processing.




Course Project Demo

Course Overview

Project Resources

What is Blazor.

Blazor Server vs Blazor Client

What this course is not about

Create Project

Blazor Server Application Overview

Blazor Server Vs Client Demo

Blazor Basics

One way data binding

Two way data binding

Assignment 1

Assignment 1 - Data Binding

Dropdown and Loops

Add Rooms List

Assignment 2

Assignment 2 - Bind Property Practice

Code Cleanup and Routing Introduction

Assignment 3 - Demo Hotel

Assignment 3 Solution - Demo Hotel

Components in Blazor

Passing parameters to Components

Individual Room Component

Assignment 4 - Hotel Amenities

Solution Hotel Amenities

Lifecycle 1

Lifecycle 2

Lifecycle 3

Lifecycle 4

Event Call Back

Assignment 5- Event Call Back

Assignment 5- Event Call Back Solution

Blazor Intermediate

Render Fragement

Another way for Event Call Back

Multiple Render Fragment

Assignment 6- Render Fragment

Assignment 6 Solution- Render fragment

Need for Attribute Splatting

Attribute Splatting

Capture All Values with Splatting

Passing Parameters at multiple level

Cascading Parameter

Cascading Value with Name

Routing Basics

Routing Advance Topics

Navigation Manager

Database in Blazor

Add Multiple Class Library Projects

Add ApplicationDbContext

Configure Hidden Villa Server Project for DbContext

Create Database

Hotel Room Model

Hotel Room DTO

Hotel Repository Interface

Hotel Room Repository Implementation Part 1

Hotel Room Repository Implementation Part 2

Hotel Room Repository Implementation Part 3

Blazor forms and CRUD

Create Hotel Room List Page

Forms in Blazor Part 1

Forms in Blazor Part 2

Validations in Edit Form

Create First Hotel Room

Hotel Room List

Blazor and Javascript

JS in Blazor

Add Toastr to Project

JSRuntime Extenstions

Assignment 7 - Sweet Alerts

Assignment 7 Solution- Sweet Alerts

Referencing Components

Hotel Room Management (Blazor Server)

Update Hotel Room Part 1

Update Hotel Room Part 2

Hotel Room Image Model

Hotel Room Image Repository Interface

Implement Room Image Repository

File Upload Interface

Implement File Upload Interface

Input File Component

Handle Uploading Image

Image Viewer when uploading

Upload and assign image to room

Display Image on Edit

Add more image while updating hotel room

Delete Image Issue

Delete Image while creating room Part 1

Delete Image while updating room

Show Image Processing Link

Add Font Awesome

Delete Confirmation Component

Hotel Room List Delete Button

Delete Room Images

Bug with Delete

Quill Text Editor

Assignment 8 - Hotel Amenity

Make image accessiable across all projects

Authentication and Authorization in Blazor Server

Scaffold Identity

Identity In Action

Login and Logout

Authorize Attribute

Authentication State

Adding roles access to pages


DB Initializer Part 1

DB Initializer Part 2

DB Initializer in action


Setup API

Hotel Room Controller

Get Hotel Room EndPoint

Extend Identity User

Setup Account Controller

Registration DTO

Sign Up Endpoint

Sign Up Demo

Sign In DTO's

SignIn Endpoint Part 1

API Settings

SignIn Helper Methods

SignIn Endpoint Part 2

Add Authentication to API

Add Cors and NewtonsoftJson

Add Bearer to Swagger

Blazor Client (WASM)

Create Project

Add Toastr, setup css and js cdn

Bootswatch and NavMenu

Home Page UI

Home View Model

Local Storage

Local Storage in Action

Loading Gif

Blazor Hotel Management Client Side

Hotel Room Interface

Get Hotel Rooms Service Implementation

Add Checkin and Checkout to Hotel Room API

Setup HttpClient

Hotel Rooms Get Local Storage

Load All Rooms Demo and Common Error Blazor

Debugging in blazor web assembly

Hotel Rooms UI

Hotel Rooms List Part 1

Add more properties to HotelRoomDTO

Update Button Hotel Room's Page

Identity User and Application User

Assignment 9 - Amenity List in Blazor Web Assembly

Blazor Hotel Booking

Room Details UI

Add Room Order Details Table

Room Order Details DTO

Room Order Details Repository Interface

Implement Room ORder Details Repository Part 1

Implement Room ORder Details Repository Part 2

Check For Unique Booking

Add RoomOrderDetails Service

Room Details On Initialized Method Part 1

Room Details On Initialized Method Part 2

Room Details Model Binding Part 1

Debugging Error and add Spinner

Room Details Model Binding Part 2

Handle number of nights change

Handle Validations

Stripe Integration

Add Stripe DTO Models

Stripe API Endpoint

Stripe Keys

Create Stripe Endpoint in API

Stripe Payment Service

Room Order Endpoint in API

Handle Checkout Method Part 1

Invoke Stripe

Stripe Demo

Payment Successful UI

Payment Successful Logic

Mark Payment Successful API

Complete Order Flow Demo

Check if booking exists

Sold Out Demo

Authentication and Authorization in Blazor WASM

Add Jwt Parser

Add AuthenticationState Provider

Custom Authentication State Demo


Login Service

Register and Logout Service

Login and Register UI

Register Logic

Register a user

Code Behind File

Login Code Behind

Login Demo

Change NavMenu based on authorization

Logout Demo

Notification Helper Methods

Login Logout Renders UI changes

Authorization in action

UserInfo from LocalStorage

Emails in Blazor

All Room Images

Room Details Image

Configure MailJet Settings for Email


Send Email Demo

Not Authorized Scenarios

Azure Deployment

Azure Deployment


Taro1 January 2021

So far so good with decent examples, but IMO, I didn't like the fact that you are asking for feedback in exchange for the localization content. I understand that it is a good way to incentivized students to leave reviews for the Udemy algorithm but shouldn't the content be given for the price we already paid?

Premchand30 December 2020

Beautiful course and the course that I am looking for. Can you also some content related to lazy loading especially for blazor web assembly

Tim28 December 2020

IF YOU WANT TO FINALLY DEMYSTIFY BLAZOR, STOP WHAT YOU'RE DOING AND TAKE THIS COURSE! This course is, by far, the most comprehensive start-to-finish course I've found on Blazor thus far. Bhrugen does an amazing job at walking you through the entire app development lifecycle without barely any handholding. Throughout the course, Bhrugen will frequently introduce new concepts at their most basic level and I would often find myself asking, "Well yeah, but what about THIS", and nearly every time my question would answered within just a few minutes as he would continue in demonstrating more advanced usage and/or patterns. I would HIGHLY recommend this course for anyone who wants to see an ACTUAL real world implementation of Blazor (or anyone who is tired of sifting through Github for sample projects that might or might not work). Thanks for an amazing course Bhrugen!

Gareth25 December 2020

Instructor really knows the topic! A little fast at times if you don't know your CSS/JS too well but that's not what the course is about.

Naveed21 December 2020

Excellent Approach marvellous bhrugen for such an excellent approach and way to describe the key features in New Technology

Tony21 December 2020

Thus far expectation are being set, that is always a good start. Nothing was said about the cost of deploying to Azure. Will this be big surprise?

Eric21 December 2020

Most Blazor tutorials out there will teach you by building an API, a Blazor Server app, then rebuild the same app using Blazor Webassembly. This course is different. It opens up a concept that Blazor Server and Blazor Webassembly complement each other. Building 3 different apps (server, client, and API) which makes up a whole system is something you always see in the real world and the author will show you how to do it.

Fred20 December 2020

I have bought other Blazer courses from Udemy and they are all very good. But this course goes deeper into subjects that are not in the other courses. The subject matter is explained step by step in detail that makes it very easy to understand. I am very happy with this course and am learning a lot of new things.

Stefan20 December 2020

I started my C# journey with this brilliant teacher just a short time ago. Never have seen a more clear and easy to follow way of teaching things before. I am looking forward to finish this course in the next days. Keep up the good work mate and thank u so much!

Mohammed19 December 2020

Exactly what I was looking for to learn everything in Blazor. It covers Blazor Server Blazor Web Assembly and Web API with .NET 5. I have been purchasing and using Bhrugen Patel's .NET Core Courses and it had helped me a lot. As this course's name suggests, its a complete guide to Blazor.

Rafael19 December 2020

This is by far the best course on Blazor and ASP.NET Core on Udemy!! I am a big fan of the instructor, he explains everything very well and also goes into great depth and detail.

Andreas19 December 2020

Really good course on Blazor in new .NET 5.0. This is my second course from Bhrugen, I am learning a lot and enjoy it.

Erick19 December 2020

This is exactly what I need so I can start my own projects with confidence and rely on valuable information and references in the future

Naas17 December 2020

I have been following all your courses from the beginning. They are really good and helpful in my projects. I am very happy on how you present the topics and the ease and paste that you are presenting it. Keen up the great work!


Expired12/16/202030% OFF


Udemy ID


Course created date


Course Indexed date
Dibakor Roy
Course Submitted by

Android PlayStore
Apple Appstore