Course Overview

Blazor is a hot new .NET Core web technology for hosting server-side or client-side applications. In this course, the client-side version of Blazor, known as Blazor WebAssembly, will be covered. Explore how to create rich client-side applications with strongly typed C# which is cross-platform and runs on the client. Reduce your dependence on complicated, hard to use JavaScript UI libraries and frameworks and utilize JavaScript only when needed, not at the basis of your client-side application.

Blazor WebAssembly will launch you into the next generation of we development through the power of web assembly which will quite possibly make JavaScript obsolete. Build UI apps using the same component-based patterns popularized by libraries such as Angular and React, but with C#! Also, this course will feature server-side coding using ASP.NET Core Web APIs and SignalR to provide data for the Blazor WebAssembly Application.

Key Learning Areas

  • Understand the Blazor Platform
  • Build UIs with Razor Components
  • Utilize Data Binding and Event Handling
  • Compose Razor Components
  • Build Blazor Pages and Configure Routing
  • Deploy a Blazor WebAssembly Application to Production
  • Consume Server Data via REST APIs and SignalR (WebSockets)
  • Unit Test Blazor Apps
  • Unit Test Server-Side Code

Course Outline

Introduction

  • What is Blazor?
  • Blazor Hosting Models
  • What is Blazor Server vs. Blazor WebAssembly?
  • What is WebAssembly?
  • Browser Compatibility
  • Web Assembly vs. JavaScript
  • How does .NET Core / C# run in a web browser?

Blazor WebAssembly Application

  • Project Template
  • Create a New Application
  • Hosting Blazor WebAssembly with a ASP.NET Core MVC Server
  • Configuration
  • Dependency Injection
  • Logging
  • Handling Errors
  • Debugging WebAssembly

Razor Components and Data Binding

  • What is a Component?
  • Creating a Data Model
  • Binding the Data Model to the HTML
  • Passing Arbitrary Attributes
  • Handling Events
  • Manually Trigger State Updates and Re-rendering

Composing Razor Components

  • Decompose a Component into Smaller Components
  • One-Way Data Binding
  • Two-Way Data Binding
  • Pass Data from a Parent Component to a Child Component using Parameters
  • Pass Data from a Child Component to a Parent Component using Event Callbacks
  • Use Keys to Optimize Performance
  • Use Refs to Access DOM Elements
  • Razor Component Libraries
  • Razor Component Design Patterns
    • Parameters are Immutable
    • Lift State Up
    • Managing State in General

Razor Component Forms

  • What is the purpose of Form?
  • Collecting Data using a Form, Input, Select and Textarea Elements
  • Explore Form Element Two-Data Binding
  • Build Forms with the Blazor Edit Form Razor Component
  • Explore the Concept of the Edit Context
  • Use the Specialized Edit Form Controls
    • Input Text
    • Input TextArea
    • Input Select
    • Input Number
    • Input Checkbox
    • Input Date
  • Applying Validation to the Form
  • Decorating the View Model with Validation Attributes
  • Code Custom Validation Attributes

Razor Component Pages

  • What is the Page model?
  • Differences between Razor Pages and Razor Components
  • Using a Razor Component as a Page
  • Explore the Router Component
  • Configuring Page Routing
  • Route to Components from Multiple Assemblies
  • Using Route Parameters
  • Using Query String
  • Applying Authorization to a Razor Component Page
  • Using Authorization within the Component Tree

Using Server Data

  • NET Core MVC Web API
  • What is ASP.NET Core MVC?
  • What is a REST API?
  • What is an API Controller?
  • Injecting the Http Client
  • Exploring the Http Client
  • Calling a REST API from a Blazor Component using the HttpClient
  • SignalR
    • What is SignalR?
    • What are Web Sockets?
    • Understand Two-Way Data Flow with SignalR
    • Use SignalR to communicate between Razor Components and ASP.NET Core server
  • Accessing Data
    • Comparison of Data Access Libraries
    • Installing Entity Framework
    • Retrieving Data with Entity Framework
    • Modifying Data with Entity Framework
  • Authentication and Authorization
    • Apply Authentication and Authorization on the Client and Server
    • Perform Forms-Based Authentication with Blazor WebAssembly and the REST API
    • Applying Authorization within Blazor WebAssembly
    • Using CORS and JSON Web Tokens with a Blazor WebAssembly Application

Interacting with JavaScript

  • What is the JavaScript Interop?
  • When is JavaScript needed?
  • Synchronous vs. Asynchronous Calls
  • How to call a JavaScript function from a Component
  • How to call C# code from JavaScript
  • Calling Static Methods
  • Calling Instance Methods

Prerequisites

  • C# programming experience
  • HTML, CSS, and JavaScript development experience