Modification du code ASP.NET Web Forms dans Visual Studio 2013

par Erik Reitan

Dans de nombreuses pages ASP.NET formulaire web, vous écrivez du code dans Visual Basic, C# ou une autre langue. 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 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.

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

Corrigez les erreurs de codage inline.
Refactorisez et renommez le code.
Renommez des variables et des objets.
Insérez des extraits de code.

Prerequisites

Pour effectuer 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.

Note

Microsoft Visual Studio 2013 et Microsoft Visual Studio Express 2013 pour web seront souvent appelés Visual Studio dans cette série de tutoriels.

Si vous utilisez Visual Studio, cette procédure pas à pas suppose que vous avez sélectionné la collection de paramètres de développement web la première fois que vous avez démarré Visual Studio. Pour plus d’informations, consultez Guide pratique pour sélectionner les paramètres de l’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 d’application web ASP.NET dans la colonne centrale.
Nommez votre projet BasicWebApp , puis 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 d’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 l’Explorateur de solutions, cliquez avec le bouton droit sur le nom de l’application web (dans ce tutoriel, 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 de modèles Visual C# ->Web à gauche. Ensuite, sélectionnez Formulaire web dans la liste intermédiaire et nommez-le FirstWebPage.aspx.
Cliquez sur Ajouter pour ajouter la page Web Forms à votre projet.
Visual Studio crée la page et l’ouvre.
Ensuite, définissez cette nouvelle page comme page de démarrage par défaut. Dans l’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écutez 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 effectué 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 des erreurs dans l’éditeur.

Pour corriger les 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 pour la page.
Vous utilisez le gestionnaire d’événements uniquement comme emplacement pour écrire du code.
Dans le gestionnaire, tapez la ligne suivante qui contient une erreur et appuyez sur Entrée :
```
string myStr = "Loading..."
```
Lorsque vous appuyez sur Entrée, l’éditeur de code place les traits de soulignement vert et rouge (communément appelés lignes « quiggly ») sous les zones du code qui présentent 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 au-dessus myStr pour afficher une info-bulle qui vous indique l’avertissement. Maintenez également le pointeur de la souris sur le soulignement rouge pour afficher 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.

Note

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

Refactorisation et renommage

La refactorisation est une méthodologie logicielle qui implique la restructuration de votre code pour faciliter la compréhension et la maintenance, tout en préservant ses fonctionnalités. Un exemple simple peut être que 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 à partir 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 inclut des outils pour vous aider à effectuer différentes tâches de refactorisation. Dans cette procédure pas à pas, vous allez utiliser deux techniques de refactorisation : renommer des variables et extraire des méthodes. D’autres options de refactorisation incluent l’encapsulation de champs, la promotion des variables locales aux 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 extraire une méthode à partir de celle-ci. La refactorisation est prise en charge pour C#. Vous allez donc créer une page qui utilise C# comme langage de programmation.

Pour extraire une méthode dans une page C#

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

Double-cliquez sur le composant Button pour créer un gestionnaire de 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 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 DisplayArrayet place un appel à la nouvelle méthode dans le gestionnaire Click où la boucle a été initialement.

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 de la même façon qu’avant. La DisplayArray méthode peut maintenant être appelée n’importe où dans la classe de page.

Renommer des variables

Lorsque vous travaillez avec des variables, ainsi que des objets, vous souhaiterez peut-être les renommer une fois qu’elles sont déjà référencées dans votre code. Toutefois, le changement de nom des variables et des objets peut entraîner l’arrêt du code si vous ne renommez pas 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 sélectionnez Renommer.

La boîte de dialogue Renommer s’affiche.
Dans la zone Nouveau nom , tapez ArrayList1 et vérifiez que la case à cocher Aperçu des modifications de 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 référence spécifiquement à l’instance que vous avez sélectionnée 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 illustre que l’utilisation de la refactorisation pour renommer des variables est différente de l’exécution d’une action de recherche et de remplacement dans l’éditeur ; la refactorisation renomme les variables avec connaissance de la sémantique de la variable avec laquelle elle fonctionne.

Insertion d’extraits de code

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

Chaque langage 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 Les 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 illustre 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. Des fonctionnalités supplémentaires dans l’éditeur peuvent rendre le développement d’applications rapide et facile. Par exemple, vous souhaiterez peut-être :

En savoir plus sur les fonctionnalités d’IntelliSense, telles que la modification d’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 spécifiques à 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.

Commentaires

Cette page a-t-elle été utile ?

Last updated on 2026-03-27