ProTech Professional Technical Services, Inc.

Full Stack Web Programming with WebAssembly and ASP.NET Core Web API

Course Summary

Description

This Full Stack Web Programming with Blazor WebAssembly and ASP.NET Core Web API training teaches you how to build UI apps using the same component-based patterns popularized by libraries such as and React, but with C#. Attendees also learn server-side coding using ASP.NET Core Web APIs and SignalR to provide data for their Blazor WebAssembly applications. CourseOutline Objectives

After taking this course, students will be able to: • Understand the Blazor platform • Build UIs with components • Utilize data binding and event handling • Compose components • Build Blazor pages and configure routing • Deploy a Blazor WebAssembly application to production • Consume Server Data via REST APIs and SignalR (WebSockets) • Unit test Blazor apps • Unit test server-side code

Topics

• Introduction • Razor Component Pages • Blazor WebAssembly Application • Using Server Data • Razor Components and Data Binding • Interacting with JavaScript • Composing Razor Components • • Razor Component Forms

Audience

This course is designed for students withing to learn how to build UI apps using the same component-based patterns popularized by libraries such as Angular and React, but with C#.

Prerequisites

Before taking this course, students should have C# programming experience, and HTML, CSS, and JavaScript development experience.

Duration

Five days

Due to the nature of this material, this document refers to numerous hardware and software products by their trade names. References to other companies and their products are for informational purposes only, and all trademarks are the properties of their respective companies. It is not the intent of ProTech Professional Technical Services, Inc. to use any of these names generically

ProTech Professional Technical Services, Inc.

Full Stack Web Programming with Blazor WebAssembly and ASP.NET Core Web API

Course Outline

I. Introduction H. Razor Component Libraries A. What is Blazor? I. Razor Component Design Patterns B. Blazor Hosting Models 1. Parameters are Immutable C. Blazor Server vs. Blazor WebAssembly 2. Lift State Up D. What is WebAssembly? 3. Managing State in General E. Browser Compatibility F. WebAssembly vs. JavaScript V. Razor Component Forms CourseOutline G. How does .NET Core / C# run in a web A. What is the purpose of Form? browser? B. Collecting Data using a Form, Input, Select, and TextArea Elements II. Blazor WebAssembly Application C. Explore Form Element Two-Data Binding A. Project Template D. Build Forms with the Blazor Edit Form Razor B. Create a New Application Component C. Hosting Blazor WebAssembly with a E. Explore the Concept of the Edit Context ASP.NET Core MVC Server F. Use the Specialized Edit Form Controls D. Configuration 1. Input Text E. Dependency Injection 2. Input TextArea F. Environments 3. Input Select G. Logging 4. Input Number H. Handling Errors 5. Input Checkbox I. Debugging WebAssembly 6. Input Date G. Applying Validation to the Form III. Razor Components and Data Binding H. Decorating the View Model with Validation A. What is a Component? Attributes B. Creating a Data Model I. Code Custom Validation Attributes C. Binding the Data Model to the HTML D. Passing Arbitrary Attributes VI. Razor Component Pages E. Handling Events A. What is the Page model? F. Manually Trigger State Updates and Re- B. Differences between Razor Pages and rendering Razor Components C. Using a Razor Component as a Page IV. Composing Razor Components D. Explore the Router Component A. Decompose a Component into Smaller E. Configuring Page Routing Components F. Route to Components from Multiple B. One-Way Data Binding Assemblies C. Two-Way Data Binding G. Using Route Parameters D. Pass Data from a Parent Component to a H. Using the Query String Child Component using Parameters I. Applying Authorization to a Razor E. Pass Data from a Child Component to a Component Page Parent Component using Event Callbacks J. Using Authorization within the Component F. Use Keys to Optimize Performance Tree G. Use Refs to Access DOM Elements

Due to the nature of this material, this document refers to numerous hardware and software products by their trade names. References to other companies and their products are for informational purposes only, and all trademarks are the properties of their respective companies. It is not the intent of ProTech Professional Technical Services, Inc. to use any of these names generically

ProTech Professional Technical Services, Inc.

Full Stack Web Programming with Blazor WebAssembly and ASP.NET Core Web API

Course Outline (cont’d)

VII. Using Server Data IX. Unit Testing A. ASP.NET Core MVC Web API A. What is Unit Testing? 1. What is ASP.NET Core MVC? B. Principles of Unit Testing 2. What is a REST API? 1. Defining a Unit 3. What is an API Controller? 2. Setup/Teardown 4. Injecting the Http Client 3. Testing in Isolation 5. Exploring the Http Client 4. Determining What to Test 6. Calling a REST API from a Blazor 5. Code Coverage CourseOutline Component using the HttpClient 6. Test Frameworks 7. Build a REST API with ASP.NET Core 7. Stubs, Mocks and Spies MVC C. xUnit 8. Implementing Authentication and 1. What is xUnit? Authorization 2. Testing Framework B. SignalR 3. Facts vs. Theory 1. What is SignalR? 4. Assertions 2. What are Web Sockets? 5. Integration with Visual Studio 3. Understand Two-Way Data Flow with D. Razor Components SignalR 1. What Should be Tested on a Razor 4. Use SignalR to communicate between Component? Razor Components and ASP.NET Core 2. What is bUnit? server 3. Using bUnit with xUnit 4. Setup and define components under VIII. Interacting with JavaScript tests in C# or Razor syntax A. What is the JavaScript Interop? 5. Verify outcome using semantic HTML B. When is JavaScript needed? comparer C. Synchronous vs. Asynchronous Calls 6. Interact with and inspect components D. How to call a JavaScript function from a 7. Trigger event handlers Component 8. Provide cascading values E. How to call C# code from JavaScript 9. Inject services F. Calling Static Methods 10. Mock IJsRuntime G. Calling Instance Methods 11. Perform snapshot testing H. Organizing JavaScript Code within a Blazor E. ASP.NET Core Web API WebAssembly App 1. What Should be Tested on a Web API? I. Explore JavaScript Ecosystem 2. Testing Controllers J. Client-Side Libraries 3. Testing APIs K. NPM & Yarn 4. Integration Testing of APIs L. M. Useful Libraries

Due to the nature of this material, this document refers to numerous hardware and software products by their trade names. References to other companies and their products are for informational purposes only, and all trademarks are the properties of their respective companies. It is not the intent of ProTech Professional Technical Services, Inc. to use any of these names generically