• Post category:StudyBullet-14
  • Reading time:10 mins read


Learn while you build rich interactive web applications programming in ASP.NET 6.0 Blazor

What you will learn

Install and Configure the Blazor Framework to make your workbench ready for coding in Visual Studio 2019

Learn the basic concepts of Microsoft’s Blazor Framework for Web Applications Development

Learn the latest features incorporated in Blazor with ASPNet Core 3.1 for more flexibilty

Learn more advanced concepts that builds on your knowledge of basic concepts: Routing, 2 way data-binding, Inheritance, Event Callback, Lifecycle methods

Build Simple Razor Component based on knowledge acquired already

Build an Advanced CRUD application for a movie database that has authentication, authorisation to view logged-in user data alonwith modal dialogs and JSInterop

Learn Asynchronous Programming that’s is an important part of Blazor applications.

Description

Title Change:

The course title has been changed to reflect the current version of Blazor with ASP.NET 6.0. This is justified by the addition of a section on migration to  ASP.NET 6.0 that runs through the process of migration in two easy steps without any change in the existing ASP.NET Core 3.1 code base.

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.


Get Instant Notification of New Courses on our Telegram channel.


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?

  1. Blazor is an open-source web framework offering from Microsoft
  2. It uses just C# and razor(HTML/CSS) markup to create rich interactive user interfaces
  3. Blazor does not require JavaScript for its development
  4. 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 hosting models and more detailed overview of the Blazor FW
  • Section 3: Blazor has a component-based ecosystem, hence this section dives straight into building the first component
  • Section 4: 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 5: This section deals in advanced concepts with hands-on coding such as: Routing, Data Binding, Event Callback, Inheritance and Lifecycle methods
  • Section 6: It is a short section dedicated to learning asynchronous programming fundamentals, the cornerstone for Blazor
  • Section 7: This section is completely dedicated to building the CRUD movie application
  • Section 8: Introduces authorization to the movie app to allow users to view only their user profile data(not all data)
  • Section 9: 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.)

Recent Reviews: “One of the best Blazor course”  by Mohammed Cisse

English
language

Content

Introduction

Introduction and Features
Blazor Installation and Configuration
Live Demo Of Completed Blazor App

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 & OnInitializedAsync
Lifecycle methods (Code Example) – OnParametersSet & OnParametersSetAsync
Lifecycle methods (Code Example) – OnAfterRender & 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 in 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
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 Close 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

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