Blazor Through the Ages - (Hands-On Interactive)

This lecture describes the process of migration of the main Blazor Movie App project to the current ASP.NET 6.0 as target framework. The lecture shows the working of the ASP.NET Core 3.1 version first before proceeding with the migration aspnet 6.0 and demonstrates how quickly it could be done without changing any of the code.

This sets the procedure for the students to migrate all other trivial projects throughout this course to aspnet 6.0 as well with minimal effort.

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?

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.

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.

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.

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.

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.

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.

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.

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.

This video describes the Event Callback concept. The students will be able to make communication among components possible with Event Callback.

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.

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.

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?

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.

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.

This lecture shows a demo code for illustrating these two Blazor lifecycle methods: OnParametersSet and OnParametersSetAsync

This lecture shows a demo code for illustrating these two Blazor lifecycle methods: OnAfterRender and OnAfterRenderAsync

In this lecture, students shall learn asynchronous programming concepts (which is essential for learning ASP.NET Core 3.1 Blazor)

Run an ASP.NET Core 3 Console Asynchronous Demo Application with Visual Studio 2019 with analysis of code

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

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.

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. 

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.

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.

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.

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.

This tutorial shows how to create a database for the Blazor app and add User and Roles tables to the database.

This video shows how to seed the tables with Users and Roles by running a method from the Startup class of the Blazor app.

In this video, the students are shown how to implement a basic authorization in the Blazor app.

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. 

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)

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.

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.

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.

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.

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.

After attending this lecture, the students will learn the process of seeding the database with some initial records for testing.

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.

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.

This tutorial teaches how to make a modal popup dialog as a means for user input data for adding a movie.

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.

This lecture shows the process of user data validation using data annotations. Students will learn the process of validating form fields.

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.

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.

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.

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.

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.

This lecture shows how to create a confirm delete dialog for getting the confirmation from users before deleting a movie.

This lecture teaches the process of completion of deleting a record after confirming the willingness of users.

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.

This lecture shows all the steps in code required for implementing authorization to view user profile data.

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.

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