Partage via

Tutoriel : Bien démarrer avec C# et ASP.NET Core dans Visual Studio

  • Article

Dans ce tutoriel pour le développement C# avec ASP.NET Core, vous créez une application web C# ASP.NET Core dans Visual Studio.

Ce tutoriel vous montre comment :

  • Créer un projet Visual Studio
  • Créer une application web C# ASP.NET Core
  • Apporter des modifications à l’application web
  • Explorer les fonctionnalités de l’IDE
  • Exécuter l’application web

Conditions préalables

Pour suivre ce didacticiel, vous avez besoin des éléments suivants :

  • Visual Studio est installé. Visitez la page de téléchargements Visual Studio pour une version gratuite. Pour plus d’informations sur la mise à niveau vers la dernière version de Visual Studio, consultez mises à jour de Visual Studio.
  • La charge de travail Développement web et ASP.NET est installée. Pour vérifier ou installer cette charge de travail dans Visual Studio, sélectionnez Tools>Obtenir des outils et des fonctionnalités. Pour plus d’informations, consultez Modifier les charges de travail ou les composants individuels.

Créer un projet

Tout d’abord, vous créez un projet ASP.NET Core. Le type de projet est fourni avec tous les fichiers de modèle dont vous avez besoin pour créer un site web entièrement fonctionnel.

  1. Dans la fenêtre de démarrage, sélectionnez Créer un projet.

    Capture d’écran montrant la fenêtre de démarrage de Visual Studio. La création d’une option de projet est mise en surbrillance.

  2. Dans la fenêtre Créer un projet, sélectionnez C# dans la liste des langues. Ensuite, sélectionnez Windows dans la liste des plateformes, puis Web dans la liste des types de projets.

    Après avoir appliqué les filtres de langue, de plateforme et de type de projet, sélectionnez le modèle ASP.NET Core Web App, puis sélectionnez Suivant.

    Capture d’écran montrant le modèle de projet ASP.NET Core Web App mis en surbrillance dans la boîte de dialogue Nouveau projet dans Visual Studio.

  3. Dans la fenêtre Configurer votre nouveau projet, entrez MyCoreApp dans le champ Nom du projet. Ensuite, sélectionnez suivant.

    Capture d’écran montrant la fenêtre Configurer votre nouveau projet dans Visual Studio avec MyCoreApp entré dans le champ Nom du projet.

  4. Dans la fenêtre Informations supplémentaires, vérifiez que .NET Core 3.1 apparaît dans le champ Framework cible.

    Dans cette fenêtre, vous pouvez activer la prise en charge de Docker et ajouter la prise en charge de l’authentification. Le menu déroulant pour type d’authentification propose les quatre options suivantes :

    • Aucun: aucune authentification.
    • comptes individuels: ces authentifications sont stockées dans une base de données locale ou Azure.
    • plateforme d’identités Microsoft: cette option utilise l’ID Microsoft Entra ou Microsoft 365 pour l’authentification.
    • Windows: adapté aux applications intranet.

    Laissez la case Activer Docker décochée, puis sélectionnez Aucun pour le type d’authentification.

    Capture d’écran montrant les paramètres par défaut dans la fenêtre Informations supplémentaires où le framework cible est défini sur .NET Core 3.1.

  5. Sélectionnez Créer.

Visual Studio ouvre votre nouveau projet.

  1. Dans la fenêtre de démarrage, sélectionnez Créer un projet.

    Capture d’écran montrant la fenêtre de démarrage de Visual Studio. La création d’une option de projet est mise en surbrillance.

  2. Dans la fenêtre Créer un projet, sélectionnez C# dans la liste des langues. Ensuite, sélectionnez Windows dans la liste Toutes les plateformes et Web dans la liste Tous les types de projets.

    Une fois que vous avez appliqué les filtres de langage, de plateforme et de type de projet, sélectionnez le modèle Application web ASP.NET Core (Pages Razor), puis sélectionnez Suivant.

    Capture d’écran montrant le modèle de projet ASP.NET Core Web App sélectionné et mis en surbrillance dans la page Créer un projet.

  3. Dans la fenêtre Configurer votre nouveau projet, entrez MyCoreApp dans le champ Nom du projet. Ensuite, sélectionnez suivant.

    Capture d’écran montrant la fenêtre Configurer votre nouveau projet dans Visual Studio avec MyCoreApp entré dans le champ Nom du projet.

  4. Dans la fenêtre Informations supplémentaires, vérifiez que .NET 8.0 apparaît dans le champ Framework cible.

    Dans cette fenêtre, vous pouvez activer la prise en charge des conteneurs et ajouter la prise en charge de l’authentification. Le menu déroulant pour type d’authentification propose les quatre options suivantes :

    • Aucun: aucune authentification.
    • comptes individuels: ces authentifications sont stockées dans une base de données locale ou Azure.
    • plateforme d’identités Microsoft: cette option utilise l’ID Microsoft Entra ou Microsoft 365 pour l’authentification.
    • Windows: adapté aux applications intranet.

    Laissez la case Activer la prise en charge du conteneur désactivée, puis sélectionnez Aucun pour le type d’authentification.

    Capture d’écran montrant les paramètres par défaut dans la fenêtre Informations supplémentaires où le framework cible est défini sur .NET 8.0.

  5. Sélectionnez Créer.

Visual Studio ouvre votre nouveau projet.

À propos de votre solution

Cette solution suit le modèle de conception Razor Pages. Il diffère du modèle de conception -View-Controller (MVC) en ce qu'il intègre de manière simplifiée le code du modèle et du contrôleur directement dans la page Razor elle-même.

Visite guidée de votre solution

  1. Le modèle de projet crée une solution avec un seul projet ASP.NET Core nommé MyCoreApp. Sélectionnez l’onglet Explorateur de solutions pour afficher son contenu.

    Capture d’écran montrant le projet MyCoreApp sélectionné dans l’Explorateur de solutions dans Visual Studio.

  2. Développez le dossier Pages.

    Capture d’écran montrant le contenu du dossier Pages dans l’Explorateur de solutions dans Visual Studio..

  3. Sélectionnez le fichier Index.cshtml et affichez le fichier dans l’éditeur de code.

    Capture d’écran montrant le fichier Index dot c s h t m l ouvert dans l’éditeur de code Visual Studio.

  4. Chaque fichier .cshtml a un fichier de code associé. Pour ouvrir le fichier de code dans l’éditeur, développez le nœud Index.cshtml dans l’Explorateur de solutions, puis sélectionnez le fichier Index.cshtml.cs.

    Capture d’écran montrant le fichier index c s h t m l sélectionné dans l’Explorateur de solutions dans Visual Studio.

  5. Affichez le fichier Index.cshtml.cs dans l’éditeur de code.

    Capture d’écran montrant le fichier index dot c h t m l dot c s ouvert dans l’éditeur de code Visual Studio.

  6. Le projet contient un dossier wwwroot, qui est la racine de votre site web. Développez le dossier pour voir son contenu.

    Capture d’écran montrant le dossier racine w w sélectionné dans l’Explorateur de solutions dans Visual Studio.

    Vous pouvez placer du contenu de site statique tel que css, images et bibliothèques JavaScript directement dans les chemins d’accès où vous le souhaitez.

    Le projet contient également des fichiers de configuration qui gèrent l’application web au moment de l’exécution. L’application par défaut configuration est stockée dans appsettings.json. Toutefois, vous pouvez remplacer ces paramètres à l’aide de appsettings.Development.json.

  7. Développez le fichier appsettings.json pour voir le fichier appsettings.Development.json.

    Capture d’écran montrant le fichier appsettings.json sélectionné et développé dans l’Explorateur de solutions de Visual Studio.

Exécuter, déboguer et apporter des modifications

  1. Dans la barre d’outils, sélectionnez le bouton IIS Express pour générer et exécuter l’application en mode débogage. Vous pouvez également appuyer sur F5ou accéder à Déboguer>Démarrer le débogage à partir de la barre de menus.

    Capture d’écran montrant le bouton I S Express mis en surbrillance dans la barre d’outils de Visual Studio.

    Remarque

    Si vous recevez un message d’erreur indiquant Impossible de se connecter au serveur web « IIS Express », fermez Visual Studio, puis relancez le programme en tant qu’administrateur. Vous pouvez effectuer cette tâche en cliquant avec le bouton droit sur l’icône Visual Studio dans le menu Démarrer, puis en sélectionnant l’option Exécuter en tant qu’administrateur dans le menu contextuel.

    Vous pouvez également recevoir un message qui vous demande si vous souhaitez accepter un certificat IIS SSL Express. Pour afficher le code dans un navigateur web, sélectionnez Oui, puis Oui si vous recevez un message d’avertissement de sécurité de suivi.

  2. Visual Studio lance une fenêtre de navigateur. Vous devriez ensuite voir la page d’accueil et la page de confidentialité dans la barre de menus.

  3. Sélectionnez confidentialité dans la barre de menus. La page Confidentialité du navigateur affiche le texte défini dans le fichier Privacy.cshtml.

    Capture d’écran montrant la page Confidentialité de MyCoreApp avec le texte suivant : Utilisez cette page pour détailler la politique de confidentialité de votre site.

  4. Revenez à Visual Studio, puis appuyez sur Maj+F5 pour arrêter le débogage. Cette action ferme le projet dans la fenêtre du navigateur.

  5. Dans Visual Studio, ouvrez Privacy.cshtml pour modification. Ensuite, supprimez la phrase Utilisez cette page pour détailler la politique de confidentialité de votre site et la remplacer par cette page est en cours de construction à partir de @ViewData["TimeStamp"].

    Capture d’écran montrant le fichier Privacy dot c s h t m l ouvert dans l’éditeur de code de Visual Studio avec le texte mis à jour.

  6. À présent, nous allons apporter une modification de code. Sélectionnez Privacy.cshtml.cs. Ensuite, nettoyez les directives using en haut du fichier à l’aide du raccourci suivant :

    Passez la souris sur une directive using grisée, ou sélectionnez-la. Une ampoule Actions rapides apparaît juste en dessous du point d’insertion ou dans la marge de gauche. Sélectionnez l’ampoule, puis sélectionnez Supprimer les utilisations inutiles.

    Capture d’écran montrant le fichier Privacy dot c s h t m l dans l’éditeur de code de Visual Studio avec l’info-bulle Actions rapides exposée pour une directive using grisée.

    Sélectionnez à présent Aperçu des modifications pour voir ce qui change.

    Capture d’écran montrant la boîte de dialogue Aperçu des modifications. La boîte de dialogue affiche la directive en cours de suppression et affiche un aperçu du changement de code après la suppression.

    Sélectionnez Appliquer. Visual Studio supprime les directives using inutiles du fichier.

  7. Ensuite, dans la méthode OnGet(), remplacez le corps par le code suivant :

    public void OnGet()
{
   string dateTime = DateTime.Now.ToShortDateString();
   ViewData["TimeStamp"] = dateTime;
}

  8. Notez qu’un trait de soulignement ondulé apparaît sous DateTime. Le soulignement ondulé apparaît parce que ce type n’est pas dans le champ d'application.

    Capture d’écran montrant une marque d’erreur, sous la forme d’un soulignement ondulé, pour DateTime dans l’éditeur de code Visual Studio.

    Ouvrez la barre d’outils de la liste des erreurs pour voir les mêmes erreurs répertoriées là-bas. Si vous ne voyez pas la barre d'outils Liste d'erreurs, accédez à Afficher>Liste d'erreurs dans la barre de menus supérieure.

    Capture d’écran montrant la barre d’outils Liste d’erreurs dans Visual Studio avec DateTime listé.

  9. Nous allons corriger cette erreur. Dans l’éditeur de code, placez votre curseur sur la ligne qui contient l’erreur, puis sélectionnez l’ampoule Actions rapides dans la marge gauche. Ensuite, dans le menu déroulant, sélectionnez avec l'utilisation du système ; puis pour ajouter cette directive en haut de votre fichier et résoudre les erreurs.

    Capture d’écran montrant les options d’actions rapides dans le menu déroulant correspondant ainsi que le pointeur de la souris placé sur using System.

  10. Appuyez sur F5 pour ouvrir votre projet dans le navigateur web.

  11. En haut du site web, sélectionnez confidentialité pour afficher vos modifications.

    Capture d’écran montrant la page de confidentialité mise à jour qui inclut les modifications que vous avez apportées.

  12. Fermez le navigateur web, appuyez sur Maj+F5 pour arrêter le débogage.

Modifier votre page d’accueil

  1. Dans l’Explorateur de solutions , développez le dossier Pages, puis sélectionnez Index.cshtml.

    Capture d’écran montrant le fichier Index dot c s h t m l sélectionné sous le nœud Pages dans l’Explorateur de solutions.

    Le fichier index.cshtml correspond à votre page Accueil dans l’application web, qui s’exécute dans un navigateur web.

    Capture d’écran montrant la page d’accueil de l’application web dans la fenêtre du navigateur.

    Dans l’éditeur de code, vous voyez le code HTML pour le texte qui s’affiche sur la page d’accueil .

    Capture d’écran montrant le fichier Index dot c s h t m l de la page d’accueil dans l’éditeur de code Visual Studio.

  2. Remplacez le texte bienvenue par Hello World !

    Capture d’écran montrant le fichier Index dot c s h t m l dans l’éditeur de code Visual Studio avec le texte d’accueil modifié en Hello World !.

  3. Sélectionnez iis Express ou appuyez sur Ctrl+F5 pour exécuter l’application et l’ouvrir dans un navigateur web.

    Capture d’écran montrant le bouton IIS Express mis en surbrillance dans la barre d’outils de Visual Studio.

  4. Dans le navigateur web, vous pouvez voir vos nouveaux changements sur la page Accueil.

    Capture d’écran montrant la page d’accueil de l’application web dans la fenêtre du navigateur. Le texte mis à jour indique Hello World !

  5. Fermez le navigateur web, appuyez sur Maj+F5 pour arrêter le débogage et enregistrer votre projet. Vous pouvez maintenant fermer Visual Studio.

Visite guidée de votre solution

  1. Le modèle de projet crée une solution avec un seul projet ASP.NET Core nommé MyCoreApp. Sélectionnez l'onglet de l'Explorateur de solutions pour afficher son contenu.

    Capture d’écran montrant le projet MyCoreApp sélectionné et son contenu dans l’Explorateur de solutions dans Visual Studio.

  2. Développez le dossier Pages.

    Capture d’écran montrant le contenu du dossier Pages dans l’Explorateur de solutions.

  3. Sélectionnez le fichier index.cshtml et affichez-le dans l’éditeur de code.

    Capture d’écran montrant le fichier Index.cshtml ouvert dans l’éditeur Visual Studio Code.

  4. Chaque fichier .cshtml a un fichier de code associé. Pour ouvrir le fichier de code dans l’éditeur, dépliez le nœud Index.cshtml dans l’Explorateur de solutions, puis sélectionnez le fichier Index.cshtml.cs.

    Capture d’écran montrant le fichier Index.cshtml sélectionné dans l’Explorateur de solutions dans Visual Studio.

  5. Affichez le fichier Index.cshtml.cs dans l’éditeur de code.

    Capture d’écran montrant le fichier Index.cshtml.cs ouvert dans l’éditeur Visual Studio Code.

  6. Le projet contient un dossier wwwroot, qui est la racine de votre site web. Développez le dossier pour voir son contenu.

    Capture d’écran montrant le dossier racine w w sélectionné dans l’Explorateur de solutions dans Visual Studio.

    Vous pouvez placer du contenu de site statique tel que css, images et bibliothèques JavaScript directement dans les chemins d’accès où vous le souhaitez.

  7. Le projet contient également des fichiers de configuration qui gèrent l’application web au moment de l’exécution. L’application par défaut configuration est stockée dans appsettings.json. Toutefois, vous pouvez remplacer ces paramètres à l’aide de appsettings.Development.json. Ouvrez le fichier appsettings.json pour afficher le fichier appsettings.Development.json.

    Capture d’écran montrant appsettings.json sélectionné et développé, qui expose appsettings.Development.json, dans l’Explorateur de solutions dans Visual Studio.

Exécuter, déboguer et apporter des modifications

  1. Dans la barre d’outils, sélectionnez le bouton https pour générer et exécuter l’application en mode débogage. Vous pouvez également appuyer sur F5 ou accéder à Déboguer>Démarrer le débogage dans la barre de menus.

    Capture d’écran montrant le bouton https mis en surbrillance dans la barre d’outils de Visual Studio.

    Remarque

    Vous pouvez également recevoir un message qui vous demande si vous souhaitez accepter un certificat SSL ASP.NET Core. Pour afficher le code dans un navigateur web, sélectionnez Oui, puis Oui si vous recevez un message d’avertissement de sécurité de suivi. En savoir plus sur l’application du protocole SSL dans ASP.NET Core.

  2. Visual Studio lance une fenêtre de navigateur. Vous devez voir ensuite les pages Accueil et Confidentialité dans la barre de menus.

  3. Sélectionnez confidentialité dans la barre de menus. La page Confidentialité du navigateur affiche le texte défini dans le fichier Privacy.cshtml.

    Capture d’écran montrant la page Confidentialité de MyCoreApp avec le texte suivant : Utilisez cette page pour détailler la politique de confidentialité de votre site.

  4. Revenez à Visual Studio, puis appuyez sur Maj+F5 pour arrêter le débogage. Cette action ferme le projet dans la fenêtre du navigateur.

  5. Dans Visual Studio, ouvrez Privacy.cshtml pour modification. Ensuite, supprimez la phrase Utilisez cette page pour détailler la politique de confidentialité de votre site et la remplacer par cette page est en cours de construction à partir de @ViewData["TimeStamp"].

    Capture d’écran montrant le fichier Privacy.cshtml ouvert dans l’éditeur Visual Studio Code avec le texte mis à jour.

  6. À présent, nous allons apporter une modification de code. Sélectionnez Privacy.cshtml.cs. Ensuite, nettoyez les directives using en haut du fichier en sélectionnant le raccourci suivant :

    Passez la souris sur une directive using grisée, ou sélectionnez-la. Une ampoule Actions rapides apparaît juste en dessous du point d’insertion ou dans la marge de gauche. Sélectionnez l’ampoule, puis sélectionnez la flèche de développement à côté de Supprimer les instructions using inutiles.

    Capture d’écran montrant le fichier Privacy.cshtml dans l’éditeur Visual Studio Code avec l’info-bulle Actions rapides ouverte et les modifications en préversion mises en surbrillance.

    Sélectionnez à présent Aperçu des modifications pour voir ce qui change.

    Capture d’écran montrant la boîte de dialogue Aperçu des modifications. La boîte de dialogue affiche la directive en cours de suppression et affiche un aperçu du changement de code après la suppression.

    Sélectionnez Appliquer. Visual Studio supprime les directives using inutiles du fichier.

  7. Ensuite, créez une chaîne pour la date actuelle mise en forme pour votre culture ou région à l’aide de la méthode DateTime.ToString.

    • Le premier argument de la méthode spécifie la façon dont la date doit être affichée. Cet exemple utilise le spécificateur de format (d) qui indique le format de date courte.
    • Le deuxième argument est l’objet CultureInfo qui spécifie la culture ou la région de la date. Le deuxième argument détermine, entre autres, la langue des mots dans la date et le type de séparateurs utilisés.

    Remplacez le corps de la méthode OnGet() dans Privacy.cshtml.cs par le code suivant :

    public void OnGet()
{
   string dateTime = DateTime.Now.ToString("d", new CultureInfo("en-US"));
   ViewData["TimeStamp"] = dateTime;
}

  8. Notez que la directive using suivante est automatiquement ajoutée au début du fichier :

    using System.Globalization;

    System.Globalization contient la classe CultureInfo.

  9. Appuyez sur F5 pour ouvrir votre projet dans le navigateur web.

  10. En haut du site web, sélectionnez confidentialité pour afficher vos modifications.

    Capture d’écran montrant la page Confidentialité de MyCoreApp qui inclut les modifications apportées pour ajouter la date.

  11. Fermez le navigateur web, appuyez sur Maj+F5 pour arrêter le débogage.

Modifier votre page d’accueil

  1. Dans l’Explorateur de solutions , développez le dossier Pages, puis sélectionnez Index.cshtml.

    Capture d’écran montrant Index.cshtml sélectionné sous le nœud Pages dans l’Explorateur de solutions.

    Le fichier index.cshtml correspond à votre page Accueil dans l’application web, qui s’exécute dans un navigateur web.

    Capture d’écran montrant la page d’accueil de l’application web dans la fenêtre du navigateur.

    Dans l’éditeur de code, vous voyez le code HTML pour le texte qui s’affiche sur la page d'accueil .

    Capture d’écran montrant le fichier Index.cshtml pour la page d’accueil dans l’éditeur Visual Studio Code.

  2. Remplacez le texte bienvenue par Hello World !

    Capture d’écran montrant le fichier Index.cshtml dans l’éditeur Visual Studio Code avec le texte « Bienvenue » modifié en « Hello World ! ».

  3. Sélectionnez https ou appuyez sur Ctrl+F5 pour exécuter l’application et l’ouvrir dans un navigateur web.

    Capture d’écran montrant le bouton https mis en surbrillance dans la barre d’outils de Visual Studio.

  4. Dans le navigateur web, vous voyez vos nouvelles modifications sur la page d’accueil .

    Capture d’écran montrant la page d’accueil de l’application web dans la fenêtre du navigateur. Le texte mis à jour indique « Hello World ! »

  5. Fermez le navigateur web, appuyez sur Maj+F5 pour arrêter le débogage et enregistrer votre projet. Vous pouvez maintenant fermer Visual Studio.

Étapes suivantes

Félicitations pour avoir terminé ce tutoriel ! Nous espérons que vous avez aimé découvrir C#, ASP.NET Core et l’IDE Visual Studio. Pour en savoir plus sur la création d’une application web ou d’un site web avec C# et ASP.NET, suivez le tutoriel suivant :

Créer une application web Razor Pages avec ASP.NET Core

Vous pouvez également apprendre à conteneuriser votre application web avec Docker :

Outils de conteneur dans Visual Studio