La version candidate de .NET 8 offre une expérience Blazor plus fluide

La première des versions candidates de .NET 8 rassemble les nouvelles fonctionnalités de Blazor dans un modèle de projet unifié.

.NET 8 Release Candidate 1 est livré, et avec lui vient le meilleur aperçu de ce qui attend .NET en novembre. Voici les principaux changements apportés à cette version.

Soyez opérationnel rapidement avec le nouveau modèle de projet

Une grande partie de tout framework Web réside dans la facilité de démarrage.

.NET 8 est livré avec un nouveau modèle de projet d’application Web Blazor qui combine le rendu côté serveur avec la prise en charge des composants interactifs utilisant Blazor Server et (éventuellement) Blazor WASM.

Il permet une navigation et une gestion des formulaires améliorées par défaut : lorsque vos utilisateurs naviguent entre les pages de votre application ou soumettent des formulaires, l’API de récupération du navigateur sera utilisée (en faveur de l’exécution de publications sur une page complète). En fait, cela offre une expérience « de type SPA » même si vous n’exécutez pas réellement Blazor en tant que SPA (application d’une seule page).

Par exemple, lorsque vous soumettez un formulaire dans une nouvelle application Blazor .NET 8, la position de défilement de l’utilisateur sera conservée.

Il existe quelques nouvelles options de configuration lors du lancement d’un nouveau projet. Voici les principaux (et comment ils affectent le projet résultant).

Dans tous les cas, le projet utilise Rendu côté serveur pour les composants par défaut.

Utiliser les composants du serveur interactif

C’est true par défaut.

Une fois cette option activée, l’application Web résultante inclut la prise en charge des composants interactifs utilisant Blazor Server.

dotnet new blazor --use-server true

Cela aboutit à cette configuration (pour activer les composants du serveur).

Programme.cs

builder.Services.AddRazorComponents()
    .AddServerComponents();

...
    
app.MapRazorComponents<App>()
	.AddServerRenderMode();

Le Counter Le composant de démonstration a le RenderModeServer attribut (il s’exécutera de manière interactive à l’aide de Blazor Server) :

Contre-rasoir

@attribute [RenderModeServer]

Utiliser des composants WebAssembly interactifs

False par défaut.

Cela permet la prise en charge des composants interactifs à l’aide de Blazor WASM.

Voici la commande à utiliser pour activer WASM « exclusivement » (y compris la désactivation de la prise en charge de Blazor Server, qui est par ailleurs activée par défaut).

dotnet new blazor --use-server false --use-wasm true

Programme.cs

builder.Services.AddRazorComponents()
    .AddWebAssemblyComponents();
    
...

app.MapRazorComponents<App>()
    .AddWebAssemblyRenderMode();

Lorsque cette option est activée, votre solution aura deux projets : le projet de base plus un .Client projet.

Dans le .Client projet, Contre-rasoir comprend le RenderModeWebAssembly attribut et s’exécute de manière interactive à l’aide de Blazor WASM.

@attribute [RenderModeWebAssembly]

Utiliser les deux modes interactifs

Vous pouvez choisir d’activer la prise en charge de l’interactivité en utilisant à la fois WASM et Server.

dotnet new blazor --use-server true --use-wasm true

Programme.cs

builder.Services.AddRazorComponents()
    .AddServerComponents()
    .AddWebAssemblyComponents();

...

app.MapRazorComponents<App>()
    .AddServerRenderMode()
    .AddWebAssemblyRenderMode();

Avec cela, vous trouverez votre Counter Le composant utilise le nouveau mode de rendu automatique:

Contre-rasoir

@attribute [RenderModeAuto]

Dans ce mode, Counter utilisera Blazor Server initialement, tandis que le runtime .NET et l’ensemble d’applications sont téléchargés sur le navigateur. Lors des visites ultérieures du même composant, Auto utilisera plutôt WebAssembly.

Commencez avec un projet « vide »

Une dernière option pratique consiste à inclure ou non des exemples de pages. Cela affecte si vous obtenez le Counter, Weather composants et mise en page basés sur le style Bootstrap.

 dotnet new blazor --empty

Authentifié ? Pas encore dans le modèle

Si vous vous attendez à voir des options pour activer Auth dans le modèle de projet, vous pourriez être surpris de voir son omission dans RC1.

Selon divers commentaires d’employés de MS (et des tickets ouverts dans le dépôt officiel sur GitHub), une nouvelle option permettant d’activer Auth devrait atterrir dans RC2. Avec cela viendront plusieurs composants pour Auth. Ils interagiront avec les nouveaux points de terminaison MS Identity que vous pourrez activer lorsque vous configurerez votre projet.

Restez à l’écoute des nouvelles de RC2 lors de son arrivée en octobre.

Nouvelle présentation de la solution

Blazor a la même disposition de dossiers depuis sa création, avec un seul Pages dossier pour loger vos composants.

Cette version modifie légèrement cette structure.

Il y a maintenant un Composants dossier à la racine de votre projet. Il contient un Composants/Mise en page dossier (contenant le MainLayout et NavMenu Composants).

Il y a aussi Composants/Pages dossier qui contient les composants de page « routables » pour l’application.

App.razor est un peu plus léger dans cette version.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="BlazorApp51.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet />
</head>

<body>
    <Routes />    
</body>

</html>

Avec Blazor SSR, ce composant fait office de point d’entrée pour votre application.

Ceci est configuré dans Programme.cs:

app.MapRazorComponents<App>()
    .AddServerRenderMode()
    .AddWebAssemblyRenderMode();

Remarquez le nouveau Routes composant.

<Router AppAssembly="@typeof(App).Assembly" AdditionalAssemblies="new[] { typeof(Client._Imports).Assembly }">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(Layout.MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
</Router>

Celui-ci contient le Router pour votre application et constitue l’endroit clé où aller si vous souhaitez modifier des éléments tels que la mise en page par défaut.

Dans cet exemple, j’utilise Blazor WASM, le AdditionalAssemblies Le paramètre garantit que .NET peut acheminer les requêtes vers des composants situés dans le projet client distinct.

Cela vaut la peine d’y jeter un coup d’oeil rapide Composants/Layout/MainLayout.razor aussi:

@inherits LayoutComponentBase

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

Le changement notable est que l’interface utilisateur d’erreur Blazor par défaut se trouve désormais ici.

Rendre l’application entière interactive ?

Si vous utilisez ce nouveau modèle de projet mais souhaitez exécuter l’intégralité de votre application de manière interactive (à l’aide de WASM ou d’un serveur), vous le pouvez.

L’astuce consiste à spécifier le mode de rendu pour le HeadOutlet et Routes composants lorsqu’ils sont rendus dans App.razor.

<!DOCTYPE html>
<html lang="en">

<head>
    ...
    
    <HeadOutlet @rendermode="@RenderMode.Server"/>
</head>

<body>
    <Routes @rendermode="@RenderMode.Server"/>
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

Avec cela, nous exécutons efficacement l’intégralité de l’application à l’aide de Blazor Server (SSR ne sera utilisé pour aucune des pages).

Utiliser SSR avec des composants d’autres assemblages

Parfois, vous pouvez choisir de localiser vos composants dans un projet distinct tout en utilisant le rendu statique côté serveur pour les restituer.

Une nouvelle option de configuration permet cela dans Programme.cs:

app.MapRazorComponents<App>()
    .AddAdditionalAssemblies(typeof(Counter).Assembly);

Cet exemple suppose Counter vit dans un projet séparé (et donc assemblage).

Avec cela, vous pouvez stocker vos composants dans n’importe quel assembly tout en conservant les requêtes de routage .NET dans le cadre de votre application.

Actualiser les pages à volonté

Si vous utilisez SSR avec vos composants Blazor, vous pouvez rencontrer un scénario dans lequel vous souhaitez actualiser la page à partir du code. Vous pouvez maintenant le faire et .NET 8 tentera d’utiliser la navigation améliorée dans les pages pour effectuer l’actualisation.

Cela signifie qu’il utilisera l’API de récupération du navigateur puis « patchera » le DOM avec le HTML qui revient (pour éviter de recharger la page entière). S’il ne peut pas utiliser la navigation améliorée pour une raison quelconque, il effectuera une actualisation complète de la page.

NavigationManager.Refresh();

Grille rapide

On dirait le nouveau QuickGrid Le composant est passé inaperçu lors des versions préliminaires de .NET 8, avec peu de couverture par rapport aux autres fonctionnalités de .NET 8.

Si vous vous demandez quoi QuickGrid est et pourquoi vous l’utiliseriez, consultez les exemples officiels ici :

https://aspnet.github.io/quickgridsamples/

Il convient de noter que la grille n’est pas destinée à remplacer des grilles plus complètes (telles que l’excellent Grille Blazor), mais plutôt comme un moyen pratique et rapide d’afficher les données dans votre composant Blazor.

Améliorations du routage, configuration du runtime WASM et plus encore

Enfin, à mesure que le RTM se rapproche, .NET 8 RC1 apporte quelques améliorations petites mais essentielles.

Vérifiez notes de version officielles pour le RC ici. Ils soulignent d’autres domaines d’amélioration, à savoir :

• Le routage Blazor est désormais unifié avec le routage ASP.NET Core, qui prend en charge les segments complexes, les valeurs par défaut et les contraintes de routage supplémentaires.
• Il est désormais possible de transmettre n’importe quel paramètre de votre choix QuickGrid et il les transmettra au résultat table Élément HTML.
• Vous pouvez vérifier si un EditForm le champ est valide en utilisant EditContext.IsValid(FieldId).
• Il est désormais possible de configurer le runtime .NET WASM au démarrage à l’aide du nouveau configureRuntime fonction.
• Vous pouvez essayer le nouveau titre vif WasmStripILAfterAOT option avec vos applications Blazor WASM pour supprimer une partie du code du bundle téléchargé par le navigateur (réduit la taille de 1,7% à 4,2% dans les tests de Microsoft).

En résumé

RC1 offre les nouvelles fonctionnalités Blazor de .NET 8 et offre une expérience fiable « prête à l’emploi » lorsque vous lancez une nouvelle application Web Blazor.

Vous pouvez désormais choisir d’activer l’interactivité à l’aide de WASM ou du Serveur (ou des deux) lors de la création de vos projets. Le projet qui en résulte comprend des composants de base simplifiés (y compris le nouveau Routes composant).

Enfin, même si cette version n’inclut pas Auth dans le nouveau modèle, cela devrait être résolu dans RC2.