Blazor Enhanced Navigation | Form Handling | Blazor Tutorial | .NET 8

Summary

This video introduces Blazor's new features in .NET 8, focusing on enhanced navigation and form handling. It demonstrates how these features improve user experience by eliminating full-page reloads and preserving scroll positions during navigation and form submissions. The tutorial explains the technical implementation of these enhancements, including how to enable or disable them on a per-link basis, handle dynamic content with the `data-permanent` attribute, and manage form handling opt-ins. With practical demos and code examples, viewers learn how to implement these features to optimize the performance and responsiveness of their Blazor applications.

Takeaways

• 😀 Enhanced Navigation and Form Handling improve user experience in Blazor apps by eliminating full-page refreshes and preserving scroll positions.
• 😀 Static server rendering causes full-page refreshes, which can lead to a poor user experience due to scroll position loss and slower navigation.
• 😀 `blazor.web.js` intercepts navigation and form submissions to fetch data from the server and update only the necessary parts of the UI, enhancing performance.
• 😀 To disable enhanced navigation for specific links or forms, you can use the `data-enhanced` attribute with the value `false` on anchor tags or parent elements.
• 😀 Enhanced navigation applies to Blazor components but does not work with non-Blazor endpoints, such as Razor pages, which require full-page reloads.
• 😀 To opt into enhanced form handling and preserve scroll position during form submissions, apply the `data-enhanced` attribute to the form element.
• 😀 If using `EditForm` components, enhanced form handling can be enabled via the `Enhanced` component parameter.
• 😀 The `data-permanent` attribute ensures that content inside an element persists across navigation events triggered by enhanced navigation.
• 😀 Use the `enhanced load` event listener to detect and react to page updates triggered by enhanced navigation and streaming rendering.
• 😀 Programmatic navigation with `ForceLoad=true` forces a full-page reload, bypassing enhanced navigation, ensuring more control over the navigation process.
• 😀 The `navigation.refresh()` method allows for refreshing the current page, with an option to enforce a full-page reload by setting the `ForceLoad` parameter.

Q & A

What is enhanced navigation in Blazor, and how does it improve the user experience?

Enhanced navigation in Blazor allows asynchronous page updates by intercepting navigation and form requests, minimizing DOM updates without full page reloads. This results in faster navigation and preserves user experience elements like scroll positions during form submissions.

How does static server rendering work without enhanced navigation enabled?

Without enhanced navigation, a browser sends a request to the server, which executes a Razor component, generates HTML, and returns it to the browser. This leads to a full page refresh, and user interactions such as form submissions lose their scroll position.

What are the two main problems associated with static server rendering that enhanced navigation addresses?

The two main problems are full page refreshes and the loss of the user's scroll position during form submissions, both of which negatively affect the user experience.

How does Blazor's enhanced navigation differ from regular static server rendering?

Blazor’s enhanced navigation uses the `blazor.web.js` script to intercept requests and perform fetch calls, updating only the necessary parts of the DOM without triggering a full page reload. This eliminates unnecessary page refreshes and maintains state like scroll positions.

What does the `data-enhanced-nav` attribute do in Blazor?

The `data-enhanced-nav` attribute is used to control whether enhanced navigation is applied to a specific link. Setting it to 'false' disables enhanced navigation for that particular anchor tag, forcing a full page reload instead of an asynchronous fetch.

Can enhanced navigation be controlled hierarchically, and if so, how?

Yes, enhanced navigation can be controlled hierarchically. If a parent element (like a `div`) has the `data-enhanc-nav` attribute set to 'false', it will disable enhanced navigation for all child elements, including anchor tags inside that `div`.

What happens when Blazor navigates to a non-Blazor endpoint, like a Razor page, while using enhanced navigation?

When navigating to a non-Blazor endpoint, such as a Razor page, enhanced navigation is bypassed. This results in a full page reload because enhanced navigation only works with Blazor components, not with non-Blazor resources like Razor pages.

How does enhanced form handling work in Blazor, and what makes it opt-in?

Enhanced form handling preserves the scroll position and prevents full page reloads during form submissions. It is opt-in by adding the `data-enhanced` attribute to the form element, enabling asynchronous form handling without a page refresh.

What is the `data-permanent` attribute used for in Blazor?

The `data-permanent` attribute is applied to elements to ensure that their content is preserved during enhanced navigation. It prevents the content from being discarded when Blazor performs DOM updates after navigation.

How can you listen for enhanced updates to a page in Blazor?

You can listen for enhanced updates using the `enhanced-load` event, which can be registered via JavaScript by adding an event listener in the page's script. This event triggers when enhanced navigation or streaming rendering updates the page.

What is the role of the `ForceLoad` parameter in Blazor’s programmatic navigation?

The `ForceLoad` parameter in Blazor’s `NavigationManager` determines whether a full page reload should be forced during navigation. By default, it is set to false, using enhanced navigation if available, but setting it to true forces a full page reload regardless of enhanced navigation.

What happens when you call `Navigation.Refresh()` with the `ForceReload` parameter set to true?

When `Navigation.Refresh()` is called with `ForceReload` set to true, the page will always refresh using a full page reload, even if enhanced navigation is available. This ensures that the page is reloaded from scratch.