Blazor est un cadre pour construire des interfaces web interactives de clients utilisant .NET :
- Utilisez C# au lieu de JavaScript pour créer une interface utilisateur riche et interactive.
- Partagez la logique des applications côté serveur et côté client écrite en .NET.
- Affichez l’interface utilisateur en HTML et CSS pour prendre en charge de nombreux navigateurs, y compris les navigateurs mobiles.
Blazor est un framework web conçu pour fonctionner côté client dans un navigateur sur un runtime .NET basé sur WebAssembly (Blazor WebAssembly) ou côté serveur dans ASP.NET Core (serveur Blazor). Pour tout modèle managé, les modèles d’application et de composants sont identiques.
Serveurs Blazor
Utilisez le modèle d’hébergement serveur Blazor pour exécuter des applications sur le serveur depuis ASP.NET applications Core.Les mises à jour de l’interface, la gestion des événements et les appels JavaScript sont effectués viaSignalRLiens avec le processus。
Le modèle d’hébergement serveur Blazor offre les avantages suivants :
- La taille du téléchargement est nettement plus petite que celle de l’application Blazor WebAssembly, et l’application se charge beaucoup plus rapidement.
- Les applications peuvent tirer pleinement parti des capacités serveur, y compris en utilisant n’importe quelle API compatible .NET Core.
- .NET Core sur le serveur sert à faire tourner l’application, donc les outils .NET existants comme le débogage fonctionnent comme prévu.
- Les clients légers sont pris en charge. Par exemple, l’application serveur Blazor convient aux navigateurs qui ne supportent pas WebAssembly et aux appareils à ressources limitées.
- La base de code .NET/C# de l’application, qui inclut le code composant de l’application, ne fonctionne pas sur le client.
L’hébergement de serveurs Blazor présente les inconvénients suivants :
La latence est généralement plus élevée. Chaque interaction utilisateur implique un saut de réseau.
Le travail hors ligne n’est pas pris en charge. Si la connexion client tombe en panne, l’application cesse de fonctionner.
Si vous avez plusieurs utilisateurs, il y a des défis en termes de scalabilité des applications. Le serveur doit gérer plusieurs connexions clients et gérer l’état du client.
ASP.NET serveurs centraux sont nécessaires pour servir l’application. Les scénarios de déploiement serverless ne sont pas réalisables (par exemple, servir les applications via un CDN).
Début du tutoriel :
1. D’abord, créer un nouveau projet Blazor App en utilisant vs2019, comme indiqué ci-dessous :
2. Créer un nouveau composant Razor avec le code suivant :
Nous avons besoin du package SkiaSharp pour générer le captcha base64 et l’installer via nuget :
3. Lancer le projet, visiter :La connexion hyperlientérée est visible.
Le code html généré ressemble à ceci :
< !DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8 » />
<méta nom="viewport » content="width=largeur-de-dispositif, initial-scale=1,0 » />
<title>BlazorApp1</title>
<base href="/ » />
<lien rel="feuille de style » href="css/bootstrap/bootstrap.min.css » />
<lien href="css/site.css » rel="feuille de style » />
</head>
<body>
<app>
<!--Blazor :{"sequence » :0,"type » :"server »,"prerenderId » :"19210eabb9054fe79ea7cc3e6f501df5 »,"descriptor » : "CfDJ8G8mpuBWCflCst2FMatPfBxQE\u002Br1dzwAAKPTr0QFhEikdvN38F\u002BP7DcVOKo\u002BPF9p1ZAgdir\u002BYdhFqRpzbwsqEap4xG3gpcMVtLX2yGCGhOnh596O6KcFICrjAZGk82Q2lVu\ u002B94jRo6qJ9JgxrjzuAOxLvrXBlFoGwTssxsHOI2qoQHGwlv\u002BA\u002BGsyaTjfxZ8DAgqAuiwaHynCg0J18d/VUh8brr9FrMe91kKCVw0OLUVRjCXK0FXGvXPYKjEIuE9FY5w3EvO17tJJ/ 9LpOKmqEeYpk6FlOPeuviBB1LhHBrzycchpZAb8eNGY51tN5Gjcqf/uNOMHZYLXoxjj6bmug/62JJvaQ62OrFNqIJw6S730"}-->
<div class="sidebar">
<div class="top-row pl-4 navbar navbar-dark">
<a class="navbar-brand » href>BlazorApp1</a>
<button class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse">
<ul class="nav flex-column">
<li class="nav-item px-3">
<a href=" » class="nav-link">
<span class="oi oi-home » aria-hidden="true"></span> Home
</a>
</li>
<li class="nav-item px-3">
<a href="compteur » class="nav-link">
<span class="oi oi-plus » aria-hidden="true"></span> Compteur
</a>
</li>
<li class="nav-item px-3">
<a href="fetchdata » class="nav-link">
<span class="oi oi-list-rich » aria-hidden="true"></span> Fetch data
</a>
</li>
</ul>
</div>
</div>
<div class="main">
<div class="top-row px-4">
<a href="https://docs.microsoft.com/aspnet/ » target="_blank">À propos</a>
</div>
<div class="content px-4">
<h3>Vérification</h3>
<p>
(Blazor) Un exemple pour montrer le code de vérification et le vérifier.
</p>
<img style="border :solid 1px #ccc » src="data :image/jpeg ;base64,.... » />
<button>Renouveler</button>
<hr>
<div>Tapez le nombre dans l’image</div>
<form>
<input type="text » style="padding :5px » />
<button>Vérifié</button>
</form>
<hr>
<button>TestClick</button>
</div>
</div>
<!--Blazor :{"prerenderId » :"19210eabb9054fe79ea7cc3e6f501df5"}-->
</app>
<div id="blazor-error-ui">
Une exception non prise en charge s’est produite. Consultez les outils de développement du navigateur pour plus de détails.
<a href=" » class="reload">Reload</a>
</div>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
Essayez de cliquer sur le bouton, le déclencheur de l’événement du bouton est communiqué via SignalR, qui est basé sur websocket, polling, etc., comme montré dans la figure ci-dessous :
Liens de référence :
La connexion hyperlientérée est visible.
|
Publié sur 07/04/2020 11:15:36
|
|
|
|
Propriétaire|
Publié sur 07/04/2020 11:45:47
|
Publié sur 15/11/2022 10:51:42
|
