Course Overview

Blazor for .NET Core web technology is for hosting server-side or client-side applications. In this course, the client-side version of Blazor, known as Blazor
Server, will be covered. Explore creating rich client-side applications with strongly typed, cross-platform C# code. Reduce your dependence on complicated, hard-to-use JavaScript UI libraries and frameworks and utilize JavaScript only when needed, not as the primary language of your client-side application.

Blazor Server will launch you into the next generation of web development leveraging the same component-based patterns popularized by libraries such as Angular and React, except through the power of C#! In addition to programming with Razor Components the course includes content on accessing a database, designing services, utilizing JavaScript in limited situations, and unit testing.

Key Learning Areas

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

Course Outline


  • 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
  • Environments
  • 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 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 the Query String
  • Applying Authorization to a Razor 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

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
  • Organizing JavaScript Code within a Blazor WebAssembly App
  • Explore JavaScript Ecosystem
    • Client-Side Libraries
    • NPM and Yarn
    • Webpack
    • Useful Libraries

Unit Testing

  • What is unit testing?
  • Principles of Unit Testing
    • Defining a Unit
    • Setup/Teardown
    • Testing in Isolation
    • Determining What to Test
    • Code Coverage
    • Test Frameworks
    • Stubs, Mocks and Spies
  • xUnit
    • What is xUnit?
    • Testing Framework
    • Facts vs. Theory
    • Assertions
    • Integration with Visual Studio
  • Razor Components
    • What Should be Tested on Razor Component?
    • What is bUnit?
    • Using bUnit and xUnit
    • Setup and define components under tests in C# or Razor syntax
    • Verify outcome using semantic HTML comparer
    • Interact with and inspect components
    • Trigger event handlers
    • Provide cascading values
    • Inject services
    • Mock IJsRuntime
    • Perform snapshot testing


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