Build Web Apps with Blazor WebAssembly and ASP.NET Core Web API

Duration

5 days

Description

Gain mastery over the ASP.NET Core Blazor platform with our comprehensive course. You'll start by understanding the core principles and architecture of Blazor, allowing you to create composable UIs effortlessly using Razor Components. Harness the power of Razor Syntax for seamless data binding and event handling in your applications.

Learn to configure page routing in Blazor, making navigation a breeze, and gain the skills needed to deploy your Blazor WebAssembly application confidently into production environments. Dive into consuming server data through REST APIs and SignalR (WebSockets), ensuring real-time communication in your apps.

Discover the art of integrating client-side JavaScript seamlessly with Blazor, opening up endless possibilities for functionality enhancement. And don't forget the importance of testing; you'll become proficient in unit testing both client-side Blazor WebAssembly code and server-side Web APIs code, ensuring the reliability and quality of your applications. Join us in this course and unlock the full potential of Blazor development.

Objectives

Understand the ASP.NET Core Blazor platform
Build Compsabled UIs with Razor Components
Utilize Razor Syntax to Perform Data Binding and Event Handling
Configure Page Routing with Blazor
Deploy a Blazor WebAssembly application to production
Consume Server Data via REST APIs and SignalR (WebSockets)
Integrate Client-Side JavaScript with Blazor
Unit test client-side Blazor WebAssembly code
Unit test server-side Web APIs code

Prerequisites

Students need HTML, CSS, JavaScript, and C# programming experience.

Training Materials

All students receive comprehensive courseware covering all topics in the course. Courseware is distributed via GitHub in the form of documentations and extensive code samples. Students practice the topics covered through challenging hands-on lab exercises.

Software Requirements

Students will need a free, personal GitHub account to access the courseware. Student will need permission to install Visual Studio 2022 on their computers. Also, students will need permission to install NuGet Packages. If students are unable to configure a local environment, a cloud-based environment can be provided.

Outline

Introduction
- What is Blazor?
- Blazor Hosting Models
- Blazor Server vs. Blazor WebAssembly
- What is WebAssembly?
- Browser Compatibility
- WebAssembly 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 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
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
  - Build a REST API with ASP.NET Core MVC
  - Using Dapper to access SQL Server Data
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
- ASP.NET Core Web API
  - What Should be Tested on a Web API?
  - Testing Controllers
  - Testing APIs
  - Integration Testing of APIs
Conclusion