Créez votre première application web avec ASP.NET Core à l’aide de Blazor
Intro
Objectif
Build your first web app with ASP.NET Core using Blazor in Visual Studio Code.
Prérequis
Aucun.
macOS 12.0 ou versions ultérieures.
Durée d’exécution
10-15 minutes + temps de téléchargement/d'installation
Scénario
Créez, utilisez et modifiez un composant compteur simple.
Prefer Visual Studio or the CLI?
If you prefer, you can also get started with Blazor using Visual Studio or the command-line interface.
Télécharger et installer
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#.
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 Kit de développement logiciel (SDK) .NET 8, VS Code et le Kit de développement C# pour vous. Si un élément 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 :
Télécharger le Kit de développement logiciel (SDK) .NET 8 x64 (Intel)
Télécharger le Kit de développement logiciel (SDK) .NET 8 Arm64 (Apple Silicon)Si vous utilisez un Mac équipé d'une puce Apple M1 ou M2, vous devez installer la version Arm64 du SDK.
-
Téléchargez et installez VS Code :
-
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#.
![Kit de développement C# de VS Code]()
Cliquez sur le lien ci-dessous pour télécharger le fichier.
Ouvrez votre dossier de téléchargements et double-cliquez sur le fichier pour commencer l’installation.
Sélectionner les instructions d’installation du terminal ou de Dev Home
Après que vous avez double-cliqué sur le fichier, un terminal s’ouvre et vous voyez que le fichier config Winget est prêt à installer le Kit de développement logiciel (SDK) .NET 8, 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 : il vous incombe de comprendre les paramètres de configuration que vous choisissez d’exécuter. Microsoft n’est pas responsable du fichier config 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 pour des packages et services tiers en votre nom. En exécutant ce fichier config, vous reconnaissez que vous comprenez et acceptez 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 associée.
Winget installe maintenant tout ce dont vous avez besoin pour commencer ! Son exécution doit prendre environ 5 minutes. Une fois l’opération terminée, vous devez voir la sortie ci-dessous dans le terminal.
Après que vous avez double-cliqué sur le fichier, Dev Home s’ouvre et vous voyez que le fichier config Winget est prêt à installer le Kit de développement logiciel (SDK) .NET 8, VS Code si vous ne l’avez pas et le Kit de développement C#.
Lisez le contrat de licence et acceptez-le en cliquant sur « J’accepte et je souhaite continuer » en bas à gauche, puis sur « Configurer en tant qu’administrateur » en bas à droite. Sélectionnez « Oui » lorsque vous êtes invité à autoriser Dev Home à apporter des modifications à l’appareil.
Remarque : il vous incombe de comprendre les paramètres de configuration que vous choisissez d’exécuter. Microsoft n’est pas responsable du fichier config 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 pour des packages et services tiers en votre nom. En exécutant ce fichier config, vous reconnaissez que vous comprenez et acceptez 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 associée.
Dev Home installe maintenant tout ce dont vous avez besoin pour commencer ! Son exécution doit prendre environ 5 minutes. Une fois l’opération terminée, vous devez voir la sortie ci-dessous dans la fenêtre.
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 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.
dotnet
Si l'installation a réussi, vous devriez voir une sortie semblable à la suivante :
Usage: dotnet [options]
Usage: dotnet [path-to-application]
Options:
-h|--help Display help.
--info Display .NET information.
--list-sdks Display the installed SDKs.
--list-runtimes Display the installed runtimes.
path-to-application:
The path to an application .dll file to execute.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.
- Scroll down and select Blazor Web App.
- Choisissez l’emplacement du dossier que vous souhaitez enregistrer votre projet.
- Name the project
BlazorAppin the command palette when prompted. Press Enter to confirm.
Activez Approbation d’espace de travail en cochant la case et en sélectionnant Oui, je fais confiance aux auteurs.
Si vous avez un Visual Studio Subscription, connectez-vous à votre compte. Si vous ne voyez pas de fenêtre contextuelle d’invite, cliquez sur l’icône C# dans la barre d’état de VS Code vers le bas à droite de votre fenêtre.
In the Side Bar, make sure the VS Code Explorer is open. Here you will see the BlazorApp folder and the Solution Explorer.Follow along with the video below to: collapse the BlazorApp folder, open the Solution Explorer, open the BlazorApp project, and drag and drop the Solution Explorer higher.
- Collapse the
BlazorAppfolder in the VS Code Explorer. - Cliquez sur le chevron à gauche de l’Explorateur de solutions pour le développer.
- Click on the chevron to the left of the
BlazorAppproject in the Solution Explorer to expand it. - Drag and drop the Solution Explorer below BlazorApp.
Your project is created and loaded in Visual Studio Code. Take a look at the contents of your project using Solution Explorer.
Plusieurs fichiers ont été créés pour vous offrir une application Blazor simple prête à être exécutée.
Program.csest 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.razorest le composant racine de l’application.Routes.razorconfigure le routeur Blazor.- Le répertoire
Pagescontient des exemples de pages Web pour l'application.
BlazorApp.csprojdé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.jsondans le répertoirePropertiesdé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
Select the Run and Debug icon in the Activity Bar on the left side of your workspace.
Select the blue Run and Debug button.
Visual Studio Code will open up a menu of launch configurations. Select C#: BlazorApp [Default Configuration].
Then you need to select a debugger. Select C#.
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 !
You can stop the app at any time by clicking on the stop button in the top toolbar.
To re-run your application, select the dropdown menu to the right of the run button in the top right, and select Run project associated with this file.
La page affichée est définie par le fichier Home.razor situé dans le répertoire Components/Pages. Voici à quoi ressemble son contenu :
@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.
@page "/counter"
@rendermode InteractiveServer
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}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
onclickest déclenché. - La méthode
IncrementCountest appelée. - Le
currentCountest 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.
@page "/"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<Counter />Re-run the app to see the changes. The Counter component will then show up on the home page.
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
IncrementAmountavec un attribut[Parameter]. - Modifiez la méthode
IncrementCountpour utiliserIncrementAmountlors de l'incrémentation de la valeur decurrentCount.
Le code suivant montre comment y parvenir. Les lignes en surbrillance montrent les changements.
@page "/counter"
@rendermode InteractiveServer
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
[Parameter]
public int IncrementAmount { get; set; } = 1;
private void IncrementCount()
{
currentCount += IncrementAmount;
}
}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 :
@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.
Microsoft Learn : créer une application de liste de tâches Blazor
Blazor pour les débutants
Découvrez comment créer une application Blazor complète du début à la fin :
Vous pourriez aussi être intéressé par...
