Bien démarrer avec ASP.NET Core

Ce tutoriel montre comment créer, exécuter et modifier un ASP.NET Core Blazor Web App à l’aide de l’interface CLI .NET. Blazor est un framework web frontal .NET qui prend en charge le rendu côté serveur et l’interactivité du client dans un modèle de programmation unique.

Vous allez apprendre à :

• Créer un Blazor Web App.
• Exécutez l’application.
• Modifiez l’application.
• Arrêtez l’application.

Prerequisites

Obtenez et installez le dernier SDK .NET sur Download .NET.

Créez une classe Blazor Web App

Ouvrez un interpréteur de commandes à un emplacement approprié pour l’exemple d’application et utilisez la commande suivante pour créer un Blazor Web App. L’option -o|--output crée un dossier pour le projet et nomme le projet BlazorSample:

dotnet new blazor -o BlazorSample

Exécuter l’application

Changez de répertoire pour accéder au dossier BlazorSample avec la commande suivante :

cd BlazorSample

La dotnet watch commande exécute l’application et ouvre votre navigateur par défaut sur la page d’accueil de l’application :

dotnet watch

À l’aide de la navigation latérale de l’application, visitez la page Compteur, où vous pouvez sélectionner le bouton Click me pour incrémenter le compteur.

Modifier l’application

Laissez le navigateur ouvert avec la page Counter chargée. En utilisant la dotnet watch commande pour exécuter l’application, vous pouvez apporter des modifications au balisage et au code de l’application sans avoir à reconstruire l’application pour refléter les modifications dans le navigateur.

Le composant CounterRazor chargé d'afficher la page web du compteur est situé dans Components/Pages/Counter.razor au sein du projet. Razor est une syntaxe qui combine des balises HTML à du code C# destiné à améliorer la productivité des développeurs.

Ouvrez le fichier Counter.razor dans un éditeur de texte et notez quelques lignes intéressantes qui rendent le contenu et assurent le fonctionnement de la fonction de compteur du composant.

Components/Pages/Counter.razor :

@page "/counter"

<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++;
    }
}

Le fichier commence par une ligne qui indique le chemin relatif du composant (/counter) :

@page "/counter"

Le titre de la page est défini par <PageTitle> les balises :

<PageTitle>Counter</PageTitle>

Un titre H1 s’affiche :

<h1>Counter</h1>

Un élément de paragraphe (<p>) affiche le nombre actuel, qui est stocké dans une variable nommée currentCount:

<p role="status">Current count: @currentCount</p>

Un bouton (<button>) permet à l’utilisateur d’incrémenter le compteur, qui se produit lorsqu’un clic de bouton exécute une méthode C# nommée IncrementCount:

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

Le bloc contient du @code code C# que le composant exécute :

• La variable currentCount de compteur est établie avec une valeur initiale de zéro.
• La IncrementCount méthode est définie. Le code dans la méthode incrémente la currentCount variable d’une fois que la méthode est appelée.

private int currentCount = 0;

private void IncrementCount()
{
    currentCount++;
}

Modifions l’incrément du compteur dans la méthode IncrementCount.

Modifiez la ligne pour que currentCount soit incrémenté d'une valeur de dix chaque fois que IncrementCount est appelé :

- currentCount++;
+ currentCount += 10;

Enregistrez le fichier.

Dès que vous enregistrez le fichier, l’application en cours d’exécution est mise à jour automatiquement, car vous avez utilisé la dotnet watch commande. Revenez à l’application dans le navigateur et sélectionnez le bouton Click me sur la page Compteur. Témoin de la façon dont le compteur s’incrémente maintenant de sa valeur existante d’un à une valeur de onze. Chaque fois que le bouton est sélectionné, la valeur est incrémentée de dix.

Arrêter l’application

Suivez ces étapes :

• Fermez la fenêtre du navigateur.
• Pour arrêter l’application, appuyez sur Ctrl+C dans l’interpréteur de commandes.

Congratulations! Vous avez terminé ce didacticiel.

Étapes suivantes

Dans ce tutoriel, vous avez appris à :

• Créer un Blazor Web App.
• Exécutez l’application.
• Modifiez l’application.
• Arrêtez l’application.

Pour en savoir plus sur les principes fondamentaux de ASP.NET Core, consultez les rubriques suivantes :

Vue d’ensemble des principes de base de ASP.NET Core

Tutoriels supplémentaires

Type d’application	Scenario	Tutorials
Application web	Nouveau développement web serveur et client avec Blazor	Créer une Blazor application de liste de tâches et créer une Blazor application de base de données de films (vue d’ensemble)
API Web	Traitement des données basées sur le serveur avec des API minimales	Tutoriel : Créer une API minimale avec ASP.NET Core
Application d'appel de procédure à distance (RPC)	Services contract-first utilisant des mémoires tampons de protocole	Créer un client et un serveur .NET gRPC dans ASP.NET Core
Application en temps réel	Communication bidirectionnelle serveur/client	Bien démarrer avec ASP.NET Core SignalR

Ressources supplémentaires

• Présentation de .NET
• Visual Studio
• Visual Studio Code
• Communauté des développeurs .NET
• .NET Live TV