Mastering Blazor:Full Course on Blazor WASM & Unified Blazor

This is an introduction to the Blazor Framework, including Blazor WebAssembly and Blazor Server:

1) Introduction to the Blazor Framework.

2) Blazor WebAssembly's architecture and functionality.

3) A comparison between JavaScript-based Single Page Applications (SPAs) and Blazor WebAssembly applications.

4) Information on how to start building Blazor WebAssembly-based web applications, along with the necessary tools.

In this lecture, the Blazor WebAssembly project structure and its file contents will be explained:

1) Connected Services.

2) launchSettings.json file.

3) Pages folder and its contents.

4) Shared folder and its contents.

5) Web root: wwwroot folder and its file contents.

6) _Imports.razor file.

7) App.razor component.

8) Program.cs file.

9) MainLayout component.

In this lecture, Blazor WebAssembly components will be explained in detail:

1) What are Blazor application components?

2) Directives, directive attributes, and data bindings in Blazor components.

3) Route templates and route template parameters.

4) Methods to avoid in Blazor components (avoid thread-blocking calls).

5) Getting and display data from a static JSON data source in Blazor components.

6) Blazor component creation and page implementations.

In this lecture, the process of adding a configuration file to Blazor WebAssembly will be explained:

1) Add the configuration file, appsettings.json, to the web root folder.

2) Read configuration values from the file.

3) Call an external API in the Blazor WebAssembly app component.

In this lecture, data bindings in Blazor WebAssembly will be explained in detail:

1) Two-way data binding, property and event data bindings, will be presented.

2) As an example, a custom English dictionary page will be created using two-way data binding.

3) Calling an external API in Blazor WebAssembly will also be discussed, using the dictionary example.

In this lecture, we will first explain templated components in Blazor in detail.

1) Create a Blazor templated component and explain its properties.

2) Then, use the component to create a photo album page.

This lecture demonstrates how to call JavaScript APIs and functions in Blazor WebAssembly apps. To make the process easier to understand, we will use a 3D pie chart example.

1) Import the JavaScript-based AJAX API and the relevant JavaScript file into the Index page.

2) You are now ready to use the API/JavaScript functions in the project.

3) Create a PieChart Blazor component to display the 3D pie chart.

4) Finally, add the PieChart component/page to the side navigation bar of the Blazor WebAssembly project.

In this lecture, custom service injection in Blazor WebAssembly will be explained in detail.

1) A IUserService interface with a GetUsers() method was created.

2) The service method was then implemented.

3) The service was registered in the Program.cs file and added to the services collection.

4) Next, service lifetimes in Blazor apps were explained.

5) An "AvailableUsers" Blazor component was created to consume the IUserService interface.

6) Finally, the "AvailableUsers" component/page was added to the side navigation bar of the application.

In this lecture, we present routing in Blazor WebAssembly apps with practical examples.

1) How to manage request routing in Blazor applications.

2) Blazor components can support multiple route templates by using multiple @page directives.

3) Route parameters and optional route parameters.

4) Route constraints, with examples.

5) Route parameters and invariant culture matching.

In this lecture, we demonstrate how to create a Razor Class Library and consume Razor components from it.

1) Create a Razor Class Library (RCL) project.

2) Create a component in the RCL project and display some data in it.

3) Then, create a new Blazor WebAssembly app project, add a "Test" component, and reference the RCL project.

4) Finally, import the RCL project into the "Test" component in the Blazor WebAssembly app project, and consume

the component from the RCL.

In this lecture, we will present event handling using EventCallback in Blazor WebAssembly apps in detail.

1) Create a child component (a customized button).

2) Create a parent component with a "ShowMessage" method and consume the child component.

3) In the parent component, set the child component's EventCallback (OnClickCallback) to the "ShowMessage" method.

4) When the button is clicked in the child component, the parent component's "ShowMessage" method is called, updating and displaying a message in the parent component.

In this lecture, we will explain forms and validations in the Blazor framework using the built-in EditForm component.

1) Create an example form component using the EditForm component.

2) Add data annotation validation attributes and a submit button.

3) Enter some input data and submit the form. If the input data is invalid, validation messages will be displayed. If the input data is valid, the form will be submitted successfully.

In this lecture, we will demonstrate how to share application state using the CascadingValue component in Blazor.

1) First, create a custom pagination component.

2) Next, create a "Display Comments" component and consume the custom pagination component.

3) Finally, implement the functionality to share application state using the CascadingValue component, including the CascadingParameter attribute, in Blazor.

In this lecture, we will introduce the process of creating a custom pagination component in a Blazor WebAssembly application.

1) Create an example pagination component.

2) Create a "Display Comments" component and consume the pagination component.

In this lecture, we will demonstrate how to share application state or data between components using a shared state container service in a Blazor WebAssembly app.

1) Create a "TestComponent" with an InputSelect component (form control) and display a list of countries in it.

2) Then, create a ShareStateService, register it in the Program.cs file, and inject the service into the "TestComponent."

3) Finally, select a country in the InputSelect and share the selected country name across the application using the ShareStateService.

In this lecture, we will discuss how to implement file uploads in a Blazor WebAssembly app.

1) Create a Blazor WebAssembly project (Client project).

2) Create an "UploadedFile" class in the Shared project.

3) Create a "FileUpload" controller in the Server project.

4) Create a "FileUploading" Razor component in the Client project.

5) Add the "FileUploading" Razor component to the side navigation bar of the application. Finally, run the application and test file uploads.

After completing many lectures, it’s time to create a review lecture that brings together key concepts in a single Blazor WebAssembly (WASM) app using the latest .NET 8.0.

The following topics will be covered:

Setting up the Blazor development environment (if not already done), creating a project, understanding project structure, running the application, creating a new component, data binding, event handling, dependency injection, calling a public web API, and styling components.

In this lecture, we will cover several important features in Blazor:

1) Component-based Architecture.

2) Razor Syntax.

3) Data Binding.

4) Types of Dependency Injections.

5) JavaScript Interoperability.

6) State Management.

7) Form Handling and Validation.

8) Routing.

9) Performance Optimization.

10) About Security Best Practices.

Directives are very important in Blazor. In this lecture, we'll explore all the important directives in Blazor and provide practical examples for each.

Blazor directives are built-in macros that modify the C# code generated from Razor markup. Directives are used by prefixing the identifier with the "@" symbol. The identifier can refer to an HTML element's attribute or a Blazor component's property.

Currently Blazor does not support custom directives.  In this lecture, we will dive into Blazor directives with practical examples.

Update: Visual Studio 2026 Released.