Blazor WebAssembly By Example - Second Edition

Blazor WebAssembly By Example - Second Edition

by Toi B. Wright, Scott Hanselman
Released February 2023
Publisher(s): Packt Publishing
ISBN: 9781803241852

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Build exciting web apps following step-by-step instructions and video examples.

Purchase of the print or Kindle book includes a free eBook in PDF format.

Key Features

  • Explore and build complete, easy-to-follow web projects using Blazor. Each project includes a video example too.
  • Test your skills in building a weather app, an expense tracker, and a Kanban board with real-world applications.
  • Develop a deeper understanding on how to work with Blazor WebAssembly without spending too much time focusing on the theory.

Book Description

Blazor WebAssembly helps developers build web applications without the need for JavaScript, plugins, or add-ons. With its continued growth in popularity, getting started with Blazor now can open doors to new career paths and exciting projects – and Blazor WebAssembly by Example will make your first steps easier. This is a project-based guide that will teach you how to build single-page web applications with Blazor, focusing heavily on the practical over the theoretical by providing detailed step-by-step instructions for each project. The author also includes a video for each project showing her following the step-by-step instructions, so readers can use them if they're unsure about any particular step.

In this updated edition, you'll start by building simple standalone web applications and gradually progress to developing more advanced hosted web applications with SQL Server backends. Each project will cover a different aspect of the Blazor WebAssembly ecosystem, such as Razor components, JavaScript interop, security, event handling, debugging on the client, application state, and dependency injection. The book’s projects get more challenging as you progress, but you don’t have to complete them in order, which makes this book a valuable resource for beginners as well as those who just want to dip into specific topics.

By the end of this book, you will have experience and lots of know-how on how to build 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
  • Build your first Blazor WebAssembly application with the Blazor WebAssembly App project template
  • Learn how to debug a Blazor WebAssembly app, and use ahead-of-time compilation before deploying it on Microsoft's cloud platform
  • Use templated components and the Razor class library to build and share a modal dialog box
  • Learn how to use JavaScript with Blazor WebAssembly
  • Build a progressive web app (PWA) to enable native app-like performance and speed
  • Secure a Blazor WebAssembly app using Azure Active Directory
  • Gain experience with ASP.NET Web APIs by building a task manager app

Who this book is for

This book is for .NET web developers who want to leverage the power of .NET and C# to write single-page web applications using Blazor WebAssembly without using JavaScript frameworks. To get started with this book, you'll need at least beginner-level knowledge of the C# language, .NET framework, Microsoft Visual Studio, and web development concepts.

Table of contents

  1. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
    4. Get in touch
  2. Introduction to Blazor WebAssembly
    1. Benefits of using the Blazor framework
      1. .NET Framework
      2. Open source
      3. SPA framework
      4. Razor syntax
      5. Awesome tooling
      6. Supported by Microsoft
    2. Hosting models
      1. Blazor Server
        1. Advantages of Blazor Server
        2. Disadvantages of Blazor Server
      2. Blazor Hybrid
        1. Advantages of Blazor Hybrid
        2. Disadvantages of Blazor Hybrid
      3. Blazor WebAssembly
        1. Advantages of Blazor WebAssembly
        2. Disadvantages of Blazor WebAssembly
      4. Hosting model differences
    3. What is WebAssembly?
      1. WebAssembly goals
      2. WebAssembly support
    4. Setting up your PC
      1. Installing Microsoft Visual Studio Community Edition
      2. Installing .NET 7.0
      3. Installing Microsoft SQL Server Express
      4. Create a Microsoft Azure account
    5. Summary
    6. Questions
    7. Further reading
  3. Building Your First Blazor WebAssembly Application
    1. Creating the Demo Blazor WebAssembly Project Technical Requirements
    2. Razor components
      1. Using components
      2. Parameters
        1. Required parameters
        2. Query strings
      3. Naming components
      4. Component life cycle
      5. Component structure
        1. Directives
        2. Markup
        3. Code block
    3. Routing
      1. Route parameters
      2. Optional route parameters
      3. Catch-all route parameters
      4. Route constraints
    4. Razor syntax
      1. Inline expressions
      2. Control structures
        1. Conditionals
        2. Loops
    5. Hot Reload
    6. Creating the Demo Blazor WebAssembly project
      1. Project overview
      2. Getting started with the project
      3. Running the Demo project
      4. Examining the Demo project’s structure
        1. The Properties folder
        2. The wwwroot folder
        3. The App component
        4. The Shared folder
        5. The Pages folder
        6. The Client folder
        7. The _Imports.razor file
      5. Examining the shared Razor components
        1. The MainLayout component
        2. The NavMenu component
        3. The SurveyPrompt component
      6. Examining the routable Razor components
        1. The Index component
        2. The Counter component
        3. The FetchData component
      7. Using a component
      8. Modifying a component
      9. Adding a parameter to a component
      10. Using a parameter with an attribute
      11. Adding a route parameter
      12. Using partial classes to separate markup from code
    7. Summary
    8. Questions
    9. Further reading
  4. Debugging and Deploying a Blazor WebAssembly App
    1. Technical requirements
    2. Debugging a Blazor WebAssembly.app
    3. Debugging in Visual Studio
      1. Debugging in the browser
    4. Understanding logging
      1. Understanding log levels
      2. Setting the minimum log level
    5. Handling exceptions
      1. Setting error boundaries
      2. Creating a custom error component
    6. Using ahead-of-time (AOT) compilation
    7. Deploying a Blazor WebAssembly app to Microsoft Azure
    8. Creating the “guess the number” project
      1. Project overview
      2. Getting started with the project
      3. Adding a Game component
      4. Adding the code
      5. Adding a style sheet
      6. Setting up and playing the game
      7. Adding logging
      8. Debugging in Visual Studio
      9. Updating the code
      10. Debugging in the browser
      11. Adding an ErrorBoundary component
      12. Deploying the application to Microsoft Azure
    9. Summary
    10. Questions
    11. Further reading
  5. Building a Modal Dialog Using Templated Components
    1. Technical requirements
    2. Using RenderFragment parameters
    3. Using EventCallback parameters
    4. Understanding CSS isolation
      1. Enabling CSS isolation
      2. Supporting child components
    5. Creating the modal dialog project
      1. Project overview
      2. Getting started with the project
      3. Adding the Dialog component
      4. Add a CSS file
      5. Test the Dialog component
      6. Add EventCallback parameters
      7. Add RenderFragment parameters
      8. Create a Razor class library
      9. Test the Razor class library
      10. Add a component to the Razor class library
    6. Summary
    7. Questions
    8. Further reading
  6. Building a Local Storage Service Using JavaScript Interoperability (JS Interop)
    1. Technical requirements
    2. Why use JavaScript?
    3. Exploring JS interop
      1. Loading JavaScript code
      2. Invoking a JavaScript function from a .NET method
        1. InvokeAsync
        2. InvokeVoidAsync
        3. IJSInProcessRuntime
      3. Invoking a .NET method from a JavaScript function
    4. Using local storage
    5. Creating the local storage service
      1. Project overview
      2. Getting started with the project
      3. Writing JavaScript to access local storage
      4. Adding the ILocalStorageService interface
      5. Creating the LocalStorageService class
      6. Creating the DataInfo class
      7. Writing to local storage
      8. Adding a collocated JavaScript file
      9. Reading from local storage
    6. Summary
    7. Questions
    8. Further reading
  7. 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
        1. Install
        2. Activate
        3. Fetch
      2. Updating a service worker
      3. Types of service workers
        1. Offline page
        2. Offline copy of pages
        3. Offline copy with offline page
        4. Cache-first network
        5. Advanced caching
        6. Background sync
    5. Using the CacheStorage API
    6. Using the Geolocation API
    7. Using the OpenWeather One Call API
    8. Creating a PWA
      1. Project overview
      2. Getting started with the project
      3. Add JavaScript to determine our location
      4. Invoke the JavaScript function
      5. Add an OpenWeather class
      6. Install Bootstrap
      7. Add a DailyForecast component
      8. Fetch the forecast
      9. Display the forecast
      10. Add the logo
      11. Add a manifest file
      12. Add a simple service worker
      13. Test the service worker
      14. Install the PWA
      15. Uninstall the PWA
    9. Summary
    10. Questions
    11. Further reading
  8. Building a Shopping Cart Using Application State
    1. Technical requirements
    2. Introducing the application state
    3. Understanding DI
      1. DI containers
      2. Service lifetimes
        1. Singleton
        2. Scoped
        3. Transient
    4. Creating the shopping cart project
      1. Project overview
      2. Creating the shopping cart project
      3. Installing Bootstrap
      4. Adding a Store component
      5. Adding a Product class
      6. Finishing the Store component
      7. Demonstrating that the application state has been lost
      8. Creating the the ICartService interface
      9. Creating the CartService class
      10. Registering CartService in the DI container
      11. Injecting CartService into the Store component
      12. Adding the cart total to all the pages
      13. Using the OnChange method
    5. Summary
    6. Questions
    7. Further reading
  9. Building a Kanban Board Using Events
    1. Technical requirements
    2. Event handling
      1. Lambda expressions
      2. Preventing default actions
      3. Focusing an element
    3. Attribute splatting
    4. Arbitrary parameters
    5. Creating the Kanban board project
      1. Project overview
      2. Create the Kanban board project
      3. Install Bootstrap
      4. Add the classes
      5. Create the Dropzone component
      6. Add a stylesheet
      7. Create the Kanban board
      8. Create the NewTask component
      9. Use the NewTask component
    6. Summary
    7. Questions
    8. Further reading
  10. Uploading and Reading an Excel File
    1. Technical requirements
    2. Uploading files
      1. Resizing images
      2. Handling multiple files
    3. Using virtualization
      1. Rendering Local Data
      2. Rendering Remote Data
    4. Reading Excel files
    5. Creating the Excel reader project
      1. Project overview
      2. Create the Excel reader project
      3. Install the Open XML SDK
      4. Add the Medals class
      5. Upload the Excel file
      6. Read the Excel file
      7. Populate the medals collection
      8. Render the Medals collection
    6. Summary
    7. Questions
    8. Further reading
  11. Using Azure Active Directory to Secure a Blazor WebAssembly Application
    1. Technical requirements
    2. Understanding the difference between authentication and authorization
      1. Authentication
      2. Authorization
    3. Working with authentication
    4. Controlling the user interface using authorization
      1. The Authorize attribute
      2. The AuthorizeView component
    5. Creating the claims viewer project
      1. Project overview
      2. Create the claims viewer project
      3. Add the application to Azure AD
      4. Add a user and a group to Azure AD
      5. Add the required NuGet packages
      6. Enable authentication
      7. Add an Authentication component
      8. Add a LoginDisplay component
      9. Add a Secure component
      10. Add a WhoAmI component
      11. View the JSON Web Token (JWT)
      12. Add an authentication policy
    6. Summary
    7. Questions
    8. Further reading
  12. 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. Creating the TaskManager project
      1. Project overview
      2. Create the TaskManager project
      3. Adding the TaskItem class
      4. Adding the TaskItem API controller
      5. Setting up SQL Server
      6. Install Bootstrap
      7. Displaying the tasks
      8. Completing the tasks
      9. Deleting tasks
      10. Adding new tasks
    6. Summary
    7. Questions
    8. Further reading
  13. Building an Expense Tracker Using the EditForm Component
    1. Technical requirements
    2. Creating a data entry form
      1. Binding a form
      2. Submitting a form
    3. Using the built-in input components
      1. InputCheckbox
      2. InputDate
      3. InputFile
      4. InputNumber
      5. InputRadio
      6. InputRadioGroup
      7. InputSelect
      8. InputText
      9. InputTextArea
    4. Using the validation components
    5. Locking navigation
    6. Creating the expense tracker project
      1. Project overview
      2. Create the expense tracker project
      3. Install Bootstrap
      4. Add the classes
      5. Add the API controllers
      6. Create the SQL Server database
      7. View the expenses
      8. Add the edit expense component
      9. Add the input components
      10. Test the edit expense component
      11. Lock navigation
    7. Summary
    8. Questions
    9. Further reading
  14. Other Books You May Enjoy
  15. Index

Product information

  • Title: Blazor WebAssembly By Example - Second Edition
  • Author(s): Toi B. Wright, Scott Hanselman
  • Release date: February 2023
  • Publisher(s): Packt Publishing
  • ISBN: 9781803241852