Mastering ASP.NET 6.0 Blazor Online Course

Mastering ASP.NET 6.0 Blazor Online Course

This video course offers a complete overview of the Blazor framework, from installation and configuration to building a finished application. It begins with an introduction to Blazor and its hosting models, then moves into hands-on development with components, data binding, routing, and lifecycle methods. You’ll also explore new features in ASP.NET Core 3.1, build a CRUD movie application, implement authorization, and learn asynchronous programming essentials.

Through practical coding exercises, you’ll gain a deeper understanding of Blazor’s component-based ecosystem while working toward a fully functional ASP.NET 6.0 project.

Who should take this course?

This course is ideal for web developers, software engineers, and IT professionals who want to build modern, interactive web applications using Blazor and .NET 6.0. It’s especially suited for those with prior knowledge of C# and .NET who wish to move beyond traditional web development and leverage Blazor’s component-based framework. Whether you’re an experienced .NET developer, a full-stack engineer exploring new tools, or a professional aiming to enhance your career in modern web app development, this course will help you master Blazor for real-world projects.

What you will learn

• Create your first Razor component in Blazor
• Implement basic authorization and user data protection in the movie application
• Create a modal popup dialog and confirm the delete dialog with dynamic rendering and JavaScript interop calls
• Create a database and add tables to store users and roles
• Understand what a progressive web application is
• Testing and debugging the Blazor application

Course Outline

Introduction

• Introduction and Features
• Live Demo of Completed Blazor App

Migrating the Completed Blazor MovieApp to ASP.NET6.0

• Migrating the Completed Movie App CRUD Application to ASP.NET 6.0

Introduction to ASP.NET Core 3.1 Blazor

• What Is Blazor?
• Blazor Hosting Models

Components in Blazor

• Create Your First Razor Component in Blazor
• Create a Nested Component in Blazor

What's New in Blazor 3.1 Released with ASP.NET Core 3.1?

• Partial Classes and Component Tag Usage
• Pass Parameter to Components and Prevent Default Action
• Stop Event Propagation and Detailed Error Handling During App Building

Advanced Concepts with Hands-On Coding in Blazor

• Routing in ASP.NET Core 3.1 Blazor
• One-Way Data Binding in ASP.NET Core 3.1 Blazor
• Event Callback in ASP.NET Core 3.1 Blazor
• Two-Way Data Binding in ASP.NET Core 3.1 Blazor
• Inheritance in ASP.NET Core 3.1 Blazor
• Lifecycle Methods in ASP.NET Core 3.1 Blazor - Part 1 (Fundamentals)
• Lifecycle Methods (Code Example) - SetParametersAsync
• Lifecycle Methods (Code Example) - OnInitialized and OnInitializedAsync
• Lifecycle Methods (Code Example) - OnParametersSet and OnParametersSetAsync
• Lifecycle Methods (Code Example) - OnAfterRender and OnAfterRenderAsync
• Lifecycle Methods (Code Example) - ShouldRender

Asynchronous Programming Fundamentals

• Learn Asynchronous Programming Through Coding Examples

Create a CRUD Application in Blazor

• Create a Blazor (Server) App with Individual User Accounts Authentication
• Run the Blazor App
• Understand the Project Structure
• The Program Class and Host Object
• Startup Class
• Function of _Imports.razor Class
• The Shared Folder
• Create a Database and Add Tables to Store Users and Roles
• Add Users and Roles
• Implement Basic Authorization
• Frequently Used Page Directives for a Razor Page
• Create a Movie Class
• Add the Movie Entity to the ApplicationDbContext
• Add Migration to Create Movies Table
• Create an Interface for Data Access Service
• Create a Data Access Service and Methods to Retrieve Records
• Create Methods for Add, Edit, and Delete Operations
• Register the Data Access Services Class in Startup
• Seed the Movies Database
• Create a Details Page to Show List of Movies
• Add Bootstrap to the Project
• Create a Modal Popup Dialog to Add a Movie
• Edit the Movies Table
• User Data Validation
• Save Data to the Database
• JavaScript Interop Calls to Modal
• Communication Between Movie Detail and Movies
• Edit Movies
• Render Fragment Usage to Change Modal Title Dynamically
• Create a Confirm Delete Dialog
• Complete the Delete Operation

Authentication and Authorization

• Authentication in Action for the Movie App
• View User Profile Data with Authorization
• Run and Test the App for User Data Protection
• Installing the Blazor Movie App with Database from GitHub on User Machines

Additional Content: Adding Spinkit for Loading Indication to Movies App

• Adding Spinkit to the App
• Using Spinkit with Spinloader Component
• Testing a Few Spinner Components

Paginating the Movies

• Display Paginated Movies
• Bonus Section: Progressive Web Applications
• What Is a Progressive Web Application?

Testing Blazor Using bUnit

• Testing the Counter Component