Book Image

Mastering Blazor WebAssembly

By : Ahmad Mozaffar
3.5 (2)
Book Image

Mastering Blazor WebAssembly

3.5 (2)
By: Ahmad Mozaffar

Overview of this book

Blazor WebAssembly is a revolutionary technology in software development that enables you to develop web applications with a rich user interface using C# without JavaScript. It can be run natively in the browser and soon on mobile apps with .NET MAUI, making it a superweapon in the .NET developer’s toolbox. This capability has opened the doors for the JavaScript community to have a stable framework to build single page applications (SPAs) maintained by Microsoft and driven by the community. Mastering Blazor WebAssembly is a complete resource that teaches you everything you need to build client-side web applications using C# & .NET 7.0. Throughout this book, you’ll discover the anatomy of a Blazor WebAssembly project, along with the build, style, and structure of the components. You’ll implement forms to catch user input and collect data, as well as explore the topics of navigating between the pages in depth. The chapters will guide you through handling complex scenarios like RenderTrees, writing efficient unit tests, using variant security methods, and publishing the app to different providers, all in a practical manner. By the end of this book, you’ll have the skills necessary to build web apps with Blazor WebAssembly, along with the basics for a future in mobile development with .NET MAUI and Blazor.
Table of Contents (21 chapters)
1
Part 1: Blazor WebAssembly Essentials
5
Part 2: App Parts and Features
13
Part 3: Optimization and Deployment

Navigation and parameters

In BooksStore, for example, the user can see a list of books on the Index page, but the user should also be able to click on a book and navigate to another page where all the book details are visible. When we navigate to the details page, we need to pass the book ID to it so that the page knows the book for which the details need to be retrieved.

Luckily, Blazor provides us with powerful and flexible routing and navigation mechanisms that allow us to navigate easily and send data in the URL, either by using the route of the page itself or using query parameters. We are going to explain both in detail.

Passing parameters using the route

Parameters can be sent within the route of the page. The Router component is responsible for detecting those parameters and filling in the values from the URL for the parameters in the targeted component based on the parameter name.

In the next example, we are going to create a BookDetails component and set a route...