Search⌘ K

Building Real-Life Applications with Blazor WebAssembly

0%

1.Introduction to Blazor WebAssembly

Introduction to Blazor Benefits of Using the Blazor Framework Hosting Models What Is WebAssembly?Summary of Blazor WebAssembly Quiz Yourself on Blazor WebAssembly

2.Building Your First Blazor WebAssembly Application

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

Mini Project

Counter App

3.Building a Modal Dialog 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

Mini Project

Task Tracking System

4.Building Local Storage Service Using 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

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

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

6.Building a Shopping Cart Using Application State

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

7.Building a Kanban Board Using Events

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

Mini Project

Completing the Kanban Board Project

8.Building a Task Manager Using ASP.NET Web API

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 Displaying the Tasks Completing the Tasks Deleting the Tasks Adding new Tasks Summary of ASP.NET Web API Quiz Yourself on Hosted Blazor WebAssembly App

9.Building an Expense Tracker Using the EditForm Component

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

Mini Project

Completing TaskManager Project

10.Conclusion

11.Local Installations

Installation of Visual Studio, .NET, and SQL Server

Building Real-Life Applications with Blazor WebAssembly

Completing TaskManager Project

This project is a continuation of the TaskManager project that we created in the preceding chapter. In this project, you will add functionality to allow the user to edit a task.

In this project, you need to use the EditForm component to add functionality to update the task. The following screenshot shows the TaskManager project that you will build in this project:

TaskManager project

TaskManager project

The following concept of Blazor WebAssembly will be assessed in this project:

EditForm component

Good luck!