Book Image

Blazor WebAssembly by Example

By : Toi B. Wright
Book Image

Blazor WebAssembly by Example

By: Toi B. Wright

Overview of this book

Blazor WebAssembly makes it possible to run C# code on the browser instead of having to use JavaScript, and does not rely on plugins or add-ons. The only technical requirement for using Blazor WebAssembly is a browser that supports WebAssembly, which, as of today, all modern browsers do. Blazor WebAssembly by Example is a project-based guide for learning how to build single-page web applications using the Blazor WebAssembly framework. This book emphasizes the practical over the theoretical by providing detailed step-by-step instructions for each project. You'll start by building simple standalone web applications and progress to developing more advanced hosted web applications with SQL Server backends. Each project covers a different aspect of the Blazor WebAssembly ecosystem, such as Razor components, JavaScript interop, event handling, application state, and dependency injection. The book is designed in such a way that you can complete the projects in any order. By the end of this book, you will have experience building a wide variety of single-page web applications with .NET, Blazor WebAssembly, and C#.
Table of Contents (11 chapters)

What this book covers

Chapter 1, Introduction to Blazor WebAssembly, provides an introduction to the Blazor WebAssembly framework. It explains the benefits of using the Blazor framework and describes the differences between the two hosting models: Blazor Server and Blazor WebAssembly. After highlighting the advantages of using the Blazor WebAssembly framework, the goals and support options for WebAssembly are discussed. Finally, it guides you through the process of setting up your computer to complete the projects in this book. By the end of this chapter, you will be able to proceed to any of the other chapters in this book.

Chapter 2, Building Your First Blazor WebAssembly Application, provides an introduction to Razor components through the creation of a simple project. This chapter is divided into three sections. The first section explains Razor components, routing, and Razor syntax. The second section walks you step by step through the process of creating your first Blazor WebAssembly application by using the Blazor WebAssembly App project template provided by Microsoft. The final section walks you step by step through the process of creating your own custom Blazor WebAssembly project template. The projects in Chapters 3-7 will use this custom project template. By the end of this chapter, you will be able to create an empty Blazor WebAssembly project.

Chapter 3, Building a Modal Dialog Using Templated Components, provides an introduction to templated components through the creation of a modal dialog component. This chapter is divided into three sections. The first section explains RenderFragment parameters, EventCallback parameters, and CSS isolation. The second section walks you step by step through the process of creating a modal dialog component. The final section walks you step by step through the process of creating your own Razor class library and moving the modal dialog component to it. By the end of this chapter, you will be able to create a modal dialog component and share it with multiple projects through a Razor class library.

Chapter 4, Building a Local Storage Service Using JavaScript Interoperability (JS Interop), provides an introduction to using JavaScript with Blazor WebAssembly through the creation of a local storage service. This chapter is divided into two sections. The first section explains the reasons that you still need to occasionally use JavaScript and how to invoke a JavaScript function from .NET. For completeness, it also covers how to invoke a .NET method from JavaScript. Finally, it introduces the Web Storage API that is used by the project. In the last section, it walks you step by step through the process of creating and testing a service that writes and reads to the local storage of the browser. By the end of this chapter, you will be able to create a local storage service by using JS Interop to invoke JavaScript functions from a Blazor WebAssembly application.

Chapter 5, Building a Weather App as a Progressive Web App (PWA), provides an introduction to progressive web apps through the creation of a simple weather web app. This chapter is divided into two sections. The first section explains what a PWA is and how to create one. It covers both manifest files and service workers. Also, it describes how to use the CacheStorage API, the Geolocation API, and the OpenWeather One Call API, which are required by the project in this chapter. The second section walks you step by step through the process of creating a 5-day weather forecast app and converting it into a PWA by adding a logo, a manifest file, and a service worker. Finally, it shows you how to install and uninstall the PWA. By the end of this chapter, you will be able to convert a Blazor WebAssembly app into a PWA by adding a logo, a manifest file, and a service worker.

Chapter 6, Building a Shopping Cart Using Application State, provides an introduction to application state through the creation of a shopping cart web app. This chapter is divided into two sections. The first section explains application state and Dependency Injection (DI). The last section walks you step by step through the process of creating a shopping cart application. To maintain state in your application, you will create a service that you will register in the DI container and inject into your components. By the end of this chapter, you will be able to use DI to maintain application state within a Blazor WebAssembly app.

Chapter 7, Building a Kanban Board Using Events, provides an introduction to event handling through the creation of a Kanban board web app. This chapter is divided into two sections. The first section discusses event handling, arbitrary parameters, and attribute splatting. The last section walks you step by step through the process of creating a Kanban board application that uses the DragEventArgs class to enable you to drag and drop tasks between the dropzones. By the end of this chapter, you will be able to handle events in your Blazor WebAssembly app and will be comfortable using both attribute splatting and arbitrary parameters.

Chapter 8, Building a Task Manager Using ASP.NET Web API, provides an introduction to hosted Blazor WebAssembly applications through the creation of a task manager web app. This is the first chapter to use SQL Server. It is divided into two sections. The first section describes the components of a hosted Blazor WebAssembly application. It also explains how to use the HttpClient service and the various JSON helper methods to manipulate data. The last section walks you step by step through the process of creating a task manager application that stores its data in a SQL Server database. You will create an API controller with actions, using Entity Framework. By the end of this chapter, you will be able to create a hosted Blazor WebAssembly app that uses the ASP.NET Web API to update data in a SQL Server database.

Chapter 9, Building an Expense Tracker Using the EditForm Component, provides an introduction to the EditForm component through the creation of an expense tracker web app. This chapter uses SQL Server. It is divided into two sections. The first section introduces the EditForm component, the built-in input components, and the built-in validation components. The last section walks you step by step through the process of creating an expense tracker application that uses the EditForm component and some of the built-in components to add and edit the expenses that are stored in a SQL Server database. By the end of this chapter, you will be able to use the EditForm component in conjunction with the built-in components to input and validate data that is stored in a SQL Server database.