L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Dernières améliorations de Blazor avant .NET 6
Avec .NET 6 qui approche à grands pas, Microsoft a publié ses versions préliminaires finales du framework (RC1 et RC2). Voyons ce qu'ils apportent.
Si proches de RTM, les versions RC sont principalement destinées à détecter les bogues de dernière minute et à peaufiner les performances, mais dans ce cas, nous avons également quelques nouvelles fonctionnalités de Blazor qui valent la peine d'être signalées.
Voici les points saillants :
Colloquez JavaScript avec vos composants
Si vous avez déjà passé plus de quelques minutes à rechercher du code, essayant désespérément de localiser la ligne que vous devez modifier, vous connaissez l'importance de rester lié logique ensemble.
À partir de RC1, vous pouvez placer le code JavaScript de votre composant juste à côté du composant lui-même, en utilisant la convention de dénomination
Par exemple, si votre fonctionnalité réside dans Pages/Panel.razorvous pouvez créer un fichier JavaScript sur Pages/Panel.razor.js.
Pages/Panel.razor.js
export fonction erreur(){
alerte('oops, une erreur ');
}
Ensuite, référencez-le dans votre composant :
Panel.razor
var js = await JS.InvokeAsync<IJSObjectReference>("import", "./Pages/Panel.razor .js");
wait module.InvokeVoidAsync("error");
Avec ceci et la prise en charge de l'isolation CSS existante vous pouvez désormais regrouper tous les actifs de votre composant au même endroit :
- Pages/Panel.razor
- Pages/Panel.razor.js
- Pages /Panel.razor.css
Manipuler la chaîne de requête
Preview 7 a ajouté la possibilité de renseigner les paramètres de composant à partir de la chaîne de requête.
RC1 ajoute la possibilité d'aller dans l'autre sens – pour mettre à jour facilement la chaîne de requête à partir de vos composants Blazor.
var nouveau Uri = NavigationManager.GetUriWithQueryParameter("searchTerm", "Blazor");
NavigationManager.NavigateTo(newUri);
La première ligne crée un nouvel Uri avec searchTerm=Blazor dans la chaîne de requête ( ajouté s'il n'y était pas auparavant, mis à jour s'il l'était).
La deuxième ligne navigue ensuite vers le nouvel Uri (y compris cette chaîne de requête).
GetUriWithQueryParameters permet de mettre à jour plusieurs paramètres à la fois (en passant un dictionnaire de valeurs de paramètres).
var newUri = NavigationManager.GetUriWithQueryParameters(new Dictionary[19659065]<string, object?>
{
["searchTerm"] = "Blazor ",
["pageTaille"] = 20,
["page"] =[19659082]2
});
NavigationManager.NavigateTo(newUri);
PageX et PageY sont maintenant disponibles dans MouseEventArgs
Je suppose, si vous avez déjà essayé d'utiliser MouseEventArgs dans Blazor, vous avez remarqué l'omission des propriétés PageX et PageY.
Eh bien, il semble qu'elles aient maintenant été ajoutées (dans RC1).
Rendu des composants Blazor à partir de votre code JavaScript
RC1 offre la possibilité de rendre des composants Blazor à partir de JavaScript.
Cela peut être utile si vous disposez d'une application JavaScript existante et que vous devez la migrer progressivement vers Blazor.[19659101] Rassemblez-vous avec Blazor
Vous pouvez enregistrer n'importe quel composant "pour JavaScript", lui donner un identifiant, puis utiliser cet identifiant pour restituer le composant à partir de JavaScript.
Voici un exemple utilisant Blazor WebAssembly.
builder. RootComponents.RegisterForJavaScript<Greeting>(identifier: "my-greeting")[19659013];
Désormais, votre composant Panel sera disponible pour le rendu à partir de JavaScript. Voici un exemple minimal :
<html>
<body>
<button onclick="addGreeting()">Salut moi</bouton>
<script>
async function addGreeting() {
let targetElement = document.getElementById[19659013]('container');
wait Blazor.rootComponents.add(targetElement, 'mon-salut', {});
}
</script>
<div id="conteneur">
</div>
<script src="_framework/blazor.webassembly.js" ></script>
</body>
</html>
Si vous devez transmettre des paramètres à votre composant, vous pouvez également le faire :
await Blazor.rootComponents.add(targetElement, 'my-salutation', { name: 'Alice' });[19659022]Une mise en garde à noter : il ne semble pas encore y avoir beaucoup de documentation sur cette fonctionnalité. Il semble probable que cela changera une fois que .NET 6 sera officiellement publié et que des exemples concrets commenceront à émerger.
Dépendances natives désormais prises en charge dans les applications Blazor WebAssembly
Comme vous le savez probablement, Blazor Wasm fonctionne sur WebAssembly.
WebAssembly lui-même est un standard ouvert que vous pouvez cibler à partir d'un certain nombre de langages, y compris C, C++ et Rust. à partir de Blazor.
RC1 résout ce problème, ce qui signifie que vous pouvez désormais utiliser des dépendances natives avec Blazor (Wasm).
Comme le note Dan Roth dans les notes de version officielles du blog ASP.NETcela signifie que vous peut interagir avec du code C/C++, ou du code compilé dans des fichiers objet (.o), des fichiers d'archive (.a), des bitcode (.bc) ou des modules WebAssembly autonomes (.wasm).
De plus, des dépendances natives à utiliser sur WebAssembly peut désormais être distribué via les packages NuGet.
Cela ouvre la porte aux bibliothèques Blazor t o interagir avec les dépendances WebAssembly existantes (et pour que ces bibliothèques soient distribuées via NuGet).
Une prise en charge expérimentale a été annoncée pour la création d'éléments HTML personnalisés avec Blazor.
En pratique, cela signifie que vous pouvez créer un composant Blazor, disons un Panel, puis l'enregistrer en tant qu'élément personnalisé.
builder.RootComponents.RegisterAsCustomElement<Panel>("panel");
À partir de là, vous pouvez ensuite utiliser ce composant panel dans un autre framework SPA (comme Angular ou React).
<panel>[19659121]</
panel>
Découvrez le Blazor Custom Elements sam ple pour plus de détails et un exemple concret de la façon de le faire et de le faire fonctionner avec React et/ou Angular.
Il a également été annoncé que des travaux étaient en cours pour permettre de générer des composants spécifiques au framework JavaScript pour votre Composants Blazor. Ceci est possible grâce à la nouvelle prise en charge du rendu des composants Blazor à partir de JavaScript.
En principe, vous pouvez ajouter des attributs à vos composants Blazor :
@attribute [GenerateReact] // Générer un composant React
Enregistrez-les en tant que composants racine :
builder.RootComponents.RegisterForReact<MyComponent>([19659013)]);
Ensuite, utilisez-les comme s'il s'agissait de n'importe quel autre composant (dans votre projet React dans cet exemple).
Il convient de noter que cette capacité n'est pas incluse avec .NET 6 et tombe apparemment dans le catégorie « début/expérimental » pour le moment. Il y a un exemple de code à explorer sur GitHub qui le montre en action.
.NET 6 est presque prêt
Lorsque les notes de version officielles commencent à pointer vers des exemples expérimentaux, les premiers .NET 6, vous savez que .NET 6 est presque prêt ! (Au cas où vous l'auriez manqué, cet article couvre les mises à jour de Blazor à noter avant les versions candidates.)
.NET 6 sera lancé dans le cadre de .NET Conf du 9 au 11 novembre.
Source link