What this book covers
Chapter 1, Introduction to Blazor WebAssembly, introduces the Blazor WebAssembly framework. It explains the benefits of using the Blazor framework and describes the differences between the three hosting models: Blazor Server, Blazor Hybrid, 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, introduces Razor components through the creation of a simple project. This chapter is divided into two sections. The first section explains Razor components, routing, Razor syntax, and how to use Hot Reload while developing an application. 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. By the end of this chapter, you will be able to create a demo Blazor WebAssembly project.
Chapter 3, Debugging and Deploying a Blazor WebAssembly App, teaches you how to debug and deploy a Blazor WebAssembly app through the creation of a simple project. This chapter is divided into two sections. The first section explains debugging, logging, handling exceptions, using ahead-of-time (AOT) compilation, and deploying an app to Microsoft Azure. The second section walks you step by step through the process of debugging and deploying a Blazor WebAssembly application. By the end of this chapter, you will be able to debug a simple Blazor WebAssembly app and deploy it to Microsoft Azure.
Chapter 4, Building a Modal Dialog Using Templated Components, provides you with an introduction to templated components through the creation of a modal dialog component. This chapter is divided into two 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 and moving it to your own custom Razor class library. 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 5, Building a Local Storage Service Using JavaScript Interoperability (JS Interop), teaches you how to use 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 second 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 6, Building a Weather App as a Progressive Web App (PWA), provides you with 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 the various types of service workers. Also, it describes how to use the CacheStorage API, the Geolocation API, and the OpenWeather One Call API that 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 7, Building a Shopping Cart Using Application State, explains how to use 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. The second 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 dependency injection to maintain application state within a Blazor WebAssembly app.
Chapter 8, Building a Kanban Board Using Events, provides you with 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, attribute splatting, and arbitrary parameters. The second 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 drop zones. 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 9, Uploading and Reading an Excel file, explains how to upload various types of files and how to use the Open XML SDK to read an Excel file. This chapter is divided into two sections. The first section explains uploading one or more files and resizing images. It also explains how to use virtualization to render data and how to read data from Excel files. The second section walks you step by step through the process of creating an application that can upload and read an Excel file and then use virtualization to render the data from the Excel file. By the end of this chapter, you will be able to upload a file into a Blazor WebAssembly app, use the Open XML SDK to read an Excel file, and render data using virtualization.
Chapter 10, Using Azure Active Directory to Secure a Blazor WebAssembly Application, teaches you how to secure a Blazor WebAssembly App through the creation of a simple application that displays the contents of a claim. This chapter is divided into two sections. The first section explains the difference between authentication and authorization. It also teaches you how to work with authentication and how to use both the Authorize attribute and the AuthorizeView component. The second section walks you step by step through the process of adding an application to Azure AD and using it for both authentication and authorization. By the end of this chapter, you will be able to secure a Blazor WebAssembly app using Azure AD.
Chapter 11, Building a Task Manager Using ASP.NET Web API, provides you with 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 ASP.NET Web API to update data in a SQL Server database.
Chapter 12, Building an Expense Tracker Using the EditForm Component, teaches you how to use 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. It also explains how to use navigation locking to prevent the user from navigating to another page before they have saved their edits. 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 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.