Course Catalog  > Microsoft  > Microsoft Programming
AC3430

Comprehensive Blazor Server Training

Blazor Server is a .NET web technology for building interactive web applications that provide the single-page application (SPA) experience while running on the server. This Blazor Server training course teaches attendees how to build UI applications using C# and Razor syntax, reducing the reliance on JavaScript UI libraries and frameworks.

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

Duration

4 days

Prerequisites

Experience in C# programming, HTML/CSS/JavaScript development, and ASP.NET Core

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 Server application to production using various deployment options
  • Consume server data to integrate with backend services
  • Implement authentication and authorization to secure your application
  • Unit test Blazor apps to ensure their correctness and maintainability
Course Outline
  • Introduction
    • What is new in .NET 5 (relative to .NET 3.1)
    • What is new in C# 9.0?
    • What is Blazor?
    • Blazor Hosting Models
    • What is Blazor Server vs. Blazor WebAssembly?
    • Server Model
      • Server Model vs. JavaScript
      • UI Server Execution and Web Sockets
      • Scalability and Deployment
    • WebAssembly Model
      • What is WebAssembly?
      • Browser Compatibility
      • WebAssembly Model vs. JavaScript
      • How does .NET Core / C# run in a web browser?
      • Scalability and Deployment
  • Blazor Server Application
    • Project Template
    • Create a New Application
    • Hosting Blazor Server
    • Configuration
    • Dependency Injection
    • Environments
    • Logging
    • Handling Errors
    • Debugging
  • 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
  • Blazorise
    • What is Blazorise?
    • Configuring Blazorise for Blazor Server
    • Configuring CSS for Blazorise
    • Blazorise Theming
    • Components
    • Forms
    • DataGrid
  • Using Server Data
    • Connect to SQL Server with EF Core
    • Utilize EF Core in a Blazor Server application
  • Security and Identity
    • Compare/Contrast Authentication between Blazor Server and ASP.NET Core
    • Compare/Contrast Authorization between Blazor Server and ASP.NET Core
    • Implement a Login Form in Blazor Server
    • Integration with ASP.NET Core’s HttpContext.User
    • Handle Authorization in Blazor Server
    • Threat mitigation
  • 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 Server 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
  • Blazor WebAssembly Demo
    • Create a Blazor WebAssembly Project
    • Compare/Contrast Blazor WebAssembly to Blazor Server
    • Explore the WebAssembly and ASP.NET Core Server Architecture
    • Demonstrate how to use a Component from the Blazor Server project with the Blazor WebAssembly project
  • Conclusion