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#! This course will utilize an ASP.NET Core backend but will not cover how to create a backend. To learn full-stack development with Blazor checkout the 5-day full-stack version of this course.

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

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

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 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

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 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

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