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

Reacting to navigation changes

In the logic of your apps, sometimes, you need to react to the navigation of the user by taking them to a new URL for many reasons, such as needing to highlight a certain component in the UI if the user navigates to a specific URL, or needing to execute a piece of code when the user navigates from the current page. In this section, we will learn about the NavLink component and LocationChanged within the NavigationManager service.

The NavLink Component

Blazor contains a built-in component called NavLink. This component is basically just the normal hyperlink tag (<a>) in HTML that allows the user to redirect to a specific link using the href attribute. What makes NavLink different from using the normal HTML hyperlink tag is that NavLink reacts to the URL changes, and if the current URL matches the link defined in its href attribute, it sets a CSS class called active and removes it when the URL doesn’t match. That makes the NavLink component...