Course Catalog  > Web and Mobile Development
WA3064

Progressive Web Application Development using .NET Web API, Entity Framework Core, and Blazor Training

This intensive course, including theoretical learning and actionable labs, enables students to apply Blazor to their workplace. Key focus areas include creating modern Progressive Web Applications with Blazor, understanding the principles of Blazor components, and enabling PWA functionality in existing and new Blazor applications.

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

Duration

4 days

Prerequisites

Attendees should be familiar with .NET and C#. Basic knowledge of JavaScript is useful but not necessary.

Skills Gained

  • Install and use the Entity Framework package to work with databases on the server-side
  • Create REST APIs using .NET Web API
  • Install packages required to develop the client-side Blazor applications
  • Use components, service & dependency injection, layout, and routing
  • Enable the Progressive Web Apps features in an application by creating service workers
  • Use the Progressive Web Apps features, such as push notifications and storage with IndexedDB
Course Outline
  • Introduction to Blazor, Entity Framework Core, and Progressive Web Apps
    • What is Microsoft Blazor?
    • What is Entity Framework Core?
    • What are Progressive Web Apps?
    • PWA Technologies
    • Technologies used in Blazor Apps
    • C# in a Blazor App
    • EF Core and LINQ
    • Blazor vs. Angular or React
    • Summary
  • Getting Started with Blazor
    • Installing Blazor
    • Creating a Blazor Application
    • What is WebAssembly?
    • Blazor Web Assembly Standalone
    • Blazor Web App – Render Modes
    • Render Modes – Cheat Sheet
    • None Render Mode
    • WebAssembly Render Mode
    • Server Render Mode
    • Auto Render Mode
    • Blazor Fundamentals – Program.cs
    • Blazor Fundamentals – wwwroot Folder
    • Blazor Fundamentals – Index.html
    • Blazor Fundamentals – Blazor.WebAssembly.js
    • Blazor Fundamentals – App.razor
    • Blazor Fundamentals – MainLayout.razor
    • Razor Pages
    • Razor Components
    • Razor Syntax
    • Summary
  • Working with Blazor Components
    • What are Components?
    • What is a routable component?
    • Working with Components in Blazor
    • Using C# in Components
    • Code block within the .razor file
    • Using a code-behind file
    • Parameterize Components
    • Passing Parameters to Child Components
    • Getting Parameters from Route Data
    • Understanding Component Life Cycle
    • Binding – One-way Data Binding
    • Binding – Two-way Data Binding
    • Two-way Binding with Components
    • Binding – Event Binding
    • Summary
  • Advanced Blazor Component Concepts
    • HTML Encoding
    • Render Raw HTML
    • The Problem with Parameters
    • Cascading Parameters
    • Cascading by Type
    • Flow of Content in Component Hierarchy
    • Render Child Content
    • Using RenderFragment
    • Multiple RenderFragments
    • Blazor's RenderTree
    • Using RenderTreeBuilder
    • Why You Should Hard-code Sequence Numbers
    • Rendering Performance and Loops
    • Using @key for more Efficient Updates
    • Passing Arbitrary Attributes
    • Summary
  • Layout and Routing
    • Layout in Razor Applications
    • Creating a Master Layout
    • Specifying the Default Layout
    • Using a Different Layout for some Pages
    • Nested Layouts
    • How Routing Works
    • Implementing Routing
    • Matching a Route
    • When no Route is Matched
    • Defining Routes
    • Route Parameters
    • Constraining Route Parameters
    • Catch-all Route Parameters
    • Navigating via HTML
    • Navigating via Code
    • Detecting Navigation Events
    • Summary
  • Forms and Validation
    • EditForm Component
    • Validation Requirements - Summary
    • The Form Model
    • Sample Model
    • Sample Razor
    • Form Components
    • Using a Forms Component
    • Form Submission
    • Forms Validation
    • Updating the Model for Validation
    • Highlighting Invalid Fields
    • Displaying validation Error Message Summary
    • Displaying Validation Error Message For Each Field
    • Handling Validity in Form Submission
    • OnValidSubmit and OnInvalidSubmit Events
    • OnSubmit Event
    • Summary
  • Dependency Injection & JSInterop
    • Service and Dependency Injection
    • Creating a Service and using Dependency Injection
    • Creating a Service
    • Register the Injectable Service
    • Inject the Service and Use it
    • A CRUD-based Service Sample
    • Dependency Scopes
    • Transient Dependencies
    • Singleton Dependencies
    • Scoped Dependencies
    • Scoped Dependencies in Blazor Server App
    • Scoped Dependencies in Blazor WebAssembly
    • JavaScript Interop
    • Calling a JavaScript Function from C#
    • Calling a C# Function from JavaScript
    • Summary
  • Debugging and Deploying a Blazor Application
    • Debugging a Blazor Application
    • Debugging Features
    • Debugging Limitations
    • Ensure Debugging is Enabled
    • Debugging using Visual Studio
    • Debugging using Chrome/Microsoft Edge
    • Debugging using Chrome/Microsoft Edge (contd.)
    • Blazor Hosting Models
    • Blazor WebAssembly
    • Blazor WebAssembly - Pros
    • Blazor WebAssembly - Cons
    • Blazor Server
    • Blazor Server - Pros
    • Blazor Server - Cons
    • Deploying Blazor Applications
    • Publish Locations
    • Deployment on IIS
    • Summary
  • Getting Started with Entity Framework Core
    • Entity Framework Core Overview
    • Installing Entity Framework Core
    • Installing ODP for Oracle
    • The Entity Framework Model
    • The Database Context Object
    • Change Tracking
    • Installing Entity Framework Core
    • Modelling using Database First
    • Database First Options
    • Navigation Properties
    • Modelling using Code First
    • Mapping Tables and Fields
    • Defining Keys
    • Marking Navigation Properties
    • Using the Fluent API
    • Mapping Tables and Fields
    • Defining Keys
    • Custom Configuration Classes
    • Executing Stored Procedures
    • Disposing of the Context
    • Summary
  • Querying and Saving Data with Entity Framework Core
    • What is LINQ?
    • Basic Queries with LINQ
    • Filtering
    • Sorting
    • LINQ Function Syntax
    • Filtering using Function Syntax
    • Sorting using Function Syntax
    • Working with Query Results
    • Deferred Execution
    • Progressively Building a Query
    • Forcing Query Resolution
    • Retrieving Single Items From a Query
    • Calling Stored Procedures
    • Using Include and Then Include
    • Controlling the Tracking Behavior
    • Saving Changes
    • Performing Bulk Insert
    • Implementing Transactions
    • Summary
  • Understanding RESTful Services
    • Understanding Services
    • Benefits of Creating Services
    • Many Flavors of Services
    • Understanding REST
    • Anatomy of a URL
    • Manipulation of Resources through Representations
    • Principles of RESTful Services
    • HTTP Methods
    • HTTP Status Codes
    • GET
    • The GET Method
    • Passing Parameters
    • POST
    • POST Request Example
    • POST Response Example
    • PUT
    • PUT Example – Update
    • PUT Example - Create
    • PATCH
    • PATCH – Example
    • A RESTful API Example—Tracking Video Games
    • API – Best Practices
    • Summary
  • Getting Started with Web API
    • What is Web API
    • Web API-Involved Application Architecture (REST API)
    • Getting Started with Web API
    • Web API Controller
    • Creating a Controller
    • Adding the GET Method and Testing It
    • Return Type
    • Returning Status Code and Data
    • Revisiting the GET Method in the Hello Controller
    • Beware of CORS
    • Handling the CORS Issue
    • Web API Controller – Example
    • ProductsModel.cs – Model
    • ProductsController.cs - Controller
    • ProductsController – Get All Products
    • ProductsController – Get Product By Id
    • ProductsController – Create Product
    • Understanding FromBody
    • ProductsController – Delete Product By Id
    • ProductsController – Update Products
    • ProductsController – Product Partial Update
    • Reading Query String Data
    • Implementing API Versioning
    • Enabling the Support for XML
    • Summary
  • Testing and Documenting REST APIs
    • Introduction to RESTful Testing
    • API Testing Tools
    • Postman – Posting Data
    • Postman – Response
    • API Testing with cURL
    • Using cURL - Basics
    • Curl – POST
    • Performing PUT & DELETE Operations
    • Swagger / OpenAPI Specification
    • Swagger/OpenAPI and Web API
    • Swagger/OpenAPI Service
    • Accessing the Swagger/OpenAPI Documentation
    • Testing the GET Method using Swagger/OpenAPI
    • Testing the POST Method using Swagger/OpenAPI
    • Summary
  • Calling REST APIs from Blazor
    • The Blazor Frontend and Web API Architecture
    • Web API Controller – Recap
    • ProductModel.cs – Model
    • Calling Web APIs using HttpClient
    • HttpClient – Example
    • The Issue with HttpClient
    • ProductService.cs – Service
    • ProductService.cs – GetAll
    • ProductService.cs – Add Item
    • ProductService.cs – Delete Item
    • ProductService.cs – Update Item
    • Program.cs - Register the Service
    • Calling Service Methods from a Blazor Component
    • Optimizing the Code
    • Summary
  • Unit Testing and Error Handling in Blazor
    • SECTION
    • Log Messages in a Blazor WebAssembly Application
    • Log Messages with NLog
    • NLog in a Web API
    • The NLog Package
    • Configure NLog
    • Add NLog as the logger in the Startup.cs file
    • Log Messages using ILogger
    • NLog Sample Output
    • SECTION
    • Unit Testing and NUnit
    • The Overall Process
    • Unit Test Project
    • Test Classes and Methods
    • Test Class and Unit Test Example
    • NUnit Assertions
    • Text Explorer
    • Test Explorer Output
    • Test Order
    • Setup and Teardown in NUnit
    • OneTimeSetup and OneTimeTearDown in NUnit
    • Test Generator NUnit Extenion
    • SECTION
    • Error Boundaries in Blazor
    • Implementing a Global Error Boundary
    • Modifying the Error Content
    • Summary
  • Progressive Web Apps Overview
    • Progressive Web Apps (PWA) Overview
    • PWA Apps Features
    • Comparing PWA to Other Apps
    • Business Benefits of PWA Applications
    • Characteristics of PWA Applications
    • Capable
    • Reliable
    • Installable
    • What is a Service Worker
    • Push Notifications
    • PWA App Shortcuts
    • Basic PWA Features in a Blazor Application
    • Enable the PWA Features in an Existing Application
    • Sample manifest.json
    • Implementing Push Notifications
    • Developer Tools Tips
    • Uninstall PWA Applications
    • Summary
  • Push Notifications and Storage
    • Data Storage
    • Web Storage API
    • Web Storage API Options
    • Web Storage Programming Interface
    • Web Storage Examples
    • Storing JavaScript Objects
    • IndexedDB
    • IndexedDB with JavaScript
    • IndexedDB with .NET Package
    • Important Classes
    • Registering IndexedDB Services and Injecting Dependencies
    • Important Methods
    • Summary
  • Best Practices for Blazor Application
    • Razor Best Practices
    • View Logic Separation
    • Sample View Logic
    • A Sample View
    • Razor Class Library
    • Creating a Blazor Class Library Project
    • Sample Model
    • A Sample Component
    • Add Razor Class Library Project Reference
    • Using the Custom Component
    • Optimize Rendering Speed
    • Avoid Unnecessary Rending of the Component Subtree
    • ShouldRender
    • Pagination
    • Component Virtualization
    • Virtualize Example
    • Virtualize and PlaceHolder
    • Virtualize and ItemSize
    • Virtualize and Overscan
    • Avoid Creating Granular Components
    • Reusable Components using RenderFragments
    • Summary
  • Working with Git
    • Working with Git on Azure DevOps Services
    • Creating a DevOps Project
    • Code Repositories
    • Creating a Local Repository
    • Pushing a Visual Studio Project to DevOps
    • What is Git?
    • Committing Changes in Git
    • Pushing Changes to Azure DevOps
    • What is a Branch?
    • Creating Branches
    • Undoing Changes
    • Creating Pull Requests
    • Summary


Lab Exercises

  • Lab 1. Getting Started with Blazor
  • Lab 2. Working with Blazor Components
  • Lab 3. Advanced Blazor Components
  • Lab 4. Layout and Routing
  • Lab 5. Creating a Form using EditForm
  • Lab 6. Implementing Form Validation
  • Lab 7. Implementing Service and Dependency Injection
  • Lab 8. Debugging a Blazor Application
  • Lab 9. Getting Started with Entity Framework Core
  • Lab 10. Querying and Saving Data with Entity Framework Core
  • Lab 11. Developing a REST API using .NET Web API
  • Lab 12. Testing REST API
  • Lab 13. Developing a Blazor API Frontend
  • Lab 14. Implementing Error Handling and Logging
  • Lab 15. Implementing Unit Tests
  • Lab 16. Getting Started with Progressive Web Apps (PWA)
  • Lab 17. Push Notifications
  • Lab 18. Adding the IndexedDB Support to an Application
  • Lab 19. (APPENDIX) Working with Git on Azure DevOps Services