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 Razor 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
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-rending
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
- 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
Prerequisites
- C# programming experience
- HTML, CSS, and JavaScript development experience