Build a Real-World Blazor WASM Application from Scratch

About Build a Real-World Blazor WASM Application from Scratch

Start Your Next Developer Journey with the Blazor Framework in .NET 8.0

This course will guide you in building a real-world CRUD Blazor WebAssembly application with an ASP.NET Core Web API as the middle tier and an SQL Server database as the backend. You'll learn to implement practical features, covering UI development, API integration, and backend setup.

Course Contents

1. UI Development

Create a user-friendly interface that allows you to:

Add new products

Edit existing products

Delete products

Implement advanced UI features, including:

QuickGrid for data display

Pagination and items-per-page selector

Column-based sorting

Custom filtering option(s)

Row highlighting (actions column only) and row stripe effect for better readability

Confirmation popups (using JavaScript integration with IJSRuntime)

Clear form functionality

Form validation with a validation summary

Inject API services into Blazor components

2.  API Development

Configure the API with:

appsettings.json for setting the API base URL and ConnectionString

Service injection in the API’s Program.cs (e.g., SqlConnection, repository services)

CORS policy setup for cross-origin requests

Create repository services using Dapper ORM

Define API endpoints in the controller to

Get all products

Retrieve a specific product

Edit a product

Delete a product

Connect the Blazor WebAssembly UI with API endpoints

3. Backend Development

Database setup and management, including:

Creating tables

Inserting sample data

By the end of this course, you’ll have a deep understanding of how to build a real-world CRUD application using the Blazor Framework with the latest .NET 8.0. This hands-on experience will empower you to create efficient, interactive web applications from scratch.