Basics sur le blazor: Explorer la navigation améliorée de Blazor

La navigation améliorée fournit des fonctionnalités de type SPA pour les applications Web Blazor rendues (SSR) de serveur statique (SSR).

La navigation améliorée est une fonctionnalité complexe introduite dans .NET 8 qui aide à fournir une expérience utilisateur de type application (SPA) à une seule page lors de la navigation d’une page à une autre.

Dans cet article, nous découvrirons comment une navigation améliorée aide au développement du blazor et quels pièges nous devons savoir.

Depuis .NET 8 et le nouveau modèle de projet Blazor Web App, la navigation améliorée est activée par défaut. Nous examinerons comment le désactiver si vous n’en avez pas besoin – ou si cela provoque même des problèmes dans votre application.

Nous utiliserons le Application Web Blazor Modèle de projet comme base tout au long de cet article.

Tu peux accéder au code utilisé dans cet exemple sur github.

Deux types de navigation en blazor

Avec le nouveau Application Web Blazor modèle de projet introduit dans .NET 8, nous avons une référence au blazor.web.js fichier dans le App.razor déposer.

Applications Web Blazor en utilisant le blazor.web.js Fichier Offre deux types de navigation:

1. Navigation réjective normale: Un rechargement complet est déclenché et le navigateur demande un document du serveur situé à l’URL demandée.
2. Navigation de même page (navigation améliorée): Au lieu d’effectuer une charge pleine page, Blazor intercepte la demande sur le client et effectue une demande de récupération à la place. La réponse de la demande de récupération est corrigée dans la page actuelle.

Peu importe que vous utilisez par programme NavigationManager classe pour naviguer d’une page à un autre ou à un endroit <a> Éléments de votre balisage. Blazor interceptera toutes ces navigations et les traitera comme l’un des types mentionnés ci-dessus.

Avantages d’une navigation améliorée

Les avantages de la navigation améliorée sont une charge de page perçue plus rapide et conservant davantage l’état de la page, tels que le maintien de la position de défilement ou les valeurs des variables spécifiques à la page.

Il permet de soumettre et de gérer les formulaires HTML sans utiliser l’interactivité Blazor Server ou Blazor WebAssembly.

Exploration de l’application Web Blazor

Explorons une application Web Blazor générée par le Application Web Blazor modèle de projet. Pendant la création, j’ai sélectionné Serveur de blazor comme le mode d’interactivité et par page comme l’emplacement d’interactivité.

Il se traduit par une application Web Blazor avec la maison et la page météo en utilisant Rendu statique du serveur (SSR) et la page de compteur à l’aide de l’interactivité du serveur Blazor.

Créons et exécutons l’application.

Maintenant, je veux que vous naviguiez dans l’application à l’aide du menu à gauche. Que se passe-t-il lorsque vous cliquez sur les différents éléments du menu?

Oui, le nouveau contenu est chargé sur la zone principale de la page Web. Cependant, avez-vous également remarqué ce qui ne s’est pas passé? La page ne se chargeait pas complètement.

Ouvrez le Outils du développeur (F12) Et voyez ce qui se passe lorsque nous naviguons d’une page à une autre.

Nous voyons que le navigateur crée un demander la demande initié par le blazor.web.js déposer. Une page HTML complète est renvoyée du serveur au client. Cependant, le navigateur remplace uniquement (correctifs) le contenu de la zone principale qui change par la navigation.

Dans cette application, nous n’avons implémenté aucune logique d’interactivité côté serveur / côté client pour y arriver. Tout cela fait partie du blazor.web.js Fichier que nous chargeons lors du chargement de l’application Web Blazor.

Note: Si vous souhaitez désactiver rapidement une navigation améliorée et voir comment fonctionne une charge pleine page et est affiché dans les outils du développeur, vous pouvez commenter la ligne qui ajoute le blazor.web.js fichier à l’intérieur du App.razor fichier et le tester à nouveau.

Gestion de formulaire en utilisant une navigation améliorée

Avec .net 8 et le Application Web Blazor modèle de projet, Rendu côté serveur statique (SSR) est la valeur par défaut. Si l’utilisateur soumet un formulaire HTML, un Demande de poste sera envoyé au serveur.

Encore une fois, une navigation améliorée améliore l’expérience utilisateur. Il intercepte la soumission d’une forme et la gère comme un demander la demande Au lieu de cela, qui offre une expérience utilisateur de type SPA plus conviviale.

Contrairement à une navigation améliorée régulière, nous devons opt-in Pour l’utiliser pour la gestion des formulaires.

Il y a deux options. Nous ajoutons le Enhance propriété lors de l’utilisation du EditForm composant, ou nous utilisons le data-enhance attribut lorsque vous travaillez avec une plaine <form> élément.

Dans cet exemple, nous implémentons une page de recherche:

@page "https://www.telerik.com/search"

<h3>Search (Enhanced Form)</h3>

<EditForm Enhance FormName="SearchForm" Model="@Model" OnSubmit="@HandleSubmit">
    <InputText @bind-Value="Model.Search" placeholder="Enter search term..." />
    <button type="submit">Search</button>
</EditForm>

@if( _submitted)
{
    <div>You are looking for: @_searchText</div>
}

Nous utilisons le EditForm composant et ajouter le Enhance propriété pour permettre une navigation améliorée pour ce formulaire. Nous fournissons également des valeurs pour le FormName, Model et OnSubmit propriétés. Nous utilisons le InputText composant et lier la valeur au Search propriété du Model classe.

Si vous êtes complètement nouveau pour former une manipulation dans Blazor, considérez Apprendre les principes fondamentaux de la manipulation de la forme dans Blazor.

Lorsque vous utilisez le rendu statique du serveur pour les formulaires (pas de modes d’interactivité), offrant une valeur pour le FormName la propriété est requise.

Maintenant, implémentons la section Code du composant:

@code {
    [SupplyParameterFromForm]
    public SearchModel Model { get; set; } = new SearchModel();

    private bool _submitted = false;
    private string? _searchText = "";

    private void HandleSubmit()
    {
        _submitted = true;
        _searchText = Model.Search;
    }

    public class SearchModel
    {
        public string Search { get; set; }
    }
}

Nous définissons le SearchModel composé d’un seul string propriété nommée Search qui conservera la valeur fournie par l’utilisateur.

Lors de la création de l’instance du modèle, nous devons appliquer le SupplyParameterFromForm attribut. Sinon, aucune valeur ne sera fournie au modèle lors de la soumission du formulaire à l’aide de SSR.

Dans le HandleSubmit Méthode, je définis le _submitted se déplacer vers true et fournir la valeur du modèle au _searchText champ. En conséquence, après avoir soumis le formulaire, l’utilisateur verra un texte sous le formulaire.

Lorsque l’utilisateur pénètre dans le champ de recherche et appuie sur le bouton Soumettre, la demande est traitée et le texte de confirmation apparaît à l’écran.

Semblable à la navigation de page régulière, les formulaires avec une navigation améliorée utilisent un demander la demande Pour envoyer les données sur le serveur et Blazor répare le résultat dans la page actuelle. La position de défilement reste la même.

Comment désactiver la navigation améliorée

Si vous souhaitez désactiver une navigation améliorée pour une seule navigation, vous pouvez ajouter le data-enhance-nav="false" attribut comme ceci:

<a href="customer" data-enhance-nav="false">
    GET a customer with a full page load (without enhanced navigation)
</a>

Si vous souhaitez désactiver la navigation améliorée pour une application entière, vous pouvez ajouter le script suivant au App.razor déposer:

<script>
  Blazor.start({
    ssr: { disableDomPreservation: true }
  });
</script>

Le disableDomPreservation Contrôle de la propriété Si une navigation améliorée est activée ou désactivée.

Rappel: Les formulaires ne sont pas améliorés par défaut.

Conclusion

Une navigation améliorée a été introduite dans .NET 8 avec le Application Web Blazor modèle de projet. Il offre une expérience utilisateur améliorée pour les applications en utilisant Rendu statique du serveur (SSR).

La navigation améliorée est particulièrement précieuse dans les scénarios, comme le montre cet article, où vous disposez d’un site Web principalement statique mais également de composants avec des formulaires, tels qu’un formulaire de contact sur un site Web de l’entreprise.

Tu peux accéder au code utilisé dans cet exemple sur github.

Si vous voulez en savoir plus sur le développement du blazor, vous pouvez regarder mon Cours crash gratuit du blazor sur YouTube. Et restez à l’écoute du blog Telerik pour en savoir plus Bases du blazor.