Partager via

Procédure pas à pas : création d'une page Web de base avec la séparation de code dans Visual Web Developer

  • Article

Mise à jour : novembre 2007

Lorsque vous créez des pages Web ASP.NET et que vous écrivez du code dans celles-ci, vous pouvez choisir entre deux modèles afin de savoir comment gérer les éléments visibles (contrôles, texte) et votre code de programmation. Dans le modèle à fichier unique, les éléments visibles et le code sont conservés ensemble dans le même fichier. Dans l'autre modèle, appelé « séparation de code », les éléments visibles se trouvent dans un fichier et le code se trouve dans un autre fichier, connu sous le nom de fichier « code-behind ». Cette procédure pas à pas vous initie aux pages Web qui utilisent la séparation de code.

Le modèle à fichier unique est présenté dans Procédure pas à pas : création d'une page Web de base dans Visual Web Developer. La procédure pas à pas que vous lisez actuellement vous montre comment créer une page Web avec les mêmes fonctionnalités que la page de la procédure pas à pas à fichier unique, mais en se focalisant sur l'utilisation de la séparation de code.

Le choix entre utiliser des pages à fichier unique et utiliser des pages avec la séparation de code est essentiellement une question de commodité et de préférence personnelle. L'utilisation des deux modèles dans Microsoft Visual Web Developer est similaire : les deux modèles sont pris en charge de façon quasi identique dans l'éditeur. Les deux modèles ont des performances équivalentes lorsque la page s'exécute. La page avec la séparation de code permet plus facilement au concepteur Web de travailler sur la disposition d'une page pendant qu'un programmeur crée le code de la page, parce que les deux pages peuvent être modifiées séparément.

Cette procédure pas à pas illustre les tâches suivantes :

  • utilisation de Visual Web Developer pour créer une page ASP.NET avec la séparation de code ;

  • ajout de contrôles ;

  • ajout de gestionnaires d'événements ;

  • exécution de pages avec le serveur de développement ASP.NET.

Composants requis

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

  • Visual Web Developer et le .NET Framework.

Création d'un site et d'une page Web

Dans cette partie de la procédure pas à pas, vous créerez un site Web et ajouterez une nouvelle page à celui-ci. Vous ajouterez également du texte HTML et exécuterez la page dans votre navigateur Web.

Si vous avez déjà créé un site Web dans Visual Web Developer (par exemple, en effectuant les étapes dans Procédure pas à pas : création d'une page Web de base dans Visual Web Developer), vous pouvez utiliser ce site et passer à l'étape ultérieure « Création d'une page » de cette procédure. Sinon, créez un site et une page Web en suivant ces étapes.

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

  1. Ouvrez Visual Web Developer.

  2. Dans le menu Fichier, cliquez sur Nouveausite Web.

    La boîte de dialogue Nouveau site Web s'affiche.

  3. Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET.

  4. 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:\SiteWebDeBase.

  5. Dans la liste Langage, cliquez sur Visual Basic ou Visual C#.

    Remarque :

    Visual Web Developer ne prend actuellement pas en charge la création de pages code-behind dans Visual J#.

    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.

  6. Cliquez sur OK.

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

Création d'une page

Lorsque vous créez un site Web, Visual Web Developer ajoute une page nommée Default.aspx. Par défaut, Visual Web Developer crée une page avec la séparation de code.

Pour ajouter une page avec la séparation de code au site Web

  1. Fermez la page Default.aspx. Pour cela, cliquez avec le bouton droit sur l'onglet contenant le nom de fichier et sélectionnez Fermer.

  2. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le site Web (par exemple, C:\SitesWebDeBase) puis choisissez Ajouter un nouvel élément.

  3. Sous Modèles Visual Studio installés, choisissez Formulaire Web.

  4. Dans la zone Nom, tapez WebPageSeparated.

  5. Dans la liste Langage, choisissez votre langage de programmation préféré (Visual Basic ou C#).

  6. Vérifiez que la case à cocher Placer le code dans un fichier distinct est activée.

    Par défaut, cette case à cocher est activée.

  7. Cliquez sur Ajouter.

    Visual Web Developer crée deux fichiers. Le premier fichier, WebPageSeparated.aspx, contiendra le texte et les contrôles de la page et est ouvert dans l'éditeur. Un deuxième fichier, WebPageSeparated.aspx.vb ou WebPageSeparated.aspx.cs (en fonction du langage de programmation sélectionné), est le fichier de code. Vous pouvez voir les deux fichiers dans l'Explorateur de solutions en cliquant sur le signe plus (+) à côté du fichier WebPageSeparated.aspx ; le fichier de code a été créé, mais n'est pas ouvert. Vous l'ouvrirez ultérieurement lors de la procédure pas à pas lorsque vous écrirez du code.

Ajout de HTML à la page

Dans cette partie de la procédure pas à pas, vous ajouterez du texte HTML statique à la page WebPageSeparated.aspx.

Pour ajouter du texte à la page

  1. Cliquez sur l'onglet Design en bas de la fenêtre de document pour basculer en mode Design.

    Le mode Design affiche la page que vous utiliserez en mode de type WYSIWYG. À ce stade, il n'y a pas de texte ni de contrôles sur la page, la page est donc vide.

  2. Placez le pointeur d'insertion sur l'élément div qui est déjà dans la page.

  3. Tapez les mots Bienvenue dans Visual Web Developer intégrant la séparation de code.

  4. Basculez en mode Source.

    Vous pouvez voir le HTML que vous avez créé en tapant en mode Design. À ce stade, la page ressemble à une page HTML ordinaire. La seule différence est que la directive <%@ Page %> se trouve en haut de la page.

Ajout et programmation de contrôles

Dans cette partie de la procédure pas à pas, vous ajouterez un bouton, une zone de texte et un contrôle label à la page et écrirez du code afin de gérer l'événement Click du bouton. Les contrôles serveur qui incluent des boutons, des étiquettes, des zones de texte et d'autres contrôles familiers fournissent des fonctionnalités de traitement des formulaires typiques pour vos pages Web ASP.NET. Toutefois, vous pouvez programmer les contrôles avec le code qui s'exécute sur le serveur, mais pas chez le client.

Pour ajouter des contrôles à la page

  1. Cliquez sur l'onglet Design pour basculer en mode Design.

  2. Placez le pointeur d'insertion après le texte que vous avez ajouté précédemment.

  3. Appuyez sur ENTRÉE plusieurs fois afin de libérer de l'espace.

  4. À partir de l'onglet Standard de la Boîte à outils, faites glisser trois contrôles sur la page : un contrôle TextBox, un contrôle Button et un contrôle Label.

  5. Placez le pointeur d'insertion devant la zone de texte et tapez Entrez votre nom :.

    Ce texte HTML statique est la légende du contrôle TextBox. Vous pouvez mixer des contrôles HTML statiques et des contrôles serveur sur la même page.

Définition des propriétés du contrôle

Visual Web Developer vous permet de définir les propriétés des contrôles sur la page de différentes façons. Dans cette partie de la procédure pas à pas, vous utiliserez des propriétés en mode Design et en mode Source.

Pour définir des propriétés du contrôle

  1. Sélectionnez le contrôle Button et, dans la fenêtre Propriétés, affectez à la propriété Text la valeurNom complet.

  2. Basculez en mode Source.

    Le mode Source affiche le HTML de la page, y compris les éléments que Visual Web Developer a créés pour les contrôles serveur. Les contrôles sont déclarés à l'aide de la syntaxe de type HTML, mais les balises utilisent le préfixe asp: et incluent l'attribut .

    Les propriétés des contrôles sont déclarées comme attributs. Par exemple, lorsque vous définissiez la propriété Text du bouton lors de l'étape 1, vous définissiez en fait l'attribut Text dans le balisage du contrôle.

    Notez que tous les contrôles se trouvent dans un élément form qui possède également l'attribut . L'attribut et le préfixe asp: des balises de contrôle marquent les contrôles afin qu'ils soient traités par ASP.NET lors de l'exécution de la page.

Programmation du contrôle Button

Pour cette procédure pas à pas, vous écrirez du code qui lit le nom que l'utilisateur entre dans la zone de texte et affiche dans le contrôle Label.

Pour ajouter un gestionnaire d'événements de bouton par défaut

  1. Basculez en mode Design.

  2. Double-cliquez sur le contrôle Button.

    Visual Web Developer ouvre le fichier WebPageSeparated.aspx.vb ou WebPageSeparated.aspx.cs dans une fenêtre séparée de l'éditeur. Le fichier contient un gestionnaire d'événements Click squelette pour le bouton.

  3. Exécutez le gestionnaire d'événements Click en ajoutant le code en surbrillance suivant :

    Protected Sub Button1_Click(ByVal sender As Object, _
    ByVal e As System.EventArgs) Handles Button1.Click
        Label1.Text = Textbox1.Text & ", welcome to Visual Web Developer!"
End Sub

    protected void Button1_Click(object sender, System.EventArgs e)
{    
    Label1.Text = TextBox1.Text + ", welcome to Visual Web Developer!";
}

    Notez que lorsque vous tapez, IntelliSense vous aide dans les choix contextuels. Cela est identique à ce qu'il se passe lorsque vous codez dans une page à fichier unique.

Examen de la page et du fichier de code

À présent, vous disposez de deux fichiers qui composent la page WebPageSeparated complète : WebPageSeparated.aspx et WebPageSeparated.aspx.vb ou WebPageSeparated.aspx.cs. Dans cette section de la procédure pas à pas, vous examinerez la structure de ces fichiers ainsi que leurs relations.

Pour examiner la page et le fichier de code

  1. Cliquez sur l'onglet WebPageSeparated.aspx en haut de la fenêtre de l'éditeur afin de basculer vers le fichier d'échange.

  2. Basculez en mode Source.

    En haut de la page se trouve une directive @ page qui lie cette page au fichier de code. La directive ressemble au code suivant :

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="WebPageSeparated.aspx.vb" Inherits="WebPageSeparated" %>

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="WebPageSeparated.aspx.cs" Inherits="WebPageSeparated" %>

    (Le retour à la ligne ne s'applique pas dans l'éditeur et l'attribut de langage et les extensions de nom de fichier correspondront au langage de programmation que vous avez sélectionné.)

    Lors de l'exécution de la page, ASP.NET crée dynamiquement une instance d'une classe représentant la page. L'attribut Inherits identifie la classe définie dans le fichier code-behind à partir duquel la page .aspx est dérivée. Par défaut, Visual Web Developer utilise le nom de page comme base pour le nom de classe dans le fichier code-behind.

    L'attribut CodeFile identifie le fichier de code pour cette page. En des termes plus simples, le fichier code-behind contient le code de gestion des événements pour votre page.

  3. Cliquez sur l'onglet WebPageSeparated.aspx.vb ou WebPageSeparated.aspx.cs pour basculer vers le fichier de code.

    Le fichier de code contient le code qui est semblable à une définition de classe. Toutefois, il ne s'agit pas d'une définition de classe complète mais d'une « classe partielle » qui contient uniquement une partie de la classe complète qui composera la page. En particulier, la classe partielle définie dans le fichier de code contient les gestionnaires d'événements et tout autre code personnalisé que vous écrivez. Au moment de l'exécution, ASP.NET génère une autre classe partielle contenant votre code utilisateur. Cette classe complète est ensuite utilisée en tant que classe de base qui est utilisée pour restituer la page. Pour plus d'informations, consultez Vue d'ensemble de la classe de page ASP.NET.

    Remarque :

    Si vous maîtrisez le modèle code-behind utilisé dans Microsoft Visual Studio .NET 2003, vous remarquerez que dans le nouveau modèle, la classe code-behind ne contient aucun code généré en dehors de la définition de classe elle-même. Par exemple, la classe ne contient pas de variables d'instance pour les contrôles sur la page. Ce type de code généré n'est plus requis.

Exécution de la page

Vous pouvez à présent tester la page.

Pour exécuter la page

  1. Appuyez sur CTRL+F5 pour exécuter la page dans le navigateur.

    La page s'exécute en utilisant le serveur de développement ASP.NET.

    Remarque :

    Si le navigateur affiche une erreur 502 ou une erreur indiquant que la page ne peut pas être affichée, vous devrez peut-être configurer votre navigateur pour ignorer les serveurs proxy pour les demandes locales. Pour plus d'informations, consultez Comment : contourner un serveur proxy pour les demandes Web locales.

  2. Entrez un nom dans la zone de texte, puis cliquez sur le bouton.

    Le nom que vous avez entré s'affiche dans le contrôle Label.

  3. Dans le navigateur, affichez la source de la page que vous exécutez.

  4. Fermez le navigateur.

    La page fonctionne exactement de la même façon que s'il s'agissait d'une page à fichier unique. (Si vous avez suivi les étapes dans Procédure pas à pas : création d'une page Web de base dans Visual Web Developer pour créer une page à fichier unique, vous pouvez comparer les deux pages afin de constater qu'elles sont identiques lors de l'exécution.)

Étapes suivantes

Cette procédure pas à pas a illustré la création et la modification d'une page Web qui utilise la séparation de code. Du point de vue de la création et de l'exécution de la page, il n'y a pas de différence significative entre une page à fichier unique et une page avec la séparation de code.

Vous souhaiterez peut-être explorer d'autres fonctionnalités. Vous pouvez, par exemple, souhaiter effectuer les opérations suivantes :

Voir aussi

Tâches

Procédure pas à pas : création d'une page Web de base dans Visual Web Developer

Concepts

Types des sites Web dans Visual Web Developer