Home>Courses>Building Real-Life Applications with Blazor WebAssembly

Building Real-Life Applications with Blazor WebAssembly

Gain insights into building single-page web apps with Blazor WebAssembly. Delve into templated components, JavaScript integration, PWAs, app state, events, and ASP.NET Core hosted apps using C#.

Intermediate

113 Lessons

24h

Certificate of Completion

Gain insights into building single-page web apps with Blazor WebAssembly. Delve into templated components, JavaScript integration, PWAs, app state, events, and ASP.NET Core hosted apps using C#.

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

4 Projects

68 Playgrounds

9 Quizzes

Course Overview

What You'll Learn

Course Content

Recommendations

Course Overview

Blazor WebAssembly is a framework built on the popular and robust ASP.NET framework. It allows you to build single-page web applications that use C# on the client instead of JavaScript. Blazor WebAssembly does not rely on plug-ins or add-ons. It only requires that the browser support WebAssembly. In this course, you will complete practical projects that will teach you the fundamentals of Blazor WebAssembly. Each chapter includes a standalone project with detailed step-by-step instructions. Each project is ...Show More

What You'll Learn

An understanding of Blazor and its applications to web development

Working knowledge of creating templated components

Hands-on experience developing progressive web applications using Blazor

The ability to invoke JavaScript functions from Blazor using JS Interoperability

The ability to invoke .NET methods from JavaScript using JS interoperability

Familiarity with core components of Blazor, including built-in Razor components, application state, and events

An understanding of Blazor and its applications to web development

Course Content

Introduction to Blazor WebAssembly

6 Lessons

Get familiar with Blazor WebAssembly, its benefits, hosting models, and development setup.

Introduction to Blazor

Benefits of Using the Blazor Framework

Hosting Models

What Is WebAssembly?

Summary of Blazor WebAssembly

Quiz Yourself on Blazor WebAssembly

Building Your First Blazor WebAssembly Application

18 Lessons

Get started with building your first Blazor WebAssembly app using Razor components.

Introduction to Blazor WebAssembly Application

Razor Components

Component Structure

Routing in Blazor WebAssembly

Razor Syntax

Demo Project Overview

Creating the Demo Blazor WebAssembly Project

Examining the Demo Project's Structure

Examining the Shared Razor Components

Examining the Routable Razor Components

Using the Razor Components

Adding a Parameter to a Component

Adding a Route Parameter

Using Partial Classes to Separate Markup from Code

Creating a Custom Blazor WebAssembly Project Template

Creating a Project Template

Summary of First Blazor WebAssembly Application

Quiz Yourself on the Basics of Blazor WebAssembly

Counter App

Project

Building a Modal Dialog Using Templated Components

13 Lessons

Master the steps to create customizable Blazor modal dialogs using templated components.

Introduction to Templated Components

RenderFragment Parameters

EventCallback Parameters

CSS Isolation

Modal Dialog Project Overview

Creating the Modal Dialog Project

Adding the Dialog Component

Adding EventCallback Parameters

Adding RenderFragment Parameters

Creating a Razor Class Library

Adding a Component to the Razor Class Library

Summary of Using Templated Components

Quiz Yourself on the Basics of Modal Dialog

Task Tracking System

Project

Building Local Storage Service Using JavaScript Interoperability

12 Lessons

Grasp the fundamentals of building a local storage service using Blazor and JavaScript interoperability.

Introduction to JavaScript Interoperability

Why Use JavaScript?

InvokeVoidAsync

InvokeAsync

Invoking JavaScript from .NET Synchronously

Understanding Local Storage

Local Storage Project Overview

Creating the Local Storage Service

Adding JavaScript and Services to Write to LocalStorage

Reading from LocalStorage

Summary of Using JavaScript Interoperability

Quiz Yourself on JavaScript Interoperability

Building a Weather App as a Progressive Web App (PWA)

14 Lessons

Take a closer look at building a Blazor-based PWA weather app using APIs and offline capabilities.

Introduction to Progressive Web App

Understanding PWAs

Working with Manifest Files

Working with Service Workers

Using the CacheStorage, Geolocation, and OpenWeather One Call APIs

WeatherForecast Project Overview

Creating a PWA

Adding a JavaScript Function and Using the Geolocation API

Adding a Forecast Class

Converting WeatherForcast App to PWA

Testing the Service Worker

Installing and Uninstalling the PWA

Summary of PWA

Quiz Yourself on Blazor Webassembly PWAs

Building a Shopping Cart Using Application State

10 Lessons

Tackle creating a persistent shopping cart in Blazor WebAssembly using the AppState pattern.

Introduction to Application State

Application State and Understanding DI

Shopping Cart Project Overview

Creating the Shopping Cart Project

Adding the Product Class

Adding the Store Page

Creating the ICartService Interface and CartService Class

Adding the Cart Total to All of the Pages

Summary of Using Application State

Quiz Yourself on Basics of Application State in Blazor WebAssemby

Building a Kanban Board Using Events

9 Lessons

Master the steps to build a dynamic Kanban board using Blazor WebAssembly event handling.

Introduction to Events

Event Handling

Kanban Board Project Overview

Creating the Kanban Board Project

Adding the Classes

Creating the Kanban Board

Creating the NewTask Component

Summary of Using Events

Quiz Yourself on Event Handling in Blazor WebAssembly

Completing the Kanban Board Project

Project

11.

Building a Task Manager Using ASP.NET Web API

15 Lessons

Step through building a task manager using ASP.NET Web API and Blazor WebAssembly.

Introduction to ASP.NET Web API

Understanding Hosted Applications

Using the HttpClient Service

Using JSON Helper Methods

TaskManager Project Overview

Creating the TaskManager Project

Emptying the Solution

Adding the TaskItem class and API controller

Setting up SQL Server

Summary of ASP.NET Web API

Quiz Yourself on Hosted Blazor WebAssembly App

12.

Building an Expense Tracker Using the EditForm Component

14 Lessons

Walk through creating an expense tracker with EditForm, input, and validation components.

Introduction to Built-in Components

Overview of the EditForm Component

Using the Validation Components

ExpenseTracker Project Overview

Creating the ExpenseTracker Project

Removing the Demo Project

Adding the Classes

Adding the API Controllers

Creating the SQL Server Database

Viewing the Expenses

Adding the ExpenseEdit component

Adding the Input Components

Summary of Using the EditFrom Component

Quiz Yourself on Blazor Built-in Components

Completing TaskManager Project

Project

14.

Conclusion

1 Lessons

Examine key concepts of Blazor WebAssembly, from Razor components to progressive web apps.

Wrap Up!

15.

Local Installations

1 Lessons

Find out about setting up your development environment with Visual Studio, .NET, and SQL Server.

Installation of Visual Studio, .NET, and SQL Server

Course Author

Packt

Trusted by 2.5 million developers working at companies

"These are high-quality courses. Trust me. I own around 10 and the price is worth it for the content quality. EducativeInc came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks"

Anthony Walker

@_webarchitect_

"Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!"

Evan Dunbar

ML Engineer

"You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it."

Carlos Matias La Borde

Software Developer

"I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site"

Souvik Kundu

Front-end Developer

"Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content."

Vinay Krishnaiah

Software Developer

"I've tried probably 5-7 different sites and Educative is easily the best. It perfectly blends explanation with interactivity"

Eric Downs

Musician/Entrepeneur

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Instant Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

AI-Powered Mock Interviews

Put your skills to the test in a simulated interview setting. Receive personalized feedback based on your performance. Available in Premium & Premium Plus plans.

Adaptive Learning

At various checkpoints throughout Educative courses, you will be prompted to take a quick assessment. Receive a condensed curriculum tailored to your strengths and skill gaps.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!

Recommended before starting this course

Course

Programming Fundamentals: Getting Started with C# and .NET

Gain insights into C# 10 and .NET, learn programming basics, delve into OOP, explore data structures, and discover how to build and deploy native applications effectively.

beginner

11 hours 10 mins

Course

Programming Fundamentals: Getting Started with C# and .NET

beginner

11 hour 10 min

Related Courses and Skill Paths

Course

Building Web Applications with Blazor

Gain insights into Blazor to build single page applications using C#. Delve into Razor syntax, components, JavaScript interoperability, security, and progressive web applications to enhance your full stack development skills.

beginner

18 hours

Course

Securing Blazor Applications with Auth0

Gain insights into securing Blazor applications with Auth0. Delve into setting up Blazor Server and WebAssembly, integrating Auth0 SDK, adding login functions, and protecting components and APIs.

intermediate

12 hours

Course

Building Web Applications with Blazor

beginner

18 hour

Course

Securing Blazor Applications with Auth0

intermediate

12 hour

Free Resources

FOR TEAMS

Interested in this course for your business or team?

Unlock this course (and 1,000+ more) for your entire org with DevPath