Blazor WebAssembly by Example

Book description

Discover blueprints that explore various components of Blazor, C#, and .NET to help you build web apps without learning JavaScript

Key Features

  • Explore complete, easy-to-follow web projects using Blazor
  • Build projects such as a weather app, expense tracker, and Kanban board with real-world applications
  • Understand and work with Blazor WebAssembly effectively without spending too much time focusing on the theory

Book Description

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

What you will learn

  • Discover the power of the C# language for both server-side and client-side web development
  • Use the Blazor WebAssembly App project template to build your first Blazor WebAssembly application
  • Use templated components and the Razor class library to build and share a modal dialog box
  • Understand how to use JavaScript with Blazor WebAssembly
  • Build a progressive web app (PWA) to enable native app-like performance and speed
  • Understand dependency injection (DI) in .NET to build a shopping cart app
  • Get to grips with .NET Web APIs by building a task manager app

Who this book is for

This book is for .NET web developers who are tired of constantly learning new JavaScript frameworks and wish to write web applications using Blazor WebAssembly, leveraging the power of .NET and C#. The book assumes beginner-level knowledge of the C# language, .NET framework, Microsoft Visual Studio, and web development concepts.

Table of contents

  1. Blazor WebAssembly by Example
  2. Foreword
  3. Contributors
  4. About the author
  5. About the reviewer
  6. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
    4. Download the example code files
    5. Code in Action
    6. Download the color images
    7. Conventions used
    8. Get in touch
    9. Reviews
  7. Chapter 1: Introduction to Blazor WebAssembly
    1. Benefits of using the Blazor framework
      1. .NET Framework
      2. SPA framework
      3. Razor syntax
      4. Awesome tooling
    2. Hosting models
      1. Blazor Server
      2. Blazor WebAssembly
    3. What is WebAssembly?
      1. WebAssembly goals
      2. WebAssembly support
    4. Setting up your PC
      1. Installing Visual Studio Community Edition
      2. Installing .NET 5.0
      3. Installing SQL Server Express
    5. Summary
    6. Questions
    7. Further reading
  8. Chapter 2: Building Your First Blazor WebAssembly Application
    1. Technical requirements
    2. Razor components
      1. Using components
      2. Parameters
      3. Naming components
      4. Component life cycle
      5. Component structure
    3. Routing in Blazor WebAssembly
      1. Route parameters
      2. Catch-all route parameters
      3. Route constraints
    4. Razor syntax
      1. Inline expressions
      2. Control structures
    5. Project overview
    6. Creating the Demo Blazor WebAssembly project
      1. Creating the Demo project
      2. Running the Demo project
      3. Examining the Demo project's structure
      4. Examining the shared Razor components
      5. Examining the routable Razor components
      6. Using a component
      7. Adding a parameter to a component
      8. Using a parameter with an attribute
      9. Adding a route parameter
      10. Using partial classes to separate markup from code
    7. Creating a custom Blazor WebAssembly project template
      1. Creating an empty Blazor project
      2. Creating a project template
      3. Updating a custom project template
      4. Using a custom project template
    8. Summary
    9. Questions
    10. Further reading
  9. Chapter 3: Building a Modal Dialog Using Templated Components
    1. Technical requirements
    2. RenderFragment parameters
    3. EventCallback parameters
    4. CSS isolation
      1. Enabling CSS isolation
      2. Supporting child components
    5. Project overview
    6. Creating the modal dialog project
      1. Getting started with the project
      2. Adding the Dialog component
      3. Adding a CSS
      4. Testing the Dialog component
      5. Adding EventCallback parameters
      6. Adding RenderFragment parameters
      7. Creating a Razor class library
      8. Testing the Razor class library
      9. Adding a component to the Razor class library
    7. Summary
    8. Questions
    9. Further reading
  10. Chapter 4: Building a Local Storage Service Using JavaScript Interoperability (JS Interop)
    1. Technical requirements
    2. Why use JavaScript?
    3. Exploring JS interop
      1. InvokeVoidAsync
      2. InvokeAsync
      3. Invoking JavaScript from .NET synchronously
      4. Invoking .NET from JavaScript
    4. Understanding local storage
    5. Project overview
    6. Creating the local storage service
      1. Creating the local storage service project
      2. Writing JavaScript to access localStorage
      3. Adding the ILocalStorageService interface
      4. Creating the LocalStorageService class
      5. Writing to localStorage
      6. Reading from localStorage
    7. Summary
    8. Questions
    9. Further reading
  11. Chapter 5: Building a Weather App as a Progressive Web App (PWA)
    1. Technical requirements
    2. Understanding PWAs
      1. HTTPS
      2. Manifest files
      3. Service workers
    3. Working with manifest files
    4. Working with service workers
      1. Service worker life cycle
      2. Updating a service worker
      3. Types of service workers
    5. Using the CacheStorage API
    6. Using the Geolocation API
    7. Using the OpenWeather One Call API
    8. Project overview
    9. Creating a PWA
      1. Getting started with the project
      2. Adding a JavaScript function
      3. Using the Geolocation API
      4. Adding a Forecast class
      5. Adding a DailyForecast component
      6. Using the OpenWeather One Call API
      7. Displaying the forecast
      8. Adding the logo
      9. Adding a manifest file
      10. Adding a simple service worker
      11. Testing the service worker
      12. Installing the PWA
      13. Uninstalling the PWA
    10. Summary
    11. Questions
    12. Further reading
  12. Chapter 6: Building a Shopping Cart Using Application State
    1. Technical requirements
    2. Application state
    3. Understanding DI
      1. DI container
      2. Service lifetime
    4. Project overview
    5. Creating the shopping cart project
      1. Getting started with the project
      2. Adding the Product class
      3. Adding the Store page
      4. Demonstrating that application state is lost
      5. Creating the ICartService interface
      6. Creating the CartService class
      7. Registering CartService in the DI container
      8. Injecting CartService
      9. Adding the cart total to all of the pages
      10. Using the OnChange method
    6. Summary
    7. Questions
    8. Further reading
  13. Chapter 7: Building a Kanban Board Using Events
    1. Technical requirements
    2. Event handling
      1. Lambda expressions
      2. Preventing default actions
    3. Attribute splatting
    4. Arbitrary parameters
    5. Project overview
    6. Creating the Kanban board project
      1. Getting started with the project
      2. Adding the classes
      3. Creating the Dropzone component
      4. Adding a style sheet
      5. Creating the Kanban board
      6. Creating the NewTask component
      7. Using the NewTask component
    7. Summary
    8. Questions
    9. Further reading
  14. Chapter 8: Building a Task Manager Using ASP.NET Web API
    1. Technical requirements
    2. Understanding hosted applications
      1. Client project
      2. Server project
      3. Shared project
    3. Using the HttpClient service
    4. Using JSON helper methods
      1. GetFromJsonAsync
      2. PostAsJsonAsync
      3. PutAsJsonAsync
      4. HttpClient.DeleteAsync
    5. Project overview
    6. Creating the TaskManager project
      1. Getting started with the project
      2. Examining the hosted Blazor WebAssembly app
      3. Emptying the solution
      4. Adding the TaskItem class
      5. Adding the TaskItem API controller
      6. Setting up SQL Server
      7. Displaying the tasks
      8. Completing the tasks
      9. Deleting the tasks
      10. Adding new tasks
    7. Summary
    8. Questions
    9. Further reading
  15. Chapter 9: Building an Expense Tracker Using the EditForm Component
    1. Technical requirements
    2. Overview of the EditForm component
    3. Using the built-in input components
    4. Using the validation components
    5. Project overview
    6. Creating the ExpenseTracker project
      1. Getting started with the project
      2. Removing the demo project
      3. Adding the classes
      4. Adding the API controllers
      5. Creating the SQL Server database
      6. Viewing the expenses
      7. Adding the ExpenseEdit component
      8. Adding the input components
    7. Summary
    8. Questions
    9. Further reading
    10. Why subscribe?
  16. Other Books You May Enjoy
    1. Packt is searching for authors like you
    2. Leave a review - let other readers know what you think

Product information

  • Title: Blazor WebAssembly by Example
  • Author(s): Toi B. Wright
  • Release date: July 2021
  • Publisher(s): Packt Publishing
  • ISBN: 9781800567511