HomeCoursesBuilding Real-Life Applications with Blazor WebAssembly

4.8

Intermediate

24h

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#.

Join 2.7 million developers at

Overview

Content

Reviews

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 designed to highlight one or more important concepts. In the first project, you will learn templated components. Next, you will learn about JavaScript interoperability, Progressive Web Applications, application state, events, and ASP.NET Core hosted applications with Web API. You will finish with built-in components, such as EditForm and validation. By the end of the course, you will have experience building both simple standalone web applications and hosted web applications with SQL Server backends.

Blazor WebAssembly is a framework built on the popular and robust ASP.NET framework. It allows you to build single-page web appl...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

Content

113 Lessons4 Projects9 Quizzes

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

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

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

10.

Conclusion

1 Lessons

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

Wrap Up!

11.

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

Certificate of Completion

Showcase your accomplishment by sharing your certificate of completion.

Course Author:

Packt

Developed by MAANG Engineers

Every Educative lesson is designed by our in-house team of ex-MAANG software engineers and PhD computer science educators, and developed in consultation with developers and data scientists working at Meta, Google, and more. Our mission is to get you hands-on with the necessary skills to stay ahead in a constantly changing industry. No video, no fluff. Just interactive, project-based learning with personalized feedback that adapts to your goals and experience.

Trusted by 2.7 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."

Software Developer

Carlos Matias La Borde

"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

Hands-on Learning Powered by AI

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

Personalized Interview Prep

Skip the LeetCode grind with a custom roadmap that adapts to your goals. Hands-on practice for Coding Interviews, System Design, and more.

Mock Interviews

Test your skills in a simulated interview setting. Receive personalized feedback based on your performance. Available for Coding Interviews, System Design, and more.

AI Prompt

Build prompt engineering skills. Practice implementing AI-informed solutions.

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.

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!

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.

18 h

beginner

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.

12 h

intermediate

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.

11 h 10 m

beginner

Course

Building Web Applications with Blazor

beginner

18 hour

Course

Securing Blazor Applications with Auth0

intermediate

12 hour

Course

Programming Fundamentals: Getting Started with C# and .NET