Pour créer votre première application .NET, vous devez installer le Kit de développement logiciel (SDK) .NET, Visual Studio Code et le Kit de développement C#.
Que sont le Kit de développement logiciel (SDK) .NET, Visual Studio Code et le Kit de développement C# ?
Le Kit de développement logiciel (SDK) .NET est une collection gratuite et open source d’outils et de bibliothèques dont vous avez besoin pour créer et exécuter des applications en C#. C# est le langage de programmation moderne orienté objet que vous utiliserez pour ce tutoriel.
Visual Studio Code (VS Code) est l’éditeur de code léger, gratuit et open source le plus populaire au monde. Voici où vous allez écrire votre code C#.
Le Kit de développement C# est un ensemble puissant d’extensions VS Code qui facilite le développement C#. Cela vous permet d’écrire, de tester et de déboguer votre code lors de la création d’applications.
Le fichier config .NET Winget installe le SDK .NET 10, VS Code et le kit de développement C# pour vous. Si l’un des éléments est déjà installé, WinGet ignore cette étape d’installation.
Pour générer votre première application .NET avec Visual Studio Code, configurez votre environnement :
Téléchargez et installez le Kit de développement logiciel (SDK) .NET :
Ouvrez VS Code et sélectionnez le bouton Extensions dans la barre d’activités de VS Code à gauche. Tapez C# dans la barre de recherche, sélectionnez Kit de développement C#, puis sélectionnez le bouton Installer sur la page d’extension du Kit de développement C#.
Télécharger et exécuter le fichier de configuration
Cliquez sur le lien suivant pour télécharger le fichier WinGet :
Ouvrez votre dossier de téléchargements et double-cliquez sur le fichier pour commencer l’installation. Si vous êtes invité à sélectionner une application pour exécuter le fichier, sélectionnez Gestionnaire de package Windows client.
Un terminal s’ouvre et vous devriez voir que le fichier de configuration WinGet est prêt à installer le SDK .NET 10, VS Code si vous ne l’avez pas, et le kit de développement C#.
Lisez le contrat de licence et acceptez-le en tapant « y » dans le terminal et en appuyant sur Entrée.
Remarque : Vous êtes responsable de la compréhension des paramètres de configuration que vous choisissez d’exécuter. Microsoft n’est pas responsable du fichier de configuration que vous avez créé ou importé. Cette configuration peut modifier les paramètres dans Windows, installer des logiciels, modifier les paramètres logiciels (y compris les paramètres de sécurité) et accepter des contrats utilisateur à des packages et services tiers en votre nom. En exécutant ce fichier de configuration, vous reconnaissez comprendre et accepter ces ressources et paramètres. Toutes les applications installées vous sont concédées sous licence par leurs propriétaires. Microsoft n’est pas responsable des packages ou services tiers et n’accorde aucune licence.
WinGet installe maintenant tout ce dont vous avez besoin pour commencer ! Le temps d’installation dépend des spécifications de votre machine, de la vitesse du réseau, etc. L’opération peut prendre jusqu’à 5 minutes, mais jusqu’à 15 minutes.
Certaines étapes d’installation peuvent nécessiter des autorisations d’administrateur pour l’installation. Soyez à l’affut des invites de contrôle de compte d’utilisateur (UAC) clignotantes dans votre de la barre des tâches Windows et cliquez sur cette icône. Pour continuer l’installation, vous devez sélectionner Oui si vous y êtes invité.
Une fois l’installation terminée, vous devriez voir la sortie ci-dessous dans le terminal.
Vérifier tous les éléments installés correctement
Maintenant que votre environnement est configuré, accédez à Rechercher dans la Barre des tâches Windows, puis tapez Visual Studio Code. Cliquez sur l’application pour ouvrir VS Code.
Une fois que vous avez configuré votre environnement, ouvrez un nouveau terminal VS Code. Dans la barre d’outils, sélectionnez Terminal, puis Nouveau terminal.
Remarque : Si vous ouvrez VS Code via un terminal, vous devez activer d’approbation d’espace de travail.
Ouvrez à présent un nouveau terminal en accédant à la barre d’outils et en sélectionnant Terminal, puis Nouveau terminal.
Dans votre terminal, exécutez la commande suivante pour vérifier votre installation.
Terminal
dotnet
Si l'installation a réussi, vous devriez voir une sortie semblable à la suivante :
Terminal
Usage: dotnet [path-to-application]Usage: dotnet [commands]path-to-application:The path to an application .dll file to execute.commands:-h|--help Display help.--info Display .NET information.--list-runtimes [--arch ] Display the installed runtimes matching the host or specified architecture. Example architectures: arm64, x64, x86.--list-sdks [--arch ] Display the installed SDKs matching the host or specified architecture. Example architectures: arm64, x64, x86.
Si tout semble correct, sélectionnez le bouton Continuer ci-dessous pour passer à l'étape suivante.
Vous avez une erreur ?
Si vous recevez un 'dotnet' n’est pas reconnu comme une erreur de commande interne ou externe, veillez à ouvrir un nouveau terminal VS Code. Si on redémarre VS Code ou on redémarre de votre machine ne résout pas le problème, utilisez le bouton I rencontré un problème pour obtenir de l’aide pour résoudre le problème.
Créez votre application
Ouvrez la palette de commandes dans VS Code en appuyant sur CTRL+MAJ+P.
Ouvrez la palette de commandes dans VS Code en appuyant sur CMD+MAJ+P.
Tapez .NET : pour afficher les commandes que vous pouvez exécuter avec le Kit de développement C# !
Recherchez et sélectionnez .NET : nouveau projet pour créer un projet .NET.
Faites défiler vers le bas et sélectionnez Blazor Web App.
Nommez le projet BlazorApp dans la palette de commandes lorsque vous y êtes invité. Appuyez sur Entrée pour confirmer.
Choose the folder location where you'd like to save your project.
If you see both .sln and .slnx files, choose the .sln file to open the full solution.
.slnx files load only part of a solution and are used in large projects. For this tutorial, using .sln ensures you have everything needed.
Click Create project to load the new BlazorApp.
Activez Approbation d’espace de travail en cochant la case et en sélectionnant Oui, je fais confiance aux auteurs.
Après activation, vous serez invité à recharger votre extension de kit de développement C#. Cliquez sur le bouton Recharger les extensions
Si vous disposez d’un abonnement à Visual Studio, connectez-vous à votre compte. Si vous ne voyez pas d’invite, cliquez sur l’icône C# dans la barre d’état de VS Code, en bas à droite de votre fenêtre.
Dans la barre latérale, assurez-vous que VS Code Explorer est ouvert. Ici, vous verrez le dossier BlazorApp et l'Explorateur de solutions.Suivez la vidéo ci-dessous pour : réduire le dossier BlazorApp, ouvrir l'Explorateur de solutions, ouvrir le projet BlazorApp et faire glisser l'Explorateur de solutions plus haut.
Réduisez le dossier BlazorApp dans l'explorateur VS Code.
Cliquez sur le chevron à gauche de l’Explorateur de solutions pour le développer.
Cliquez sur le chevron à gauche du projet BlazorApp dans l'Explorateur de solutions pour le développer.
Faites glisser et déposez l'Explorateur de solutions sous BlazorApp.
Votre projet est créé et chargé dans Visual Studio Code. Jetez un œil au contenu de votre projet à l'aide de Solution Explorer.
Plusieurs fichiers ont été créés pour vous offrir une application Blazor simple prête à être exécutée.
Program.cs est le point d'entrée de l'application qui démarre le serveur et où vous configurez les services d'application et le middleware.
Au sein du répertoire Components :
App.razor est le composant racine de l’application.
Routes.razor configure le routeur Blazor.
Le répertoire Pages contient des exemples de pages Web pour l'application.
BlazorApp.csproj définit le projet d'application et ses dépendances et peut être affiché en double-cliquant sur le nœud du projet BlazorApp dans l'explorateur de solutions.
Le fichier launchSettings.json dans le répertoire Properties définit différents paramètres de profil pour l'environnement de développement local. Un numéro de port est automatiquement attribué à la création du projet et enregistré dans ce fichier.
Si tout semble correct, sélectionnez le bouton Continuer ci-dessous pour passer à l'étape suivante.
Exécuter votre application
Sélectionnez l'icône Exécuter et déboguer dans la barre d'activité sur le côté gauche de votre espace de travail.
Pour pouvoir exécuter et déboguer, vérifiez qu’aucun fichier n’est ouvert dans l’éditeur. Sélectionnez le bouton bleu Exécuter et déboguer.
Vous devez sélectionner un débogueur. Sélectionnez C#.
Visual Studio Code ouvrira ensuite un menu de configurations de lancement. Sélectionnez C#: BlazorApp [Configuration par défaut].
Attendez que l'application se lance dans le navigateur. Une fois sur la page suivante, vous avez réussi à exécuter votre première application Blazor !
Vous pouvez arrêter l'application à tout moment en cliquant sur le bouton Arrêter dans la barre d'outils supérieure.
Pour réexécuter votre application, sélectionnez le menu déroulant à droite du bouton Exécuter en haut à droite et sélectionnez Exécuter le projet associé à ce fichier.
La page affichée est définie par le fichier Home.razor situé dans le répertoire Components/Pages. Voici à quoi ressemble son contenu :
Components/Pages/Home.razor
@page "/"<PageTitle>Home</PageTitle><h1>Hello, world!</h1>Welcome to your new app.
Il contient déjà le code qui le définit comme page d’accueil et affiche le texte Hello, world! and Welcome to your new app. Le composant PageTitle définit le titre de la page active afin qu’elle s’affiche sous l’onglet du navigateur.
Vous avez une erreur ?
Si vous recevez un message d’erreur indiquant « Votre connexion n’est pas privée » avec le code d’erreur NET::ERR_CERT_INVALID, essayez de redémarrer toutes les fenêtres du navigateur afin que le nouveau certificat puisse être récupéré par le navigateur et réexécutez l’application.
Si vous ne parvenez pas à résoudre le problème que vous rencontrez, sélectionnez le bouton J’ai rencontré un problème ci-dessous pour obtenir de l’aide pour résoudre le problème.
Essayez le compteur
Dans l'application en cours d'exécution, accédez à la page Compteur en cliquant sur l'onglet Compteur dans la barre latérale à gauche. La page suivante devrait alors s'afficher :
Sélectionnez le bouton Cliquez-moi pour augmenter le nombre sans rafraîchir la page. L'incrémentation d'un compteur dans une page Web nécessite normalement l'écriture de JavaScript, mais avec Blazor, vous pouvez utiliser C#.
Vous trouverez l’implémentation du composant Counter dans le fichier Counter.razor situé dans le répertoire Components/Pages.
Une requête pour /counter dans le navigateur, comme spécifié par la directive @page en haut, amène le composant Counter à restituer son contenu. La directive @rendermode active le rendu interactif du serveur pour le composant, afin qu’il puisse gérer les événements d’interface utilisateur à partir du navigateur.
Chaque fois que le bouton Cliquez-moi est sélectionné :
L’événement onclick est déclenché.
La méthode IncrementCount est appelée.
Le currentCount est incrémenté.
Le composant est affiché pour afficher le nombre mis à jour.
Ajouter un composant
Chacun des fichiers .razor définit un composant d'interface utilisateur qui peut être réutilisé.
Ouvrez le fichier Home.razor dans Visual Studio. Le fichier Home.razor existe déjà et il a été créé lorsque vous avez créé le projet. Il se trouve dans le dossier Components/Pages à l’intérieur du répertoire BlazorApp qui a été créé précédemment.
Ouvrez le fichier Home.razor dans un éditeur de texte de votre choix. Le fichier Home.razor existe déjà et il a été créé lorsque vous avez exécuté la commande dotnet new. Il se trouve dans le dossier Components/Pages à l’intérieur du répertoire BlazorApp qui a été créé précédemment.
Ajoutez un composant Counter à la page d’accueil de l’application en ajoutant un élément <Counter /> à la fin du fichier Home.razor.
Components/Pages/Home.razor
@page "/"<PageTitle>Home</PageTitle><h1>Hello, world!</h1>Welcome to your new app.<Counter />
Réexécutez l'application pour voir les modifications. Le composant Counter apparaîtra alors sur la page d'accueil.
Une fois cette modification enregistrée, la commande dotnet watch appliquera la modification à l'application en cours d'exécution afin que le composant Counter s'affiche sur la page d'accueil.
Modifier un composant
Les paramètres de composant sont spécifiés à l'aide d'attributs ou de contenu enfant, qui vous permettent de définir des propriétés sur le composant enfant. Définissez un paramètre sur le composant Counter pour spécifier de combien il s'incrémente à chaque clic de bouton :
Ajoutez une propriété publique pour IncrementAmount avec un attribut [Parameter].
Modifiez la méthode IncrementCount pour utiliser IncrementAmount lors de l'incrémentation de la valeur de currentCount.
Le code suivant montre comment y parvenir. Les lignes en surbrillance montrent les changements.
Dans Home.razor, mettez à jour l’élément <Counter> pour ajouter un attribut IncrementAmount qui fait passer la quantité d’incrémentation à dix, comme indiqué par la ligne en surbrillance dans le code suivant :
Components/Pages/Home.razor
@page "/"<PageTitle>Home</PageTitle><h1>Hello, world!</h1>Welcome to your new app.<Counter IncrementAmount="10" />
Appliquez la modification à l’application en cliquant sur le bouton Rechargement à chaud XAML. Le composant Home possède désormais son propre compteur qui incrémente de dix chaque fois que le bouton Cliquez-moi est sélectionné, comme illustré dans l’image suivante. Le composant Counter (Counter.razor) dans /counter continue d’augmenter de un.
Le composant Home possède désormais son propre compteur qui incrémente de dix chaque fois que le bouton Cliquez-moi est sélectionné, comme illustré dans l’image suivante. Le composant Counter (Counter.razor) dans /counter continue d’augmenter de un.
Étapes suivantes
Félicitations, vous avez créé et exécuté votre première application Blazor !
Poursuivre l’apprentissage
Maintenant que vous avez les bases, continuez à créer votre première application Blazor avec le module d'apprentissage autoguidé Blazor sur Microsoft Learn où vous créerez une application de liste de tâches.
