Databases · DBC-30

Blazor WebAssembly with MongoDB

Blazor WebAssembly with MongoDB is a course in building web applications entirely in C#, with Blazor WebAssembly on .NET 10 for the interface and MongoDB 8 for data, covering document design, the MongoDB C# Driver, Razor components, forms, routing and connecting safely through a Web API. It suits C# and ASP.NET Core developers and IT teams building internal systems.

Updated
From 9,450 THB / person 10,500 −10% excl. VAT 7% · group rates available
PDFDownload the course outline
  • Duration18 hours · 3 days
  • FormatOnsite / live online
  • Next roundOn request
  • CertificateIncluded

Course overview

Blazor lets C# developers build interactive web pages using the same language on the front end and the back end, and Blazor WebAssembly runs .NET code directly in the browser. Paired with MongoDB, which stores flexible documents, it makes web applications quick to build and comfortable with data whose shape changes often. Blazor has changed a great deal since .NET 8, however, with the idea of render modes, and the MongoDB C# Driver has moved to version 3, so many older examples no longer work.

This course starts with MongoDB 8 and C#: document design, CRUD with the MongoDB C# Driver, LINQ, the aggregation pipeline, indexes and GridFS. It then builds Blazor WebAssembly on .NET 10, from the project structure, Razor components and data binding to passing data between components, forms with validation and routing. Learners then connect Blazor to MongoDB safely through an ASP.NET Core Web API, with authorisation and JavaScript interop. It closes with a workshop that builds and deploys a real web application. (3 days, 6 hours per day, 18 hours in total, Intermediate level.)

What you’ll gain

  • Understand NoSQL concepts and design MongoDB documents to suit how they are used
  • Use the MongoDB C# Driver for CRUD, LINQ and the aggregation pipeline
  • Create indexes, use GridFS and set up database users and permissions
  • Understand Blazor hosting models and render modes on .NET 10
  • Build Razor components with data binding and pass data between components
  • Build forms with EditForm and both standard and custom validation
  • Build a Web API backed by MongoDB and call it safely from Blazor WebAssembly
  • Use JavaScript interop and deploy the application for real use

Who this course is for

  • C# and ASP.NET Core developers who want to build web front ends with Blazor
  • Developers who want to use MongoDB with .NET systems
  • IT staff who build internal business systems
  • Developers who used an older Blazor or MongoDB and want to update to current practice

Prerequisites

  • C# programming, with a basic grasp of classes, LINQ and async/await
  • Some experience with ASP.NET Core MVC or Web API
  • Basic HTML and CSS
  • A laptop that can run the .NET 10 SDK, Docker Desktop and Visual Studio 2026 or VS Code, with permission to install software

Curriculum

Course Details

This course is the 2026 edition that replaces the previous Blazor WebAssembly with MongoDB course. It has been rewritten from scratch for .NET 10 (LTS), MongoDB 8 and the current MongoDB C# Driver. It runs for 3 days, 6 hours per day (18 hours in total, 09:00-16:00), as lectures with labs built on a single sample store application throughout. Intermediate level. It explains Blazor render modes on .NET 10, uses the official driver instead of the MongoDB.Entities add-on library, connects Blazor to MongoDB through an ASP.NET Core 10 Minimal API, and adds document design, authorisation, performance tuning and Docker. Every lab uses MongoDB on the learner's own machine. Learners take home a lab guide, source code for every lab and docker-compose files.

Day 1 MongoDB 8 with C#

Section 1: Lab: Introducing NoSQL and MongoDB 8

  • Why NoSQL, and which workloads suit MongoDB
  • Databases, collections, documents and the BSON format
  • Run MongoDB 8 with Docker and work with it in Compass and mongosh
  • Lab: create the sample store database and add the first data

Section 2: Designing Documents for How They Are Used

  • Embedding versus referencing, and when to choose each
  • Design around the application's read patterns
  • Schema validation to keep data quality under control
  • Lab: design the product, customer and order collections

Section 3: Lab: CRUD with the MongoDB C# Driver

  • Install MongoDB.Driver and register MongoClient as a singleton
  • Map C# classes to documents with attributes and conventions
  • Insert, Find, Update and Delete with builders and filters
  • Work with BsonDocument directly when the data shape is not fixed
  • Lab: a product data service covering every operation

Section 4: LINQ and the Aggregation Pipeline

  • Write queries with the current driver's LINQ provider
  • The aggregation pipeline: $match, $group, $project, $lookup and $unwind
  • Build type-safe pipelines in C#
  • Lab: a sales report by category and month

Section 5: Indexes, GridFS and Security

  • Create indexes and read explain output to check query speed
  • Use the database profiler to find slow queries
  • Store large files with GridFS
  • Multi-document transactions, and setting up users and roles
  • Lab: index a slow query and store product images with GridFS
Day 2 Blazor WebAssembly and Razor Components

Section 6: Blazor on .NET 10

  • What Blazor is and how WebAssembly runs in the browser
  • Render modes: static SSR, Interactive Server, WebAssembly and Auto
  • How a Blazor Web App differs from a standalone Blazor WebAssembly app
  • WebAssembly compared with JavaScript, and browser support
  • Choosing the right model for a system that uses MongoDB

Section 7: Lab: Creating a Blazor WebAssembly App

  • Create a project from the template and understand its structure
  • Client-side dependency injection and configuration
  • Environments, logging and error handling with ErrorBoundary
  • Debug C# code running in the browser
  • Lab: the store app's home page with a layout and menu

Section 8: Razor Components and Data Binding

  • What a component is, and the component lifecycle
  • Create a data model and bind it to HTML
  • Handle events and pass arbitrary attributes
  • Trigger a re-render with StateHasChanged when needed
  • Lab: a product list page with instant search

Section 9: Lab: Composing Components and Managing State

  • Split out child components, with one-way and two-way binding
  • Pass data down with parameters and back up with EventCallback
  • Use @key for performance and @ref to reach elements
  • Lifting state up, cascading values and a state container service
  • Razor class libraries for reusable components

Section 10: Lab: Forms with EditForm

  • EditForm, EditContext and the input components
  • InputText, InputNumber, InputSelect, InputDate and InputFile
  • Validation with data annotations on a view model
  • Write a custom validation attribute
  • Lab: add and edit product forms with image upload
Day 3 Connecting Blazor to MongoDB and Going Live

Section 11: Routing and Navigation

  • The Router component and defining @page
  • Route parameters and route constraints
  • Read query strings with SupplyParameterFromQuery
  • NavigationManager and NavLink
  • Lazy-loading assemblies to shrink the first download

Section 12: Lab: A Web API Backed by MongoDB

  • Why Blazor WebAssembly must never connect to the database directly
  • Build an ASP.NET Core 10 Minimal API that uses the MongoDB service
  • Call the API with HttpClient and GetFromJsonAsync
  • Display data with QuickGrid and server-side paging
  • Lab: connect the product and order pages to the API

Section 13: Authentication and Authorisation

  • Authentication concepts for apps that run in the browser
  • Protect the API with tokens or cookies and authorise by role
  • AuthorizeView and the Authorize attribute on component pages
  • Lab: restrict the product management pages to administrators

Section 14: JavaScript Interop and Performance

  • When JavaScript is needed, and calling it through IJSRuntime
  • Call JavaScript modules from C# and call C# back from JavaScript
  • Shrink the app with trimming, and an introduction to AOT compilation
  • Virtualisation for long lists of data
  • Lab: add a sales chart with a JavaScript library

Section 15: Workshop: A Complete Store Web App and Deployment

  • Design the collections and screens from the brief
  • Connect Blazor, the Web API and MongoDB for every feature
  • Run the whole system with Docker Compose
  • Use an AI assistant to help write code, review it, then present the result

Schedule & training options

For individuals — public rounds

No public rounds are open right now. Join the waiting list and we will contact you first when the next round opens, or ask us on LINE. Or call 02-570-8449 or 088-807-9770

For organisations — in-house / private

  • Tailor the content to your team’s tools and projects
  • Your dates, at your office or live online
  • Quotation with tax ID for procurement
Corporate training quote

Instructors

Frequently asked questions

How do Blazor Server and Blazor WebAssembly differ?

Since .NET 8 both are render modes of a Blazor Web App. Interactive Server runs code on the server and sends UI updates over a real-time connection, so it starts quickly but needs a constant connection. Interactive WebAssembly downloads the .NET runtime and runs in the browser, which moves work to the client and lightens the server load, but the first load takes longer. There is also Auto mode, which starts on the server and switches to WebAssembly once it has downloaded. If you want the whole app to run purely in the browser, you can build a standalone Blazor WebAssembly app.

How do you pass data between parent and child components in Blazor?

Pass data from parent to child with properties marked with the Parameter attribute, and send events or values from child to parent with EventCallback. For two-way binding, use @bind with a parameter that has a matching EventCallback whose name ends in Changed. For data many components share, use a cascading value or a state container service registered through dependency injection, and treat parameters as values the child does not change itself.

Why shouldn't Blazor WebAssembly connect to MongoDB directly, and what should you do instead?

Blazor WebAssembly code is downloaded and runs entirely in the browser, so any connection string you include is visible to every user and grants full access to the database, and browsers cannot open the kind of connection MongoDB uses anyway. The right approach is an ASP.NET Core Web API that uses the MongoDB C# Driver on the server, checks permissions and validates input, with Blazor calling it only through HttpClient.

Who is the Blazor WebAssembly with MongoDB course for, and what should I know beforehand?

It suits C# and ASP.NET Core developers who want to build web front ends with Blazor, developers who want to use MongoDB with .NET, and IT staff who build internal systems. You should be able to write C#, have a basic grasp of LINQ and async/await, have some experience with ASP.NET Core MVC or Web API, and know basic HTML and CSS.

What will I be able to do after the Blazor WebAssembly with MongoDB course?

You will be able to design documents and use MongoDB 8 from C# for CRUD, LINQ and aggregation, build Blazor WebAssembly apps on .NET 10 with Razor components, validated forms and routing, connect them safely to MongoDB through a Web API, apply user permissions and deploy with Docker. Participants who complete the training receive a Certificate of Completion with its own number, which can be verified online.

Can the Blazor WebAssembly with MongoDB course be run in-house for our team?

Yes. It can be run in-house for your team, with examples adapted to your work, such as a data structure similar to your real systems, or a focus on moving older Blazor apps to .NET 10. You can request a quotation from this page, or contact us on LINE @itgenius or by phone on 02-570-8449.