Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Build a Real-World Blazor WASM Application from Scratch
Rating: 4.4 out of 5(2 ratings)
13 students

Build a Real-World Blazor WASM Application from Scratch

Practical Web Application Development with ASP.NET Core Web API Using Dapper ORM, CRUD, QuickGrid and Form Validation
Created byMuhtar Qong
Last updated 7/2025
English

What you'll learn

  • This is a real-world CRUD web application with Blazor WebAssembly based UI, ASP. NET Core Web API based middle-tier and SQL Server database based backend.
  • In UI part, you will learn how to create interactive UI with WASM: display data, add/edit/delete items, pagination, service injection, form validation and more.
  • In API part, you will learn how to create a service, DI or service registration, service lifecycle, CORS, creating controller and it's methods, API endpoints.
  • You also learn Blazor project structures (both UI and API), Dapper ORM, useful built-in Blazor UI components, page/component specific CSS in Blazor and more.,
  • Learn what Entity Framework (EF) is, its benefits in ASP.NET Core Web API, and what's new in EF 10 Preview.

Course content

2 sections • 7 lectures • 3h 5m total length

  • Introduction7:28

    Welcome to the course! In this introduction, we’ll provide an overview of the course content, outlining the key topics and skills you'll learn throughout the program.

  • Create a Database for the Application2:22

    In this lecture, we'll set up a 'Products' table in the database and insert test data. This will help us test the API endpoints and display the data in the UI as we build the application.

  • Create an ASP.NET Core Web API for the Application41:01

    In this lecture, we'll create an ASP.NET Core Web API project, set up the environment, and add essential functionalities. This includes configuring appsettings.json, setting up the DI container, implementing CORS policy for cross-origin requests, creating repository services with Dapper ORM, defining API endpoints in the controller, and more.

  • Create a Blazor WebAssembly UI for the Application8:08

    In this lecture, we'll create a Blazor WebAssembly Standalone app (UI project). We'll add environment-specific appsettings.json to the web root folder, configure the ApiBaseUrl, create an AppSettings object, and register it in

    the Program.cs file. We'll also install necessary NuGet package and prepare the UI project for adding essential functionalities.

  • Create a Product Page for the Application: Part-11:01:50

    In this lecture, we’ll create a Product page in the Blazor WebAssembly UI project (created in Lecture-4). We’ll add the necessary Blazor directives, inject services, and build a Razor page with HTML elements and C# code for handling UI events. We'll retrieve data using the API endpoints and display it in the built-in Blazor QuickGrid component. Additionally, we'll implement a custom filter, column-based sortings, action column with edit and delete functionality, pagination, and related CSS styling, among other features.

  • Create a Product Page for the Application: Part-242:21

    In this final lecture, we’ll continue from Lecture-5 and create an 'Enter New Product' form by calling the relevant API endpoints. We'll add a 'Clear' button, form control validation, and a validation summary. We’ll also implement an 'Items per Page' selector, integrating it with the Blazor Paginator component, as well as row highlighting and row stripe effects. Finally, we'll wrap up with a summary of the entire application.

Requirements

  • Basic HTML and CSS.
  • Intermediate C# skills, including an understanding of implementing interfaces, using dependency injection, and creating objects. But Don't worry too much; I'll explain the related topics in detail and at a slow pace.
  • Intermediate skills in SQL Server, able to create tables, insert data, and write select queries.

Description

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.

Who this course is for:

  • This course is for anyone interested in developing interactive web applications using Blazor WebAssembly, ASP. NET Core Web API, and SQL Server, all with the latest .NET 8.0.
  • Basic knowledge of C# and HTML is recommended, but no prior experience with ASP. NET Core or Blazor is needed.
  • In just a few hours, you’ll learn how to create a real-world CRUD application using the revolutionary Blazor framework. It’s an exciting opportunity! Enroll now to gain new skills and embark on your learning journey!

Report abuse