Blazor 0.7.0 est maintenant disponible! Cette mise à jour se concentre sur les ADR (relations ancêtre-descendant). De plus, nous avons ajouté quelques améliorations au processus de débogage. Plus de détails sous la coupe!
Un peu sur Blazor: un framework pour les applications de navigateur écrit en .NET et lancé à l'aide de WebAssembly. Il vous offre tous les avantages des applications modernes d'une seule page (SPA), tout en vous permettant d'utiliser .NET du début à la fin, jusqu'au code commun sur le serveur et le client. [
1 ]
Une petite introduction ou "Qu'est-ce que Blazor?" .
Voici les nouveautés de Blazor 0.7.0:
- Valeurs et paramètres en cascade
- Améliorations du débogage
Une liste complète des changements dans cette version peut être trouvée dans les
notes de publication de Blazor 0.7.0 .
Obtenez Blazor 0.7.0
Installez les éléments suivants:
- SDK .NET Core 2.1 (2.1.500 ou version ultérieure).
- Visual Studio 2017 (15.9 ou version ultérieure) avec ASP.NET.
- La dernière extension Blazor Language Services de Visual Studio Marketplace.
- Modèles Blazor sur la ligne de commande:
dotnet new -i Microsoft.AspNetCore.Blazor.Templates
Vous pouvez trouver des instructions, des documents et des manuels pour Blazor sur
blazor.net .
Mettre à niveau un projet existant vers Blazor 0.7.0
Pour mettre à niveau le projet Blazor 0.6.0 vers 0.7.0:
- Définissez les conditions préalables répertoriées ci-dessus.
- Mettez à jour vos packages Blazor et les références de l'outil CLI .NET à la version 0.7.0. Le fichier de projet Blazor mis à jour devrait ressembler à ceci:
<Project Sdk="Microsoft.NET.Sdk.Web"> <PropertyGroup> <TargetFramework>netstandard2.0</TargetFramework> <RunCommand>dotnet</RunCommand> <RunArguments>blazor serve</RunArguments> <LangVersion>7.3</LangVersion> </PropertyGroup> <ItemGroup> <PackageReference Include="Microsoft.AspNetCore.Blazor.Browser" Version="0.7.0" /> <PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="0.7.0" /> <DotNetCliToolReference Include="Microsoft.AspNetCore.Blazor.Cli" Version="0.7.0" /> </ItemGroup> </Project>
Ça y est! Vous pouvez maintenant évaluer les dernières fonctionnalités de Blazor.
Valeurs et paramètres en cascade
Les composants Blazor peuvent accepter des paramètres qui peuvent être utilisés pour transférer des données vers le composant et affecter le rendu du composant. Les valeurs des paramètres sont fournies du composant parent au composant enfant. Parfois, cependant, il n'est pas pratique de transférer des données d'un composant ancêtre vers un composant descendant, surtout lorsqu'il y a plusieurs couches entre elles. Les valeurs et paramètres en cascade résolvent ce problème en fournissant un moyen pratique pour un composant ancêtre de fournir une valeur qui est ensuite disponible pour tous les composants descendants. Ils fournissent également un excellent moyen de coordonner les composants.
Par exemple, si vous souhaitez fournir des informations sur un sujet pour une partie spécifique de votre application, vous pouvez passer les styles et classes appropriés d'un composant à l'autre, mais cela serait fastidieux et prendrait du temps. Au lieu de cela, un composant parent générique peut fournir des informations de rubrique en tant que valeur en cascade que les descendants peuvent accepter en tant que paramètre en cascade, puis utiliser selon les besoins.
Supposons que la classe
ThemeInfo transmette toutes les informations sur un sujet que vous souhaitez transmettre à travers la hiérarchie des composants afin que tous les boutons de cette partie de votre application aient la même apparence:
public class ThemeInfo { public string ButtonClass { get; set; } }
Le composant parent peut fournir une valeur en cascade à l'aide du composant
CascadingValue . Le composant
CascadingValue encapsule une sous-arborescence de la hiérarchie des composants et définit une valeur unique qui sera disponible pour tous les composants de cette sous-arborescence. Par exemple, nous pourrions spécifier des informations de rubrique en tant que paramètre en cascade pour tous les composants qui composent le corps de présentation:
@inherits BlazorLayoutComponent <div class="sidebar"> <NavMenu /> </div> <div class="main"> <div class="top-row px-4"> <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a> </div> <CascadingValue Value="@theme"> <div class="content px-4"> @Body </div> </CascadingValue> </div> @functions { ThemeInfo theme = new ThemeInfo { ButtonClass = "btn-success" }; }
Pour utiliser des valeurs en cascade, les composants peuvent déclarer des paramètres en cascade à l'aide de l'attribut [CascadingParameter]. Les valeurs en cascade sont liées aux paramètres en cascade par type. Dans l'exemple suivant, le composant Counter est modifié pour avoir un paramètre en cascade qui se lie à la valeur en cascade de ThemeInfo, qui est ensuite utilisée pour définir la classe du bouton.
@page "/counter" <h1>Counter</h1> <p>Current count: @currentCount</p> <button class="btn @ThemeInfo.ButtonClass" onclick="@IncrementCount">Click me</button> @functions { int currentCount = 0; [CascadingParameter] protected ThemeInfo ThemeInfo { get; set; } void IncrementCount() { currentCount++; } }
Lorsque nous lançons l'application, nous constatons qu'un nouveau style est appliqué:
Les options en cascade permettent également aux composants d'interagir dans une hiérarchie de composants. Par exemple, supposons que vous ayez un composant TabSet qui contient plusieurs composants Tab:
<TabSet> <Tab Title="First tab"> <h4>First tab</h4> This is the first tab. </Tab> @if (showSecondTab) { <Tab Title="Second"> <h4>Second tab</h4> You can toggle me. </Tab> } <Tab Title="Third"> <h4>Third tab</h4> <label> <input type="checkbox" bind=@showSecondTab /> Toggle second tab </label> </Tab> </TabSet>
Dans cet exemple, les composants enfants Tab ne sont pas explicitement passés en tant que paramètres au TabSet. Au lieu de cela, ils font simplement partie du contenu enfant TabSet. Mais TabSet doit toujours connaître chaque onglet pour pouvoir afficher les en-têtes et l'onglet actif. Pour activer cette coordination, sans nécessiter de connexion utilisateur spécifique, le composant TabSet peut se représenter comme une valeur en cascade, qui peut ensuite être mise en correspondance par les composants du composant Tab:
Dans TabSet.cshtml:
<!-- Display the tab headers --> <CascadingValue Value=this> <ul class="nav nav-tabs"> @ChildContent </ul> </CascadingValue>
Cela permet aux composants de l'onglet parent de capturer le TabSet contenant en tant que paramètre en cascade, afin qu'ils puissent s'ajouter au TabSet et coordonner sur quel Tab est actif:
Dans Tab.cshtml:
[CascadingParameter] TabSet ContainerTabSet { get; set; }
Découvrez l'exemple TabSet complet
ici .
Améliorations du débogage
Dans Blazor 0.5.0, nous avons ajouté la prise en charge du
débogage des applications clientes Blazor dans le navigateur . Bien que cette expérience ait démontré que le débogage d'applications .NET dans un navigateur est possible, ce fut une expérience assez dangereuse. Vous pouvez désormais installer et supprimer les points d'arrêt de manière plus fiable et la fiabilité du débogage étape par étape a été améliorée.
