Édition du code Web Forms ASP.NET dans Visual Studio 2013

Article
07/13/2023

Dans de nombreuses pages de formulaire web ASP.NET, vous écrivez du code en Visual Basic, C# ou dans un autre langage. L’éditeur de code dans Visual Studio peut vous aider à écrire du code rapidement tout en vous aidant à éviter les erreurs. En outre, l’éditeur fournit des moyens de créer du code réutilisable pour vous aider à réduire la quantité de travail que vous devez effectuer.

Cette procédure pas à pas illustre différentes fonctionnalités de l’éditeur de code Visual Studio.

Pendant cette procédure pas à pas, vous allez apprendre à :

Corriger les erreurs de codage inline.
Refactoriser et renommer le code.
Renommez les variables et les objets.
Insérez des extraits de code.

Prérequis

Pour réaliser cette procédure pas à pas, vous aurez besoin des éléments suivants :

Microsoft Visual Studio 2013 ou Microsoft Visual Studio Express 2013 pour le web. Le .NET Framework est installé automatiquement.

Notes

Microsoft Visual Studio 2013 et Microsoft Visual Studio Express 2013 for Web seront souvent appelés Visual Studio tout au long de cette série de didacticiels.

Si vous utilisez Visual Studio, cette procédure pas à pas suppose que vous avez sélectionné la collection de paramètres Développement web la première fois que vous avez démarré Visual Studio. Pour plus d’informations, consultez Guide pratique pour sélectionner paramètres d’environnement de développement web.

Création d’un projet d’application web et d’une page

Dans cette partie de la procédure pas à pas, vous allez créer un projet d’application web et y ajouter une nouvelle page.

Pour créer un projet d’application web

Ouvrez Microsoft Visual Studio.
Dans le menu Fichier, sélectionnez Nouveau projet.

La boîte de dialogue Nouveau projet apparaît.
Sélectionnez le groupe Modèles ->Visual C# ->Modèles web sur la gauche.
Choisissez le modèle Application Web ASP.NET dans la colonne centrale.
Nommez votre projet BasicWebApp et cliquez sur le bouton OK .
Ensuite, sélectionnez le modèle Web Forms, puis cliquez sur le bouton OK pour créer le projet.

Visual Studio crée un projet qui inclut des fonctionnalités prédéfinies basées sur le modèle Web Forms.

Création d’une page ASP.NET Web Forms

Lorsque vous créez une application Web Forms à l’aide du modèle de projet Application web ASP.NET, Visual Studio ajoute une page ASP.NET (page Web Forms) nommée Default.aspx, ainsi que plusieurs autres fichiers et dossiers. Vous pouvez utiliser la page Default.aspx comme page d’accueil de votre application web. Toutefois, pour cette procédure pas à pas, vous allez créer et utiliser une nouvelle page.

Pour ajouter une page à l’application web

Dans Explorateur de solutions, cliquez avec le bouton droit sur le nom de l’application web (dans ce didacticiel, le nom de l’application est BasicWebSite), puis cliquez sur Ajouter ->Nouvel élément.
La boîte de dialogue Ajouter un nouvel élément s’affiche.
Sélectionnez le groupe Visual C# -> Modèles web sur la gauche. Ensuite, sélectionnez Formulaire web dans la liste du milieu et nommez-le FirstWebPage.aspx.
Cliquez sur Ajouter pour ajouter la page Web Forms à votre projet.
Visual Studio crée la nouvelle page et l’ouvre.
Ensuite, définissez cette nouvelle page comme page de démarrage par défaut. Dans Explorateur de solutions, cliquez avec le bouton droit sur la nouvelle page nommée FirstWebPage.aspx, puis sélectionnez Définir comme page de démarrage. La prochaine fois que vous exécuterez cette application pour tester notre progression, vous verrez automatiquement cette nouvelle page dans le navigateur.

Correction des erreurs de codage inline

L’éditeur de code dans Visual Studio vous aide à éviter les erreurs lorsque vous écrivez du code, et si vous avez commis une erreur, l’éditeur de code vous aide à corriger l’erreur. Dans cette partie de la procédure pas à pas, vous allez écrire une ligne de code qui illustre les fonctionnalités de correction d’erreur dans l’éditeur.

Pour corriger des erreurs de codage simples dans Visual Studio

En mode Création , double-cliquez sur la page vide pour créer un gestionnaire pour l’événement Load de la page.
Vous utilisez le gestionnaire d’événements uniquement comme emplacement pour écrire du code.
À l’intérieur du gestionnaire, tapez la ligne suivante qui contient une erreur, puis appuyez sur ENTRÉE :
```
string myStr = "Loading..."
```
Lorsque vous appuyez sur ENTRÉE, l’éditeur de code place des soulignements verts et rouges (généralement des lignes « ondulées ») sous les zones du code qui rencontrent des problèmes. Un soulignement vert indique un avertissement. Un soulignement rouge indique une erreur que vous devez corriger.

Maintenez le pointeur de la souris enfoncé myStr pour voir une info-bulle qui vous indique l’avertissement. En outre, maintenez le pointeur de la souris sur le soulignement rouge pour voir le message d’erreur.

L’image suivante montre le code avec les soulignements.

L’erreur doit être corrigée en ajoutant un point-virgule ; à la fin de la ligne. L’avertissement vous avertit simplement que vous n’avez pas encore utilisé la myStr variable.

Notes

Vous affichez vos paramètres de mise en forme de code actuels dans Visual Studio en sélectionnant Outils ->Options ->Polices et couleurs.

Refactorisation et renommage

La refactorisation est une méthodologie logicielle qui consiste à restructurer votre code pour le rendre plus facile à comprendre et à gérer, tout en préservant ses fonctionnalités. Par exemple, vous écrivez du code dans un gestionnaire d’événements pour obtenir des données à partir d’une base de données. Lorsque vous développez votre page, vous découvrez que vous devez accéder aux données de plusieurs gestionnaires différents. Par conséquent, vous refactorisez le code de la page en créant une méthode d’accès aux données dans la page et en insérant des appels à la méthode dans les gestionnaires.

L’éditeur de code comprend des outils pour vous aider à effectuer diverses tâches de refactorisation. Dans cette procédure pas à pas, vous allez utiliser deux techniques de refactorisation : renommer les variables et extraire des méthodes. D’autres options de refactorisation incluent l’encapsulation de champs, la promotion des variables locales en paramètres de méthode et la gestion des paramètres de méthode. La disponibilité de ces options de refactorisation dépend de l’emplacement dans le code.

Refactorisation du code

Un scénario de refactorisation courant consiste à créer (extraire) une méthode à partir du code qui se trouve à l’intérieur d’un autre membre, comme une méthode. Cela réduit la taille du membre d’origine et rend le code extrait réutilisable.

Dans cette partie de la procédure pas à pas, vous allez écrire du code simple, puis en extraire une méthode. La refactorisation étant prise en charge pour C#, vous allez créer une page qui utilise C# comme langage de programmation.

Pour extraire une méthode dans une page C#

Basculez en mode Création .
Dans la boîte à outils, à partir de l’onglet Standard , faites glisser un contrôle Button sur la page.

Double-cliquez sur le contrôle Button pour créer un gestionnaire pour son événement Click , puis ajoutez le code suivant en surbrillance :

protected void Button1_Click(object sender, EventArgs e)
{

    System.Collections.ArrayList alist = 
        new System.Collections.ArrayList();
    int i;
    string arrayValue;
    for(i=0; i<5; i++)
    {
        arrayValue = "i = " + i.ToString();
        alist.Add(arrayValue);
    }
    for(i=0; i<alist.Count; i++)
    {
        Response.Write("<br />" + alist[i]);
    };
}

Le code crée un objet ArrayList , utilise une boucle pour le charger avec des valeurs, puis utilise une autre boucle pour afficher le contenu de l’objet ArrayList .

Appuyez sur CTRL+F5 pour exécuter la page, puis cliquez sur le bouton pour vous assurer que la sortie suivante s’affiche :
```
i = 0
i = 1
i = 2
i = 3
i = 4
```
Revenez à l’éditeur de code, puis sélectionnez les lignes suivantes dans le gestionnaire d’événements.
```
for(i=0; i<alist.Count; i++) 
{
      Response.Write("<br />" + alist[i]);
}
```
Cliquez avec le bouton droit sur la sélection, cliquez sur Refactoriser, puis choisissez Extraire la méthode.

La boîte de dialogue Extraire la méthode s’affiche.

Dans la zone Nouveau nom de méthode , tapez DisplayArray, puis cliquez sur OK.

L’éditeur de code crée une méthode nommée DisplayArray, et place un appel à la nouvelle méthode dans le gestionnaire Click où la boucle se trouvait à l’origine.

protected void Button1_Click(object sender, EventArgs e)
{
    System.Collections.ArrayList alist = 
        new System.Collections.ArrayList();
    int i;
    string arrayValue;
    for(i=0; i<5; i++)
    {
        arrayValue = "i = " + i.ToString();
        alist.Add(arrayValue);
    }
    i = DisplayArray(alist, i);
}

Appuyez sur Ctrl+F5 pour réexécuter la page, puis cliquez sur le bouton .

La page fonctionne comme avant. La DisplayArray méthode peut maintenant être appelée à partir de n’importe où dans la classe de page.

Renommage des variables

Lorsque vous utilisez des variables, ainsi que des objets, vous pouvez les renommer une fois qu’ils sont déjà référencés dans votre code. Toutefois, le changement de nom des variables et des objets peut entraîner l’interruption du code si vous manquez de renommer l’une des références. Par conséquent, vous pouvez utiliser la refactorisation pour effectuer le renommage.

Pour utiliser la refactorisation pour renommer une variable

Dans le gestionnaire d’événements Click , recherchez la ligne suivante :

System.Collections.ArrayList alist = 
    new System.Collections.ArrayList;

Cliquez avec le bouton droit sur le nom alistde la variable , choisissez Refactoriser, puis renommer.

La boîte de dialogue Renommer s’affiche.
Dans la zone Nouveau nom , tapez ArrayList1 et vérifiez que la case Aperçu des modifications de la référence a été cochée. Cliquez ensuite sur OK.

La boîte de dialogue Aperçu des modifications s’affiche et affiche une arborescence qui contient toutes les références à la variable que vous renommez.
Cliquez sur Appliquer pour fermer la boîte de dialogue Aperçu des modifications .

Les variables qui font spécifiquement référence au instance que vous avez sélectionné sont renommées. Notez toutefois que la variable alist de la ligne suivante n’est pas renommée.
```
private int DisplayArray(System.Collections.ArrayList alist, 
    int i)
```
La variable alist de cette ligne n’est pas renommée, car elle ne représente pas la même valeur que la variable alist que vous avez renommée. La variable alist dans la DisplayArray déclaration est une variable locale pour cette méthode. Cela montre que l’utilisation de la refactorisation pour renommer des variables est différente de la simple exécution d’une action de recherche et de remplacement dans l’éditeur ; la refactorisation renomme les variables avec la connaissance de la sémantique de la variable avec laquelle elle travaille.

Insertion d'extraits de code

Étant donné qu’il existe de nombreuses tâches de codage que les développeurs Web Forms doivent fréquemment effectuer, l’éditeur de code fournit une bibliothèque d’extraits de code ou de blocs de code préécrit. Vous pouvez insérer ces extraits de code dans votre page.

Chaque langue que vous utilisez dans Visual Studio présente de légères différences dans la façon dont vous insérez des extraits de code. Pour plus d’informations sur l’insertion d’extraits de code, consultez Extraits de code IntelliSense visual Basic. Pour plus d’informations sur l’insertion d’extraits de code dans Visual C#, consultez Extraits de code Visual C#.

Étapes suivantes

Cette procédure pas à pas a illustré les fonctionnalités de base de l’éditeur de code Visual Studio 2010 pour corriger les erreurs dans votre code, refactoriser le code, renommer des variables et insérer des extraits de code dans votre code. Les fonctionnalités supplémentaires de l’éditeur peuvent rendre le développement d’applications rapide et facile. Vous pouvez, par exemple, souhaiter effectuer les opérations suivantes :

En savoir plus sur les fonctionnalités d’IntelliSense, telles que la modification des options IntelliSense, la gestion des extraits de code et la recherche d’extraits de code en ligne. Pour plus d’informations, consultez Utilisation d’IntelliSense.
Découvrez comment créer vos propres extraits de code. Pour plus d’informations, consultez Création et utilisation d’extraits de code IntelliSense
En savoir plus sur les fonctionnalités propres à Visual Basic des extraits de code IntelliSense, telles que la personnalisation des extraits de code et la résolution des problèmes. Pour plus d’informations, consultez Extraits de code IntelliSense visual Basic
En savoir plus sur les fonctionnalités spécifiques à C#d’IntelliSense, telles que la refactorisation et les extraits de code. Pour plus d’informations, consultez Visual C# IntelliSense.