Procédure pas à pas : édition de code au sein des pages Web dans Visual Web Developer

Article
08/21/2008

Mise à jour : novembre 2007

Dans de nombreuses pages Web ASP.NET, vous écrivez du code en langage Visual Basic, C# ou autre. L'éditeur de code de Visual Web Developer peut vous aider à écrire rapidement du code tout en vous permettant d'éviter des erreurs. De plus, l'éditeur vous permet de créer du code réutilisable afin de 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. Certaines des fonctionnalités de l'éditeur de code dépendent du langage utilisé pour le codage. Par conséquent, lors de cette procédure pas à pas, vous créerez deux pages, une qui utilise Visual Basic comme son langage de programmation et une autre qui utilise C#.

Au cours de cette procédure pas à pas, vous apprendrez à :

corriger les erreurs (dans Visual Basic) ;
refactoriser et renommer le code (en C#) ;
renommer les symboles ;
Insérer un extrait de code (en Visual Basic et C#).

Composants requis

Pour exécuter cette procédure pas à pas, vous avez besoin de :

Visual Studio ou Visual Web Developer.

Pour une présentation de Visual Web Developer, consultez Procédure pas à pas : création d'une page Web de base dans Visual Web Developer.

Création du site et de la page Web

Si vous avez déjà créé un site Web dans Visual Web Developer (par exemple, en effectuant les étapes décrites dans Procédure pas à pas : création d'une page Web de base dans Visual Web Developer), vous pouvez utiliser ce site Web et passer à la section suivante. Sinon, créez un site et une page Web en suivant ces étapes.

Pour créer un site Web de système de fichiers

Ouvrez Visual Web Developer.
Dans le menu Fichier, cliquez sur Nouveau site Web.
Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET.
Dans la zone Emplacement, sélectionnez Système de fichiers et entrez le nom du dossier dans lequel vous souhaitez conserver les pages de votre site Web.

Par exemple, tapez le nom du dossier C:\SitesWeb.
Dans la liste Langage, cliquez sur Visual Basic.

Le langage de programmation que vous choisissez sera la valeur par défaut pour votre site Web, mais vous pouvez définir individuellement le langage de programmation pour chaque page.
Cliquez sur OK.

Visual Web Developer crée le dossier et une page nommée Default.aspx.

Correction des erreurs dans Visual Basic

L'éditeur de code dans Visual Web Developer vous permet d'éviter les erreurs lors du codage et, si vous avez fait une erreur, vous aide à la corriger. Dans cette partie de la procédure pas à pas, vous écrirez quelques lignes de code qui illustreront les fonctionnalités de correction d'erreurs de l'éditeur.

Le comportement de l'éditeur de code dépend du langage utilisé pour le codage. En général, l'éditeur de code de Visual Basic 2008 fournit des informations plus détaillées sur les erreurs lors du codage.

Pour tester la correction d'erreurs dans Visual Basic

En mode Design, double-cliquez sur la page vierge pour créer un gestionnaire de l'événement Load pour la page.

Vous utilisez le gestionnaire d'événements uniquement comme un emplacement où écrire du code.
Dans le gestionnaire, tapez la ligne suivante qui contient une erreur :
```
dim var1 as inger
```
Lorsque vous appuyez sur ENTRÉE, l'éditeur de code souligne le mot inger, indiquant que le mot n'est pas reconnu. Notez qu'une partie du soulignement est un petit trait de soulignement.
Maintenez le pointeur de la souris sur le mot inger pour afficher une info-bulle qui vous indique quelle est l'erreur.
Maintenez le pointeur de la souris sur le trait de soulignement dans le soulignement.

Le trait de soulignement se développe en une icône.
Cliquez sur l'icône.

Une liste de corrections possibles pour le mot inger s'affiche.
Sélectionnez Changer 'inger' en Integer.

Refactorisation et attribution d'un nouveau nom en C#

La refactorisation est une méthodologie logicielle qui implique la restructuration de votre code afin d'en faciliter la compréhension et la maintenance, tout en conservant ses fonctionnalités. Un exemple simple pourrait être que vous écrivez le code dans un gestionnaire d'événements afin d'obtenir des données d'une base de données. Lorsque vous développez votre page, vous découvrez que vous avez besoin d'accéder aux données de plusieurs gestionnaires différents. Par conséquent, vous refactorisez le code de la page en créant une fonction d'accès aux données dans la page et en insérant des appels à la fonction dans les gestionnaires.

L'éditeur de code comprend des outils pour vous aider à effectuer différentes tâches de refactorisation. Lors de cette procédure pas à pas, vous utiliserez deux techniques de refactorisation : l'attribution d'un nouveau nom aux symboles et l'extraction d'une méthode. D'autres options de refactorisation incluent l'encapsulation des 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. Par exemple, si vous mettez en surbrillance du code qui n'est pas une déclaration de champ, vous ne pouvez pas sélectionner l'option Encapsuler le champ. Si vous mettez en surbrillance une variable dans une méthode d'événement, vous ne pouvez pas sélectionner Transformer la variable locale en paramètre parce que les signatures des gestionnaires d'événements sont constantes.

Refactorisation de 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. 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 écrirez du code simple, puis en extrairez une méthode. La refactorisation est prise en charge pour C#, par conséquent, vous créerez une page qui utilise C# comme son langage de programmation.

Pour créer une page C#

Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom de votre site Web, puis cliquez sur Ajouter un nouvel élément.
Sous Modèles Visual Studio installés, cliquez sur Formulaire Web.
Dans la liste Langage, cliquez sur C#.

Remarque :

Vous pouvez laisser le nom Default2.aspx.
Cliquez sur Ajouter pour créer et ouvrir la nouvelle page.

Remarque :
Vous pouvez laisser le nom Default2.aspx.

Pour extraire une méthode dans une page C#

Basculez en mode Design.
Dans la boîte à outils, depuis 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 en surbrillance suivant.

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 afin de vous assurer que la sortie suivante s'affiche :
```
i = 0
i = 1
i = 2
i = 3
i = 4
```
Retournez à 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 la 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 exécuter la page une nouvelle fois, puis cliquez sur le bouton.

La page fonctionne de la même façon qu'auparavant.

Attribution d'un nouveau nom aux symboles

Lorsque vous utilisez des variables et des objets (les deux sont également appelés symboles), vous souhaitez peut-être pouvoir renommer les symboles une fois qu'ils ont été référencés dans votre code. Toutefois, l'attribution d'un nouveau nom au symbole peut entraîner l'arrêt du code si vous omettez de renommer l'une des références au symbole. Par conséquent, vous pouvez utiliser la refactorisation pour procéder à l'attribution d'un nouveau nom.

Pour utiliser la refactorisation pour renommer des symboles

Dans le gestionnaire d'événements Click, localisez la ligne suivante :

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

Cliquez avec le bouton droit sur le nom de variable alist, choisissez Refactoriser, puis Renommer.

La boîte de dialogue Renommer s'affiche.
Dans la zone Nom, tapez ArrayList1, puis appuyez sur ENTRÉE.

La boîte de dialogue Aperçu des modifications apparaît et affiche une arborescence contenant toutes les références au symbole que vous renommez.
Cliquez sur Appliquer pour fermer la boîte de dialogue Aperçu des modifications.

Les variables qui font référence en particulier à l'instance que vous avez sélectionnée sont renommées. Toutefois, notez 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 parce qu'elle ne représente pas la même valeur que la variable alist que vous avez renommée. La variable alist dans la déclaration DisplayArray est une variable locale de cette méthode. Cela montre que l'utilisation de la refactorisation pour renommer des symboles est différente de la simple exécution d'une action rechercher et remplacer dans l'éditeur ; la refactorisation renomme des symboles en tenant compte de la sémantique du symbole qu'elle utilise.

Insertion d'extraits de code

Les développeurs de pages Web devant fréquemment exécuter de nombreuses tâches de codage, l'éditeur de code fournit une bibliothèque d'extraits de code ou de blocs de code prédéveloppé. Vous pouvez insérer ces extraits de code dans votre page.

Chaque langage utilisé dans Visual Studio présente de légères différences dans la manière avec laquelle vous insérez les extraits de code. Pour plus d'informations sur l'insertion des extraits de code en Visual Basic, consultez Comment : insérer des extraits de code dans votre code (Visual Basic). Pour plus d'informations sur l'insertion des extraits de code en Visual C#, consultez Comment : utiliser des extraits de code (C#).

Étapes suivantes

Cette procédure pas à pas a montré les fonctionnalités de base de l'éditeur de code de Visual Studio 2008 pour la correction des erreurs dans votre code, la refactorisation du code, l'attribution d'un nouveau nom aux symboles et l'insertion d'extraits de 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 :

Apprenez davantage 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 de la fonctionnalité IntelliSense.
Apprenez à créer vos propres extraits de code. Pour plus d'informations, consultez Création et utilisation d'extraits de code IntelliSense.
Apprenez davantage sur les fonctionnalités spécifiques à Visual Basic d'extraits de code IntelliSense, telles que la personnalisation des extraits de code et le dépannage. Pour plus d'informations, consultez Extraits de code IntelliSense Visual Basic.
Apprenez davantage sur les fonctionnalités d'IntelliSense spécifiques à C#, telles que la refactorisation et les extraits de code. Pour plus d'informations, consultez Fonctionnalités de l'éditeur de code de Visual C#.