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.
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
Upcoming Course Dates
