Démarrez avec Blazor dans Visual Studio 2022 : configurez l’environnement de développement, créez votre premier projet Blazor Server, parcourez la structure du projet et découvrez le cycle de vie du développement.
En premier article des bases de Blazor série, nous avons appris ce qu’est Blazor, ce qu’il n’est pas et comment cela fonctionne sous le capot.
Nous sommes maintenant prêts à configurer notre environnement de développement, à créer notre premier projet Blazor Server, à naviguer dans la structure du projet et à en apprendre davantage sur le cycle de vie du développement.
Configuration de Visual Studio pour le développement Blazor
Vous pouvez utiliser votre IDE préféré pour le développement Blazor. Cependant, je suggère d’utiliser Visual Studio pour la meilleure prise en charge des outils de développement Blazor.
Le Édition communautaire de Visual Studio est gratuit pour un usage personnelet vous pouvez l’utiliser pour le développement commercial des entreprises dont le chiffre d’affaires est inférieur à 1 million de dollars.
Pour une installation nouvelle ou existante de Visual Studio, assurez-vous d’avoir le ASP.NET et développement web charge de travail installée. Tout ce dont vous avez besoin pour démarrer avec le développement de Blazor est inclus dans cette charge de travail.
Créer le premier projet de serveur Blazor
Dans Visual Studio, nous créons un nouveau projet et sélectionnons le Application serveur Blazor modèle de projet.
Pour le premier projet, je suggère de sélectionner Blazor Server plutôt que Blazor WebAssembly car la structure du projet est plus simple et il sera facile de travailler avec un projet Blazor WebAssembly plus tard dans votre parcours de développement Blazor.
Nommez votre projet, sélectionnez un emplacement sur le disque dur et appuyez sur la Suivant pour accéder à la boîte de dialogue Informations supplémentaires.
Dans le Informations Complémentaires sélectionnez la version la plus récente de .NET comme framework.
Nous n’avons pas besoin d’authentification pour ce projet, mais les options prises en charge incluent les comptes individuels, le Plateforme d’identité Microsoft et l’authentification Windows. Les modèles sont utiles lorsque vous devez implémenter l’authentification.
Nous utiliserons HTTPS, n’avons pas besoin de Docker et souhaitons utiliser des instructions de niveau supérieur dans le Program.cs déposer. Vous pouvez laisser toutes les valeurs par défaut dans la boîte de dialogue et appuyer sur la touche Créer bouton et Visual Studio créera le projet pour vous.
Présentation du projet—Naviguer dans le code source
UN Projet serveur Blazor consiste en un seul projet. Bien sûr, vous pouvez ajouter des dépendances à d’autres projets .NET comme vous le pouvez avec n’importe quel autre type d’application.
Le Données Le dossier contient les types de données et les services utilisés dans les composants Blazor. Ces fichiers ne contiennent rien de spécifique à Blazor. Par exemple, le WeatherForecastService la classe ressemble à ceci :
public class WeatherForecastService
{
private static readonly string[] Summaries = new[]
{
"Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot",
"Sweltering", "Scorching"
};
public Task<WeatherForecast[]> GetForecastAsync(DateOnly startDate)
{
return Task.FromResult(Enumerable.Range(1, 5).Select(index =>
new WeatherForecast
{
Date = startDate.AddDays(index),
TemperatureC = Random.Shared.Next(-20, 55),
Summary = Summaries[Random.Shared.Next(Summaries.Length)]
}).ToArray());
}
}
Il contient un GetForecastAsync méthode qui génère aléatoirement des objets du type WeatherForecast et renvoie une liste.
Les objets généraux et les types de données utilisés pour une application Blazor peuvent également se trouver dans un projet différent et être ajoutés à l’application Blazor en tant que référence de projet. Cela aurait du sens dans un scénario où vous souhaitez partager vos objets ou services de données avec une autre application, peut-être existante.
Le partagé Le dossier contient des composants Blazor qui peuvent être utilisés sur différentes pages. Le modèle par défaut met également le MainLayout, un composant de mise en page, dans le dossier Shared. Dans mes projets, je crée un dossier dédié pour contenir tous les composants de mise en page, mais cela dépend de la préférence du développeur.
Le pages Le dossier contient des composants Blazor qui agissent comme des pages. Nous explorerons une page plus loin plus en détail.
Le wwwracine Le dossier contient des ressources statiques accessibles à partir de l’application Web en cours d’exécution. Il contient des images, des polices, des bibliothèques CSS et des définitions CSS personnalisées.
Le dossier racine du projet contient les fichiers suivants :
- _Imports.razor: Ce fichier contient tous utiliser des instructions qui importent des espaces de noms disponibles dans tous les composants Blazor. Outre les espaces de noms ASP.NET Core, il inclut également deux instructions using pour les espaces de noms spécifiques au projet.
- App.rasoir: Ce fichier contient les Routeur définition. Le routage se fait par convention dans Blazor. Nous n’avons pas besoin d’ajouter une entrée pour chaque route que nous voulons créer. Cependant, vous pouvez spécifier la mise en page par défaut pour les pages existantes et un itinéraire pour les pages qui n’existent pas. Pour la plupart des projets débutants, nous ne modifions pas le contenu de ce fichier.
- Programme.cs: Ce fichier contient le code ASP.NET Core requis pour démarrer une application .NET. Ici, vous enregistrez des services dans le conteneur d’injection de dépendances, ajoutez un middleware, configurez le routage et démarrez éventuellement l’application.
Démarrer l’application Blazor pour la première fois
Avant d’examiner de plus près les composants et les pages de Blazor, commençons l’application pour avoir un aperçu des fonctionnalités offertes par l’application. Dans Visual Studio, vous pouvez utiliser F5 pour lancer l’application.
Visual Studio démarre un serveur Web local et sert l’application à partir d’un port local.
L’application a une mise en page à deux colonnes définie dans le MainLayout.razor déposer. Le menu contient des liens vers les trois pages, la page Index, la page Compteur et la page FetchData.
Le Récupérer des données menu nous amène à la page FetchData qui contient un tableau à quatre colonnes et les données du WeatherData classe vue plus haut.
Qu’est-ce qui fait d’un composant Blazor une page ?
Blazor utilise les directives comme un outil intelligent pour simplifier le développement. Les directives commencent par un @ symbole suivi du nom de la directive. Regardons le Pages/FetchData.razor composant.
@page "/fetchdata"
@using BlazorDemo.Data
@inject WeatherForecastService ForecastService
Le @page définit de manière déclarative le composant comme une page. Il ajoute également la page au routeur et la rend accessible à l’aide de l’URL définie comme argument de la directive page.
Le @en utilisant La directive nous permet d’importer des espaces de noms que nous pouvons utiliser dans l’ensemble du composant. Par exemple, le FetchData composant utilise le BlazorDemo.Data espace de noms contenant les objets de données définis dans le dossier /Data du projet.
Le @injecter La directive fournit une instance d’un type à partir du conteneur de dépendances. C’est le mécanisme d’injection de dépendances pour les composants Blazor. Dans cet exemple, nous injectons le WeatherForecastService tapez et rendez l’instance créée disponible dans l’ensemble du composant en tant que ForecastService variable.
<PageTitle>Weather forecast</PageTitle>
Le PageTitle component est un composant et non une directive. Cependant, il est tout aussi utile. Il nous permet de définir facilement le titre de la page affiché dans l’onglet ou la fenêtre du navigateur.
Modification d’un composant Blazor
Nous ouvrons le FetchData.razor fichier pour modifier le composant Blazor.
Explorons d’abord la structure d’un Composant Blazor. La section de modèle utilise du HTML simple avec des extraits de code C#. Le code C# commence toujours par un symbole @.
@if (forecasts == null)
{
<p><em>Loading...</em></p>
}
else
{
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
@foreach (var forecast in forecasts)
{
<tr>
<td>@forecast.Date.ToShortDateString()</td>
<td>@forecast.TemperatureC</td>
<td>@forecast.TemperatureF</td>
<td>@forecast.Summary</td>
</tr>
}
</tbody>
</table>
}
Par exemple, le sinon vérifie si les données sont chargées. S’il y a des données, le composant affiche le tableau HTML, ou bien le texte « Loading… ».
@code {
private WeatherForecast[]? forecasts;
protected override async Task OnInitializedAsync()
{
forecasts = await ForecastService.GetForecastAsync(
DateOnly.FromDateTime(DateTime.Now));
}
}
Sous la section de modèle se trouve un bloc de code introduit avec un @code directif. Il contient la classe C# qui sauvegarde le modèle du composant. Nous pouvons définir des variables accessibles dans le modèle, telles que le forecasts variables dans cet exemple.
La classe C# utilise méthodes de rappel pour accrochez-le dans le cycle de vie d’un composant Blazor. Cet exemple utilise le OnInitializedAsync méthode pour exécuter du code pour charger des données à partir d’un service lorsque le composant a été initialisé.
Comme vous pouvez le voir, le mécanisme de liaison est très convivial pour les développeurs. Nous pouvons utiliser la variable précédé d’un symbole @ dans un bloc de code du modèle. Par exemple, on voit le foreach qui parcourt tous les éléments de prévision, et pour chaque élément, il ajoute une ligne au tableau HTML.
Nous pouvons également utiliser des méthodes sur les propriétés des objets de données, telles que le ToShortDateString pour formater la sortie.
Utilisation du rechargement à chaud .NET
Alors que les applications Web d’une seule page démarrent généralement très rapidement au début du projet, elles prennent souvent plus de temps avec chaque composant et chaque page ajoutée.
Heureusement, basé sur la plate-forme .NET, nous pouvons utiliser Rechargement à chaud .NET lorsque vous travaillez avec des composants Blazor.
Par exemple, vous pouvez commenter l’une des colonnes du tableau des FetchData composant, et utilisez l’icône de flamme dans la barre d’outils de Visual Studio ou appuyez sur le raccourci clavier ALT+F10 pour exécuter le rechargement à chaud .NET.
Lors de l’utilisation de .NET Hot Reload, l’application continue de s’exécuter et le Les DLL sont corrigées au moment de l’exécution. Vous pouvez voir immédiatement les modifications reflétées dans le navigateur Web.
Il permet un développement rapide car le cycle de vie du développeur est très court.
Cependant, sachez que toutes les opérations ne sont pas prises en charge pour le moment. Selon le changement, il se peut que vous ayez encore besoin de redémarrer l’application de temps en temps. Mais c’est certainement un énorme gain de temps dans le développement quotidien des composants Blazor.
Source link