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

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

   

2. Dans la fenêtre Créer un projet, dans la liste Langage, sélectionnez C#. Sélectionnez ensuite Windows dans la liste des plateformes, et Web dans la liste des types de projet.

   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, puis sélectionnez Suivant.

   

   Note

   Si vous ne voyez pas le modèle Application web ASP.NET Core, vous pouvez l’installer à partir de la fenêtre Créer un projet.

   Dans le message Vous ne trouvez pas ce que vous cherchez ?, en bas de la liste des modèles, sélectionnez le lien Installer plus d’outils et de fonctionnalités.

   

   Dans Visual Studio Installer, sélectionnez Développement web et ASP.NET.

   

   Sélectionnez Modifier dans Visual Studio Installer. Vous serez peut-être invité à enregistrer votre travail. Sélectionnez Continuer pour installer la charge de travail.

   Revenez à l’étape 2 de la procédure « 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.

   

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 Type d’authentification propose les quatre options suivantes :

   • Aucune : 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 Microsoft Entra ID ou Microsoft 365 pour l’authentification.
   • Windows : authentification adaptée aux applications intranet.

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

   

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.

   

2. Dans la fenêtre Créer un projet, dans la liste Langage, sélectionnez C#. Sélectionnez ensuite Windows dans la liste des plateformes, et Web dans la liste des types de projet.

   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, puis sélectionnez Suivant.

   

   Note

   Si vous ne voyez pas le modèle Application web ASP.NET Core, vous pouvez l’installer à partir de la fenêtre Créer un projet.

   Dans le message Vous ne trouvez pas ce que vous cherchez ?, en bas de la liste des modèles, sélectionnez le lien Installer plus d’outils et de fonctionnalités.

   

   Dans Visual Studio Installer, sélectionnez la charge de travail Développement web et ASP.NET.

   

   Sélectionnez Modifier dans Visual Studio Installer. Vous serez peut-être invité à enregistrer votre travail. Sélectionnez Continuer pour installer la charge de travail.

   Revenez à l’étape 2 de la procédure « Créer un projet ».

3. Dans la fenêtre Configurer votre nouveau projet, entrez MyCoreApp dans le champ Nom du projet. Ensuite, cliquez sur Suivant.

   

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 de Docker et ajouter la prise en charge de l’authentification. Le menu déroulant Type d’authentification propose les quatre options suivantes :

   • Aucune : 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 Microsoft Entra ID ou Microsoft 365 pour l’authentification.
   • Windows : authentification adaptée aux applications intranet.

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

   

5. Sélectionnez Créer.

Visual Studio ouvre votre nouveau projet.

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 voir son contenu.

   

2. Développez le dossier Pages.

   

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

   

4. Chaque fichier .cshtml est associé à un fichier de code. 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.

   

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

   

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

   

   Vous pouvez placer du contenu de site statique, par exemple des feuilles de style en cascade, des images et des bibliothèques JavaScript, directement dans les chemins souhaités.

   Le projet contient également des fichiers config qui gèrent l’application web au moment de l’exécution. La configuration de l’application par défaut 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.

   

Exécuter, déboguer et apporter des changements

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 F5, ou accéder à Déboguer>Démarrer le débogage dans la barre de menus.

   

   Note

   Si vous obtenez 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. Pour effectuer cette tâche, cliquez avec le bouton droit sur l’icône de Visual Studio dans le menu Démarrer, puis sélectionnez l’option Exécuter en tant qu’administrateur dans le menu contextuel.

   Vous pouvez également recevoir un message qui vous demande si vous voulez accepter un certificat Express SSL IIS. Pour voir le code dans un navigateur web, sélectionnez Oui, puis sélectionnez à nouveau Oui, si vous recevez un message d’avertissement relatif à la sécurité.

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.

   

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

5. Dans Visual Studio, ouvrez Privacy.cshtml pour le modifier. Supprimez ensuite la phrase Utiliser cette page pour détailler la politique de confidentialité de votre site, puis remplacez-la par Cette page est en construction à la date du @ViewData["TimeStamp"].

   

6. À présent, apportons un changement au code. Sélectionnez Privacy.cshtml.cs. Nettoyez ensuite 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 Usings inutiles.

   

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

   

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

7. Ensuite, remplacez le corps de la méthode OnGet() 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é s’affiche, car ce type ne fait pas partie de l’étendue.

   

   Ouvrez la barre d’outils Liste d’erreurs où sont répertoriées ces mêmes erreurs. 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.

   

9. Corrigeons 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 de gauche. Ensuite, dans le menu déroulant, sélectionnez using System; pour ajouter cette directive en haut de votre fichier et résoudre les erreurs.

   

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

11. En haut du site web, sélectionnez Confidentialité pour voir vos changements.

    

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

Changer votre page d’accueil

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

   

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

   

   Dans l’éditeur de code, vous voyez le code HTML du texte qui apparaît sur la page Accueil.

   

2. Remplacez le texte Welcome par Hello World!

   

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

   

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

   

5. Fermez le navigateur web, appuyez sur Maj+F5 pour arrêter le débogage, puis enregistrez 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 Explorateur de solutions pour voir son contenu.

   

2. Développez le dossier Pages.

   

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

   

4. Chaque fichier .cshtml est associé à un fichier de code. 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.

   

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

   

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

   

   Vous pouvez placer du contenu de site statique, par exemple des feuilles de style en cascade, des images et des bibliothèques JavaScript, directement dans les chemins souhaités.

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

   

Exécuter, déboguer et apporter des changements

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 F5, ou accéder à Déboguer>Démarrer le débogage dans la barre de menus.

   

   Note

   Si vous obtenez 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. Pour effectuer cette tâche, cliquez avec le bouton droit sur l’icône de Visual Studio dans le menu Démarrer, puis sélectionnez l’option Exécuter en tant qu’administrateur dans le menu contextuel.

   Vous pouvez également recevoir un message qui vous demande si vous voulez accepter un certificat Express SSL IIS. Pour voir le code dans un navigateur web, sélectionnez Oui, puis sélectionnez à nouveau Oui, si vous recevez un message d’avertissement relatif à la sécurité.

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.

   

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

5. Dans Visual Studio, ouvrez Privacy.cshtml pour le modifier. Supprimez ensuite la phrase Utiliser cette page pour détailler la politique de confidentialité de votre site, puis remplacez-la par Cette page est en construction à la date du @ViewData["TimeStamp"].

   

6. À présent, apportons un changement au code. Sélectionnez Privacy.cshtml.cs. Nettoyez ensuite 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 en regard de Supprimer les Usings inutiles.

   

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

   

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

7. Créez ensuite 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 des séparateurs utilisés.

   Remplacez le corps de la méthode OnGet() 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 en haut 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 voir vos changements.

    

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

Changer votre page d’accueil

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

   

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

   

   Dans l’éditeur de code, vous voyez le code HTML du texte qui apparaît sur la page Accueil.

   

2. Remplacez le texte Welcome par Hello World!

   

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

   

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

   

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