.NET 10 est arrivé : voici ce qui a changé pour Blazor

.NET 10 affine certains des aspects les plus rugueux de Blazor tout en laissant les fondamentaux intacts.

.NET 10 vient d’arriver, et avec lui quelques changements pour Blazor. Mais qu’est-ce qui a changé et quel impact cela aura-t-il sur vos projets ?

Voici un aperçu rapide des fonctionnalités nouvelles et modifiées à surveiller si vous envisagez de procéder à une mise à niveau.

État du composant persistant

Il s’agit probablement du changement le plus important et le plus impactant.

• L’état persistant peut désormais être configuré à l’aide du nouveau PersistentState attribut.
• Il peut être utilisé pour partager des données entre des rendus interactifs.
• Il peut également restaurer automatiquement l’état des composants des utilisateurs lorsqu’ils se connectent à un nouveau circuit.

Préchargement : correction du redoutable « flash » des données

Vous utilisez peut-être le prérendu pour vos applications Blazor. Le prérendu est activé par défaut et permet à vos utilisateurs d’obtenir une première réponse rapide et rapide lorsqu’ils arrivent sur votre site. (Cela aide également les moteurs de recherche à l’indexer.)

Mais ce prérendu crée un problème délicat. Si vous effectuez le rendu d’un composant de manière interactive, avec le prérendu activé, votre composant est initialisé et rendu deux fois.

Si vous récupérez ensuite des données dans votre composant, ces données seront également récupérées deux fois (une fois lors du prérendu, et de nouveau lors du rendu interactif de votre composant).

Cela crée un « flash » visible lorsque les données apparaissent brièvement, puis disparaissent, pour être remplacées par les données qui ont été récupérées une deuxième fois.

Voici un exemple de page qui récupère les coordonnées.

Nous pouvons changer cela en utilisant l’état persistant.

Il s’agit d’un mécanisme par lequel vous pouvez récupérer ces données du premier rendu et les réutiliser pour le deuxième rendu (résolvant ainsi le problème d’état clignotant et réduisant de moitié le nombre de requêtes adressées à votre base de données).

La nouveauté de .NET 10 est un attribut pratique qui peut le faire pour vous, pour toutes les données que vous souhaitez conserver et réutiliser de cette façon.

[PersistentState]
public List<Contact>? Contacts { get; set; }

Avec cela, le Contacts les données seront récupérées une fois pendant le prérendu, mais ensuite conservées par Blazor.

Cela se fait en fait en sérialisant les données et en les incorporant dans le code HTML renvoyé au navigateur. Blazor peut ensuite récupérer cet état et l’utiliser lors du rendu interactif.

Vous pouvez également conserver l’état lorsque les utilisateurs perdent leur connexion au serveur

Mais PersistentState a aussi un autre tour dans son sac.

Imaginez que vous ayez une sorte d’état de l’interface utilisateur, comme les options de tri que l’utilisateur a choisies pour une grille affichant une liste de contacts.

Vous pouvez imaginer un scénario dans lequel l’utilisateur choisit de trier les contacts par nom, par ordre décroissant, puis s’en va préparer une tasse de thé. À leur retour, leur connexion au serveur a été perdue.

Blazor se reconnectera automatiquement mais… catastrophe ! Ils ont perdu leur ordre de tri.

En effet, cet état était initialement sur un circuit, mais au moment où ils revenaient de leur pause thé, Blazor avait abandonné ce circuit et leur en avait donné un nouveau. Leurs contacts sont donc revenus à leur ordre de tri d’origine.

PersistentState peut également aider à résoudre ce problème.

Lorsque vous décorez des propriétés avec le PersistentState attribut, il signale désormais à Blazor de prendre cet état et de le conserver en mémoire lorsqu’un circuit est expulsé.

[PersistentState]
public ContactSortState? SortState { get; set; }

Ensuite, lorsque le navigateur de l’utilisateur se reconnecte au serveur et qu’un nouveau circuit est émis, Blazor peut automatiquement restaurer cet état.

De plus, si vous activez HybridCache pour votre application, il sera d’abord conservé en mémoire, puis dans un deuxième cache (par exemple, vous souhaiterez peut-être utiliser un cache Redis).

Améliorations de la validation

Le système de validation de Blazor a été mis à jour. Il y a ici deux améliorations notables :

• Validation des types imbriqués
• Attributs de validation pour des objets entiers (classes ou enregistrements)

Le validateur DataAnnotations gère désormais les types imbriqués

Dans les versions précédentes de .NET, si vous aviez un modèle de formulaire avec une propriété imbriquée comme celle-ci :

public class NewContactForm
{
    public Contact Contact { get; set; }
    public string? Honeypot { get; set; }
}

public class Contact
{
    public int Id { get; set; }
    [Required]
    public string Name { get; set; }
    [Required]
    public string Email { get; set; }
    public string Phone { get; set; }
    public string Company { get; set; }
    public string Role { get; set; }
}

Puis j’ai essayé de l’utiliser dans un EditForm avec le DataAnnotations validateur, les propriétés dans le Contact l’objet ne déclencherait pas la validation.

Dans .NET 10, vous pouvez l’activer avec quelques ajustements.

Vous devrez d’abord enregistrer le nouveau système de validation dans Program.cs.

builder.Services.AddValidation();

Ensuite, vous pouvez décorer votre type de niveau racine (NewContactForm dans ce cas) avec le [ValidatableType] attribut.

Attributs de validation pour des classes ou des enregistrements entiers

Les attributs de validation vous permettent de créer une logique personnalisée sur la manière dont un champ doit être validé, mais auparavant, ils étaient limités à des propriétés individuelles.

Vous pouvez maintenant utiliser un ValidationAttribute avec une classe ou un enregistrement.

Par exemple, voici un exemple (artificiel !) de logique de validation qui tente de vérifier le comportement « de type robot » dans un formulaire.

public class NoBotAttribute : ValidationAttribute
{
    protected override ValidationResult? IsValid(object? value, ValidationContext _)
    {
        var botWarningSigns = 0;
        if (value is not NewContactForm registration)
            return new ValidationResult("Invalid registration data.");
        
        if (!string.IsNullOrEmpty(registration.Honeypot))
        {
            botWarningSigns += 1;
        }

        
        return botWarningSigns >= 1
            ? new ValidationResult("Bot-like behavior detected!")
            : ValidationResult.Success;
    }
}

Cela vérifie si l’entrée du formulaire inclut un champ pour un champ « pot de miel » (une saisie de texte masquée qu’un humain ne remplirait généralement pas).

Nous pouvons ensuite appliquer cela à notre NewContactForm classe.

using BestPartsDemo.Models;

namespace BestPartsDemo.Components.Pages.Contacts;

[NoBot]
[ValidatableType]
public class NewContactForm
{
    public Contact Contact { get; set; }
    public string? Honeypot { get; set; }
}

Et maintenant, nous aurons l’erreur de validation si un utilisateur remplit ce champ (caché).

Améliorations de la navigation

Il y a quelques améliorations notables dans la navigation et les liens de navigation.

Voici quelques faits saillants :

• Pages d’erreur 404 plus facilement configurées
• Plus intelligent NavLink correspondance d’itinéraire

Nouvel attribut NotFoundPage pour le routeur

Vous pouvez désormais configurer quel composant doit être affiché en cas de tentative de navigation vers une page inexistante dans Blazor, en utilisant le nouveau NotFoundPage attribut dans votre Routes.razor déposer.

<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
    <Found Context="routeData">
        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)"/>
    	...
    </Found>
</Router>

Notez que vous devrez peut-être également inclure cette ligne dans Program.cs afin que cela fonctionne également dans tous les scénarios (tels que le rendu statique côté serveur).

app.UseStatusCodePagesWithReExecute("/not-found", createScopeForStatusCodePages: true);

Le composant NavLink obtient de nouvelles intelligences

Auparavant, lorsque vous utilisiez le NavLink composant, sa logique de correspondance prendrait en compte les valeurs de chaîne de requête (et les fragments). Cela signifiait effectivement que les liens de navigation étaient rompus lorsque vous utilisiez la chaîne de requête.

Si tu avais un NavLink qui devrait être actif lorsque quelqu’un a visité la page d’accueil de votre application, mais s’est retrouvé sur votre page d’accueil avec une valeur de chaîne de requête de ?broken=1 (par exemple), le NavLink ne s’allumerait pas (n’obtiendrait pas son active classe CSS).

Désormais, par défaut, la chaîne de requête sera ignorée.

Parallèlement à cela, vous pouvez implémenter votre propre logique de correspondance dans un NavLink classe.

public class ContactsNavLink : NavLink
{
    protected override bool ShouldMatch(string uriAbsolute)
    {
        return uriAbsolute.Contains("/contacts");
    }
}

Ici, si le URI contient /contactsle NavLink sera considéré comme actif.

Modal de reconnexion personnalisable

Le code source du modal de reconnexion Blazor Server est désormais inclus dans les nouveaux projets Blazor Web App.

Si vous incluez un ReconnectModal composant et le restituer dans votre application, il sera utilisé de préférence à celui par défaut.

Par défaut, vous constaterez que ce composant est rendu dans App.razor.

<body>
<Routes/>
<ReconnectModal/>
<script src="https://www.telerik.com/blogs/@Assets["_framework/blazor.web.js"]"></script>
</body>

Nouvelles API pour contrôler les connexions au serveur Blazor

Il existe de nouveaux appels JavaScript que vous pouvez utiliser pour suspendre et reprendre les circuits Blazor Server.

Par exemple, vous souhaiterez peut-être détecter le moment où l’utilisateur quitte votre site (vers un autre onglet) et met son circuit en pause à ce stade, puis le reprend à son retour.

document.addEventListener('visibilitychange', ()=> {
    if(document.hidden) {
        console.debug("Document hidden - pausing Blazor");
        Blazor.pauseCircuit();
    } else {
        console.debug("Document visible - resuming Blazor");
        Blazor.resumeCircuit();
    }
});

Scripts Blazor avec empreintes digitales et compressés

Les scripts Blazor sont désormais servis comme un actif Web statique avec compression et empreinte digitale automatiques.

Cela signifie qu’ils obtiendront des noms de fichiers uniques en fonction de leur contenu (ce qui garantira que les utilisateurs obtiendront toujours la dernière version) et que la compression prendra le relais. blazor.web.js script en baisse d’environ 76%.

<script src="https://www.telerik.com/blogs/@Assets["_framework/blazor.web.js"]"></script>

Le script Blazor utilisé pour Blazor WASM est également pris en compte et compressé.

Pour les applications autonomes Blazor WASM, il en va de même, bien que le mécanisme soit légèrement différent.

Ici vous pouvez voir le [.{fingerprint}].js espace réservé. Celui-ci sera remplacé lors de la création/publication de l’application, à condition que le OverrideHtmlAssetPlaceholders la propriété est définie sur trey dans le .csproj pour le projet.

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
  <PropertyGroup>
    <TargetFramework>net10.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
+   <OverrideHtmlAssetPlaceholders>true</OverrideHtmlAssetPlaceholders>
  </PropertyGroup>
</Project>

Nouvelles mesures pour Blazor

Il existe une multitude de nouvelles métriques à intégrer dans .NET 10. Un bon endroit pour les visualiser est d’utiliser MS Aspire.

Voici comment vous pouvez les activer via votre ServiceDefaults projet pour Aspire (métriques et traçage).

builder.Services.AddOpenTelemetry()
        .WithMetrics(metrics =>
        {
            metrics.AddAspNetCoreInstrumentation()
                .AddHttpClientInstrumentation()
                .AddRuntimeInstrumentation()
                .AddMeter("Microsoft.AspNetCore.Components")
                .AddMeter("Microsoft.AspNetCore.Components.Lifecycle")
                .AddMeter("Microsoft.AspNetCore.Components.Server.Circuits");
        })
        .WithTracing(tracing =>
        {
            tracing.AddSource(builder.Environment.ApplicationName)              
                .AddSource("Microsoft.AspNetCore.Components")
                .AddSource("Microsoft.AspNetCore.Components.Server.Circuits")
                .AddHttpClientInstrumentation();
        });

Notez que les nouveaux sont tous ceux qui commencent par Microsoft.AspNetCore.Components.

Avec cela, vous verrez ces mesures s’allumer dans Aspire.

Autres améliorations notables

Bien que ce soient quelques-uns des points forts, il existe de nombreux autres changements pour Blazor dans .NET 10.

Voici une liste de quelques-uns des autres changements notables que vous pourrez explorer à votre guise !

• Exemples de sécurité d’applications Web nouveaux et mis à jour
• Détecter par programme quand NotFound déclenché (et déclencher par programme un 404)
• Nouvelles fonctionnalités JS Interop (appel des constructeurs et propriétés de classe JS)
• Option pour désactiver les exceptions de navigation lors de la navigation pendant le rendu statique
• La navigation vers la même page ne réinitialise plus la position de défilement du navigateur

Tu peux téléchargez .NET 10 de Microsoft ici.

Vous utilisez Visual Studio ? cette version est compatible avec Visual Studio 2026, ou bien sûr vous pouvez utiliser un autre IDE tel que JetBrains Rider.

Pour en savoir plus sur les mises à jour de Progress Telerik .NET 10, lisez : Prise en charge Day-Zero pour .NET 10 dans Progress Telerik.