Blazor Through the Ages - (Hands-On Interactive)
- Description
- Curriculum
- FAQ
- Reviews
Have you ever thought of being a front-end developer with Single Page Applications (SPA) in mind but hate using JavaScript to achieve your objectives?
Have you ever thought of replacing React and/or Angular from your SPA by using a framework that uses your skills as a C# programmer?
If you have pondered on the above questions anytime in your career/curriculum, you have come to the right place. Yes, Blazor is a web framework offering from Micrsoft which allows you to leverage your C# language coding skills and allows you to achieve all that a more established React/Angular could offer without ever using JavaScript at all. At the same time get all that you could desire from a Single Page Application.
This is a basic course to start with and requires no prior knowledge of Blazor. As the course progresses the flow transfers to more advanced topics so by the end, students are expected to acquire an intermediate skill level.
As this course is completely built around Blazor, let’s have a quick overview of what it is?
-
Blazor is an open-source web framework offering from Microsoft
-
It uses just C# and razor(HTML/CSS) markup to create rich interactive user interfaces
-
Blazor does not require JavaScript for its development
-
It has a complete client-side(browser) version using web assembly.
Now a bit about the course:
-
Section 1: Includes the features and highlights of the Blazor framework and the course. It guides through the necessary installation and configuration requirements and concludes with a demo of the finished application
-
Section 2: This section deals in the Migration of the Completed Blazor MovieApp from ASP.NET Core 3.1 to ASP.NET 6.0
-
Section 3: The section introduces learners to Blazor and its hosting models
-
Section 4: Blazor has a component-based ecosystem, hence this section dives straight into building the first component
-
Section 5: As the course uses the latest released version of ASP.NET Core 3.1 (at the time of writing), this section deals in the new features added since the last release (3.0)
-
Section 6: Dedicated to a coding exercise as the first assignment
-
Section 7: This section deals in advanced concepts with hands-on coding such as: Routing, Data Binding, Event Callback, Inheritance and Lifecycle methods
-
Section 8: It is a short section dedicated to learning asynchronous programming fundamentals, the cornerstone for Blazor
-
Section 9: This section is completely dedicated to building the CRUD movie application
-
Section 10: Introduces authentication and authorization to the movie app to allow users to view only their user profile data (not all data)
-
Section 11: Is a bonus section to show the usage of a third-party component (Spinkit with Spinloader) to show nice, animated loaders while the application is loading. This section ends with an end of the course assignment to build a component (based on a spec.)
-
Section 12: A section dedicated to Pagination of the Movie App
-
Section 13: Introduces Blazor as a Progressive Web Application
-
Section 14: Testing Blazor Component using bUnit
-
Section 15: New section added that shows the complete walk-through of Creation of a Blazor Server Application with Pagination that Consumes an Existing Customer Web API
-
Section 16: Latest versions of Blazor apps in ASP.NET .7/8 that show two stand-alone apps in Blazor as part of the objective of evolving Blazor through the ages
Recent Reviews: “One of the best Blazor course” by Mohammed Cisse
-
1Encouraging Constructive Feedback: A Message to Our Udemy StudentsVideo lesson
This lecture emphasizes how unexplained low ratings can deter new students from enrolling in our courses in a highly competitive market, highlighting the importance of constructive feedback for both instructors and learners.
-
2Introduction and FeaturesVideo lesson
This is a welcome lecture to the students. The students will understand what is Blazor in a nutshell and have an understanding of the highlights of this course.
-
3Course ScopeText lesson
-
4Blazor Installation and ConfigurationText lesson
This covers the prerequisite Installation and configuration knowledge required for the course. The students will be set up to create apps using Blazor as outcome.
-
5Live Demo Of Completed Blazor Movie AppVideo lesson
This video lecture demonstrates the completed movies web app as the students will build hands-on within the course. This demo includes all the features on offer in the completed Blazor application.
-
6Live Demo of Blazor Client with Pagination Consuming Web APIVideo lesson
This is the second major project live preview that will be built from scratch. The Blazor front end complete with pagination will consume a customer Web API.
-
8What is Blazor ?Video lesson
This is an introduction to the ASP.NET Core 3.1 Blazor web framework. Ongoing through this lecture, students will be able to have an overview of Blazor. They'll be able to get answers to common questions like: What is Blazor? Why should I learn Blazor?
-
9Blazor Hosting ModelsVideo lesson
Provides different hosting models for Blazor framework which will make the students aware of their pros and cons for deciding to go ahead with one or the other.
-
10Create Your First Razor Component in BlazorVideo lesson
In this lecture, the students will create their first razor(Blazor) component which computes the average of numbers. After this lecture, the students will understand the core concept of components and be able to build simple components with Blazor.
-
11Create a Nested Component in BlazorVideo lesson
This lecture takes the students through creating a child component that is nested in a parent component. They'll know about parameter attribute and RenderFragment delegate and their use in the app.
-
12Partial Classes And Component Tag UsageVideo lesson
The students will be able to use partial classes and understand component tag helpers for a Blazor 3.1 server project. These features were released on December 3 by Microsoft and enhance Blazor features.
-
13Pass Parameter To Components And Prevent Default ActionVideo lesson
The students will be able to pass parameters to top-level components and able to prevent default keypress inputs to be registered for a Blazor 3.1 server project. These features were released on December 3 by Microsoft and enhance Blazor features.
-
14Stop Event Propagation And Detailed Error Handling During App BuildingVideo lesson
The students will be able to write code to stop event bubbling (propagation) and able to view different error messages between staging/production and development environment for a Blazor 3.1 server project. These features were released on December 3 by Microsoft at the .NET conference.
-
16Routing in ASP.NET Core 3.1 BlazorVideo lesson
This video lecture discusses URL routing with code samples. Blazor components can accept multiple route templates. It is also possible to pass parameters to the components by the route templates.
-
17One Way Data Binding in ASP.NET Core 3.1 BlazorVideo lesson
The tutorial builds a binding demo project in Visual Studio 2019 which toggles a paragraph with changed text and styles on the clicking of a button. A counter gets incremented as well.
-
18Event callback in ASP.NET Core 3.1 BlazorVideo lesson
This video describes the Event Callback concept. The students will be able to make communication among components possible with Event Callback.
-
19Two Way Data Binding in ASP.NET Core 3.1 BlazorVideo lesson
This lecture describes a two-way data binding in Blazor. It walks through a user input form that collects data in input controls and as the user types into the input boxes, the data is immediately written to the browser. The students will become adept in the usage of the bind attribute in Blazor after going through this lecture.
-
20Inheritance in ASP.NET Core 3.1 BlazorVideo lesson
This shows how a razor(blazor) component can inherit a base class which is derived from the ComponentBase class for certain advantages. The tutorial further shows how the base class properties and methods are used in the derived component.
-
21Lifecycle methods in ASP.NET Core 3.1 Blazor - Part 1 (Fundamentals)Video lesson
This lecture provides an insight into the fundamentals of the lifecycle methods in Blazor. It answers questions like what lifecycle methods mean and how they are called via the components?
-
22Lifecycle methods (Code Example) - SetParametersAsyncVideo lesson
This lecture discusses the SetParametersAsync method which is the first method called in a component’s lifecycle.
In this lecture, the students will see the SetParametersAsync method in action. To keep things simple, we only log the parameters received to the browser console.
-
23Lifecycle methods (Code Example) - OnInitialized & OnInitializedAsyncVideo lesson
This lecture discusses the OnInitialized and OnInitializedAsync methods in a component’s lifecycle.
In this lecture, the students will see these two methods in action. To keep things simple, we only log the parameters received to the browser console.
-
24Lifecycle methods (Code Example) - OnParametersSet & OnParametersSetAsyncVideo lesson
This lecture shows a demo code for illustrating these two Blazor lifecycle methods: OnParametersSet and OnParametersSetAsync
-
25Lifecycle methods (Code Example) - OnAfterRender & OnAfterRenderAsyncVideo lesson
This lecture shows a demo code for illustrating these two Blazor lifecycle methods: OnAfterRender and OnAfterRenderAsync
-
26Lifecycle methods (Code Example) - ShouldRenderVideo lesson
-
28Create a Blazor (Server) App with Individual User Accounts AuthenticationVideo lesson
This is a lecture that describes the creation of a Blazor(Server) application. The students will be able to create a Blazor Application in Visual Studio 2019
-
29Run the Blazor AppVideo lesson
This lecture shows the Blazor App as running on the browser. The students will be able to run the app and understand the various elements of the app created by default.
-
30Understand the Project StructureVideo lesson
This lecture details the default project and folder structure. The students will be able to understand the function of each of the folders and the files within the folders.
-
31The Program Class and Host ObjectVideo lesson
This lecture explains the hosting process of a Blazor application where the Program class Main method is the entry point to the application. The students will learn that the Blazor Server app's entry point is defined in the Program.cs file, as you would see in a Console app. When the app executes, it creates and runs a web host instance using defaults specific to web apps. The web host manages the Blazor Server app's lifecycle and sets up host-level services. Examples of such services are configuration, logging, dependency injection, and the HTTP server.
-
32Startup ClassVideo lesson
This lecture details the functions and features of the Startup class in a Server-Side Blazor application. It goes on to discuss the similarities and differences between the Configure and ConfigureServices method of any other type of ASP.NET Core 3.1 application and the Blazor application. The various middleware added to the request processing pipeline in Blazor are also discussed.
-
33Function of _Imports.razor ClassVideo lesson
This video details the uses of the _Imports.razor file in the project. The students will know where/how to introduce this file in the Blazor Server application.
-
34The Shared FolderVideo lesson
This video lecture provides a discussion on the Shared folder in the ASP.NET Core 3.1 Blazor application. The students will know the functions of the three shared razor components (Main Layout, Navmenu, Login Display) and how they work together to render important functionalities in the app.
-
35Create a Database and Add Tables To Store Users and RolesVideo lesson
This tutorial shows how to create a database for the Blazor app and add User and Roles tables to the database.
-
36Add Users and RolesVideo lesson
This video shows how to seed the tables with Users and Roles by running a method from the Startup class of the Blazor app.
-
37Implement Basic AuthorizationVideo lesson
In this video, the students are shown how to implement a basic authorization in the Blazor app.
-
38Frequently Used Page Directives for a Razor PageVideo lesson
-
39Create a Movie ClassVideo lesson
A Movie Class is added to the newly created Models Folder in this video. This will act as the model for the EF Core for generating the corresponding table in the database.
-
40Add the Movie Entity in the ApplicationDbContextVideo lesson
In this tutorial, the students are shown how to add the movie entity in the ApplicationDbContext class which was generated with the selection of authentication (Individual User Account)
-
41Add Migration to Create Movies TableVideo lesson
This lecture shows the addition of migration (to EF Core) to create the movies table. Students will learn the essential Package Manager console commands to do this.
-
42Create an Interface for Data Access ServiceVideo lesson
This video shows the creation of an interface for a data access service that implements this interface. The students will know the members of the interface which is a template for the data access service. The interface is needed for providing a loose coupling between the services and the client consuming it.
-
43Create a Data Access Service and Methods to Retrieve RecordsVideo lesson
This lecture teaches how to create the Data Access Service class that implements an interface. They will be able to create data access service to the movies model as well as retrieve a list of movies and any specific movie from the database asynchronously.
-
44Create Methods for Add, Edit and Delete OperationsVideo lesson
In this lecture, the remaining CRUD operations of Add, Edit, and Delete are performed through coding for the corresponding async methods. The students will have a complete understanding of the implementation of the DataAccessService in the app.
-
45Register the Data Access Services Class in StartupVideo lesson
Here we register the data access service in the Startup class ConfigureServices method. Once it is registered, the service can be called and used in the application.
-
46Seed the Movies DatabaseVideo lesson
After attending this lecture, the students will learn the process of seeding the database with some initial records for testing.
-
47Create a Details Page to Show List of MoviesVideo lesson
This video lecture shows how to create a details page for movies with a navigation menu. Students will learn the process of creating the page to list the movies from the database.
-
48Add Bootstrap to the ProjectVideo lesson
To use bootstrap modal dialog, we have to add jQuery and Bootstrap libraries using “Add Client-side Library”. This lecture will teach how to do this.
-
49Create a Modal Popup Dialog to Add a MovieVideo lesson
This tutorial teaches how to make a modal popup dialog as a means for user input data for adding a movie.
-
50Edit the Movies TableVideo lesson
The movies table is edited to make all fields non-nullable. The students will learn how to redesign a table and update the database with the changes.
-
51User Data ValidationVideo lesson
This lecture shows the process of user data validation using data annotations. Students will learn the process of validating form fields.
-
52Save Data to the DatabaseVideo lesson
This lecture shows the code to add new record data to the movie database. Later on the learners are shown the database record by actually looking at the table data.
-
53JavaScript Interop Calls to Close ModalVideo lesson
This lecture shows how to close the modal dialog after saving to the database on clicking the submit button. The students will learn the necessary changes needed to achieve this.
-
54Communication Between Movie Detail and MoviesVideo lesson
This lecture explains how communication between the child and its parent component takes place. So practically speaking when the modal dialog is closed on saving a record, the added record is visible without refreshing the browser.
-
55Edit MoviesVideo lesson
Through this lecture, the Editing of Movies has been accomplished using the same Modal Dialog used for adding a new movie. The students will learn how to achieve the task of editing a record through a user input modal popup.
-
56Render Fragment Usage to Change Modal Title DynamicallyVideo lesson
This lecture shows a way to change the visual appearance (Modal Title) of the same modal dialog for two different operations: Add and Edit movies. at runtime, dynamically.
-
57Create a Confirm Delete DialogVideo lesson
This lecture shows how to create a confirm delete dialog for getting the confirmation from users before deleting a movie.
-
58Complete the Delete OperationVideo lesson
This lecture teaches the process of completion of deleting a record after confirming the willingness of users.
-
59Authentication in Action for the Movie AppVideo lesson
This lecture shows the usage of Individual User Accounts in the completed movies app from the previous section. The students will see how only logged-in(authenticated) users can view the movies.
-
60View User Profile Data with AuthorizationVideo lesson
This lecture shows all the steps in code required for implementing authorization to view user profile data.
-
61Run and Test the App For User Data ProtectionVideo lesson
This lecture shows the application in the running state and tests with a few movies with different user credentials to demonstrate the user profile data with data protection.
-
62Installing the Blazor Movie App with Database from GitHub on User MachinesVideo lesson
This lecture walks through the process of simulating the Blazor CRUD application with the database after cloning it from the GitHub repository. The repository link is: https://github.com/krchome/blazormovieapp
-
63Adding Spinkit to the AppVideo lesson
This lecture teaches the steps to configure BlazorPro.Spinkit, a nuget package that allows animated loading indicators while the data is being asynchronously fetched from the database.
-
64Using Spinkit with Spinloader componentVideo lesson
This lecture is devoted to using the Spinkit installed earlier to present nice loading indicators with CSS Styling.
-
65Testing a Few Spinner ComponentsVideo lesson
In this lecture, we experiment with a couple of Spinner Components (Chase and Grid) to appreciate the contribution of the package. Also, the app is run without a delay and analysis is done for the visual results (with and without a delay)
-
66Create a Blazor Component to Add Numbers and Display on the BrowserText lesson
-
70Source Code LinksText lesson
-
71Clone the Customer Web API RepositoryVideo lesson
The learners will know how to clone a GitHub public repository locally on their machine/s
-
72Create the Blazor Server ApplicationVideo lesson
Shows how a Blazor Server application is created in Visual Studio.
-
73Define the Customer Model in the Blazor Server AppVideo lesson
This lecture creates a Customer model in the Blazor application which is a replication of the Customer model in the Web APi (acting as back-end)
-
74Create a Customer Service Class to Consume the Customer Web ApiVideo lesson
The learners are shown how to create a Customer Service that consumes the Web API
-
75Create the Customer List Razor Component to Render the CustomersVideo lesson
This lecture walks through the coding process with suitable explanations for creating a Customer List razor component that will act as a view to show the list to the outside world.
-
76Create a Navigation Menu for Viewing the Customer ListVideo lesson
A navigation menu has been created which will ease the navigation process to the Customer list. In the process it will make it a good user experience.

External Links May Contain Affiliate Links read more