Course Catalog  > Microsoft  > Microsoft Programming
AC3429

Introduction to Blazor WebAssembly Training

Blazor WebAssembly is a .NET Core web technology that allows developers to build interactive web applications using C# and Razor syntax. In this Blazor course, you will learn how to build Blazor WebAssembly applications from scratch, including creating components, handling data binding and events, composing components, building Blazor pages, configuring routing, deploying applications to production, consuming server data via REST APIs, and unit testing Blazor apps.

Request Information
Request On-Site or Customized Course Info
Course Details

Duration

3 days

Prerequisites

C# programming, HTML, CSS, and JavaScript experience

Skills Gained

  • Understand the Blazor platform and its architecture
  • Build user interfaces with reusable Razor components
  • Utilize data binding and event handling to create dynamic and interactive UIs
  • Compose components to build complex and maintainable applications
  • Build Blazor pages and configure routing to navigate between different parts of your application
  • Deploy a Blazor WebAssembly application to production using various deployment options
  • Consume server data via REST APIs to integrate with backend services
  • Unit test Blazor apps to ensure their correctness and maintainability
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
    • 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 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 the Query String
    • Applying Authorization to a Razor Component Page
    • Using Authorization within the Component Tree
  • Using Server Data
    • ASP.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 & 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 a Razor Component?
      • What is bUnit?
      • Using bUnit with 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
  • Conclusion