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

  • Article

Mise à jour : novembre 2007

Cette procédure pas à pas vous fournit une introduction à Microsoft Visual Web Developer. Elle vous guide à travers la création d'une page simple à l'aide de Visual Web Developer, en illustrant les techniques de base de la création d'une page, de l'ajout de contrôles et de l'écriture de code.

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

  • Création d'un site Web de système de fichiers.

  • Familiarisation avec Visual Web Developer.

  • Création d'une page ASP.NET à fichier unique dans Visual Web Developer.

  • Ajout de contrôles ;

  • Ajout de gestionnaires d'événements ;

  • Exécution des pages avec le Serveurs Web dans Visual Web Developer.

Composants requis

Pour exécuter cette procédure pas à pas, vous avez besoin des éléments suivants :

  • Visual Web Developer

  • .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.

Dans cette procédure pas à pas, vous créerez un site Web de système de fichiers qui ne nécessite pas que vous utilisiez Microsoft Internet Information Services (IIS). À la place, vous créerez et exécuterez votre page dans le système de fichiers local.

Un site Web de système de fichiers est un site qui stocke des pages et d'autres fichiers dans un dossier que vous choisissez sur votre ordinateur local. D'autres options de site Web incluent un site Web IIS local qui stocke vos fichiers dans un sous-dossier à la racine des services ISS locale (en général, \Inetpub\Wwwroot\). Un Site FTP stocke des fichiers sur un serveur distant auquel vous accédez via Internet en utilisant le protocole FTP (File Transfer Protocol). Un site distant stocke des fichiers sur un serveur distant auquel vous pouvez accéder via un réseau local. Pour plus d'informations, consultez Procédure pas à pas : modification de sites Web avec FTP dans Visual Web Developer. De plus, les fichiers de site Web peuvent être stockés dans un système de contrôle de code source tel que Visual SourceSafe. Pour plus d'informations, consultez Introduction au contrôle de code source.

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

  1. Ouvrez Visual Web Developer.

  2. Dans le menu Fichier, cliquez sur Nouveau site Web.

    La boîte de dialogue Nouveau site Web apparaît, comme illustré dans la capture d'écran suivante.

    Boîte de dialogue Nouveau site Web

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

    Lorsque vous créez un site Web, vous spécifiez un modèle. Chaque modèle crée une application Web qui contient différents fichiers et dossiers. Dans cette procédure pas à pas, vous créez un site Web selon le modèle Site Web ASP.NET qui crée quelques dossiers et quelques fichiers par défaut.

  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, sélectionnez Visual Basic ou Visual C#.

    Le langage de programmation choisi sera la valeur par défaut de votre site Web. Toutefois, vous pouvez utiliser plusieurs langages dans la même application Web en créant des pages et des composants dans différents langages de programmation.

  6. Cliquez sur OK.

    Visual Web Developer crée le dossier et une page nommée Default.aspx. Lorsqu'une nouvelle page est créée, par défaut, Visual Web Developer affiche la page en mode Source, où vous pouvez consulter les éléments HTML de la page. La capture d'écran suivante illustre le mode Source d'une page Web par défaut.

    Mode Source de la page par défaut

Visite guidée de Visual Web Developer

Avant de continuer sur la page, il est utile de vous familiariser avec l'environnement de développement Visual Web Developer. L'illustration suivante vous indique les fenêtres et les outils disponibles dans Visual Web Developer.

Diagramme de l'environnement Visual Web Developer

Pour vous familiariser avec le concepteur Web dans Visual Web Developer

  • Examinez l'illustration précédente et liez le texte à la liste suivante, qui décrit les fenêtres et les outils le plus couramment utilisés. (Tous les fenêtres et outils que vous voyez ne sont pas répertoriés ici, uniquement ceux qui sont marqués dans l'illustration précédente.)

    • Barres d'outils. Fournissez des commandes pour mettre en forme le texte, rechercher du texte, et ainsi de suite. Certaines barres d'outils sont disponibles uniquement lorsque vous travaillez en mode Design.

    • Explorateur de solutions. Affiche les fichiers et les dossiers dans votre site Web.

    • Fenêtre de document. Affiche les documents que vous utilisez dans les fenêtres à onglet. Vous pouvez basculer entre des documents en cliquant sur les onglets.

    • Fenêtre Propriétés. Vous permet de modifier des paramètres pour la page, les éléments HTML, les contrôles et d'autres objets.

    • Onglet Affichage. Vous présente les différents affichages du même document. Le mode Design est une surface de modification proche du mode WYSIWYG. Le mode Source est l'éditeur HTML de la page. Le mode Fractionné affiche le document en mode Design et en mode Source. Vous utiliserez ultérieurement les modes Design et Source dans cette procédure pas à pas. Si vous préférez ouvrir des pages Web en mode Design, dans le menu Outils, cliquez sur Options, sélectionnez le nœud Concepteur HTML et modifiez l'option Démarrer les pages en.

    • Boîte à outils. Fournit les contrôles et les éléments HTML que vous pouvez faire glisser sur votre page. Les éléments de la Boîte à outils sont regroupés selon leur fonction.

    • Explorateur de serveurs/Explorateur de bases de données. Affiche les connexions de bases de données. Si l'Explorateur de serveurs n'est pas visible dans Visual Web Developer, dans le menu Affichage, cliquez sur Explorateur de serveurs ou Explorateur de bases de données.

      Remarque :

      Vous pouvez réordonner et redimensionner les fenêtres selon vos préférences. Le menu Affichage vous permet d'afficher des fenêtres supplémentaires.

Création d'une page Web Forms

Lorsque vous créez un site Web, Visual Web Developer ajoute une page ASP.NET (page Web Forms) nommée Default.aspx. Vous pouvez utiliser la page Default.aspx comme page d'accueil pour votre site Web. Toutefois, pour cette procédure pas à pas, vous devez créer et utiliser une nouvelle page.

Pour ajouter une page au site Web

  1. Fermez la page Default.aspx. Pour ce faire, 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 cliquez sur Ajouter un nouvel élément.

  3. Sous Modèles Visual Studio installés, cliquez sur Formulaire Web. La capture d'écran suivante illustre la boîte de dialogue Ajouter un nouvel élément.

    Ajouter un nouvel élément (boîte de dialogue)

  4. Dans la zone Nom, tapez PremièrePageWeb.

  5. Dans la liste Langage, choisissez le langage de programmation que vous préférez utiliser (Visual Basic, C# ou J#). Lorsque vous avez créé le site Web, vous avez spécifié un langage par défaut. Toutefois, chaque fois que vous créez une page ou un composant pour votre site Web, vous pouvez modifier le langage à partir de la valeur par défaut. Vous pouvez utiliser des langages de programmation différents dans un même site Web.

  6. Désactivez la case à cocher Placer le code dans un fichier distinct.

    Dans cette procédure pas à pas, vous allez créer une page à fichier unique qui inclut le code et le HTML. Le code des pages ASP.NET peut être stocké dans la page ou dans un fichier de classe distinct. Pour en savoir plus sur la conservation du code dans un fichier séparé, consultez Procédure pas à pas : création d'une page Web de base avec la séparation de code dans Visual Web Developer.

  7. Cliquez sur Ajouter.

    Visual Web Developer crée la page et l'ouvre en mode Source.

Ajout de HTML à la page

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

Pour ajouter du texte à la page

  1. En bas de la fenêtre de document, cliquez sur l'onglet Design 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. Sur la page, tapez Welcome to Visual Web Developer.

    La capture d'écran suivante affiche le texte que vous avez tapé en mode Design.

    Texte de bienvenue tel qu'affiché en mode Design

  3. Basculez en mode Source.

    Vous pouvez afficher le HTML que vous avez créé en tapant en mode Design, comme affiché dans la capture d'écran suivante.

    Texte de bienvenue tel qu'affiché en mode Source

Exécution de la page

Avant de continuer à ajouter des contrôles sur la page, vous pouvez essayer de l'exécuter. Pour exécuter une page, vous avez besoin d'un serveur Web. Dans un site Web de production, vous utilisez IIS comme votre serveur Web. Toutefois, pour tester une page, vous pouvez utiliser le serveur de développement ASP.NET qui s'exécute en local et ne requiert pas IIS. Pour les sites Web de système de fichiers, le serveur Web par défaut dans Visual Web Developer est le serveur de développement ASP.NET.

Pour exécuter la page

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

    Visual Web Developer démarre le serveur de développement ASP.NET. Une icône apparaît sur la barre d'outils pour indiquer que le serveur Web Visual Web Developer est en cours d'exécution, comme illustré dans la capture d'écran suivante.

    Icône de serveur Web Visual Web Developer

    La page s'affiche dans le navigateur. Bien que la page que vous avez créée ait une extension .aspx, elle s'exécute actuellement comme toute page HTML.

    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. Fermez le navigateur.

Ajout et programmation de contrôles

Dans cette partie de la procédure pas à pas, vous ajoutez un contrôle Button, TextBox et Label à la page et écrivez le code pour gérer l'événement Click pour le contrôle Button.

Vous devez à présent ajouter des contrôles serveur à la page. 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 types 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. Appuyez sur MAJ+ENTRÉE plusieurs fois afin de libérer de l'espace.

  3. À partir du groupe 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.

  4. Placez le point d'insertion sur le contrôle TextBox, puis tapez Entrez votre nom :.

    Ce texte HTML statique est la légende du contrôle TextBox. Vous pouvez combiner des contrôles HTML statiques et des contrôles serveur sur la même page. La capture d'écran suivante montre comment les trois contrôles apparaissent en mode Design.

    Contrôles en mode Design

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 définirez 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, puis dans la fenêtre Propriétés, affectez Afficher le nom à Text, comme affiché dans la capture d'écran suivante.

    Texte du contrôle Button modifié

  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 avez défini la propriété Text pour le contrôle Button, dans l'étape 1, vous avez réellement défini 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 côté serveur lors de l'exécution de la page. Le code extérieur de <form > et les éléments <script > sont envoyés comme balise cliente ou code au navigateur, ce qui explique pourquoi le code ASP.NET doit être à l'intérieur d'un élément dont la balise d'ouverture contient l'attribut .

  3. Placez le point d'insertion dans un espace à l'intérieur de la balise <asp:label>, puis appuyez sur ESPACE.

    Une liste déroulante apparaît qui affiche la liste de propriétés que vous pouvez définir pour un contrôle Label. Cette fonctionnalité, connu sous le nom d'IntelliSense, vous aide en mode Source à utiliser la syntaxe des contrôles serveur, les éléments HTML et d'autres éléments sur la page. La capture d'écran suivante affiche la liste déroulante IntelliSense pour le contrôle Label.

    IntelliSense pour le contrôle Label

  4. Sélectionnez ForeColor puis tapez un signe égal (=). IntelliSense affiche une liste de couleurs.

    Remarque :

    Vous pouvez afficher une liste déroulante IntelliSense à tout moment en appuyant sur Ctrl+J.

  5. Sélectionnez la couleur du texte du contrôle Label.

    L'attribut ForeColor est rempli avec la couleur que vous avez sélectionnée.

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 le nom 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 bascule en mode Source et crée un gestionnaire d'événements squelette pour l'événement par défaut du contrôle Button, l'événement Click.

    Remarque :

    Vous pouvez créer des gestionnaires d'événements en double-cliquant sur un contrôle en mode Design.

  3. Dans le gestionnaire, tapez :

    Label1.

    Visual Web Developer affiche une liste de membres disponibles pour le contrôle Label, comme illustré dans la capture d'écran suivante.

    Membres du contrôle Label disponible

  4. Finissez le bouton du gestionnaire d'événements Click afin qu'il s'affiche comme illustré dans l'exemple de code suivant.

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    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!";
}

  5. Faites défiler jusqu'à l'élément <asp:Button>. Notez que l'élément <asp:Button> a maintenant l'attribut OnClick="Button1_Click". Cet attribut lie l'événement Click du bouton à la méthode de gestionnaire que vous avez codée dans l'étape 4.

    Les méthodes de gestionnaire d'événements peuvent porter n'importe quel nom ; le nom affiché est le nom par défaut créé par Visual Web Developer. Il faut savoir que le nom utilisé pour l'attribut OnClick doit correspondre au nom d'une méthode dans la page.

    Remarque :

    Si vous utilisez Visual Basic avec la séparation de code, Visual Web Developer n'ajoute pas d'attribut OnClick explicite. À la place, l'événement est lié à la méthode de gestionnaire à l'aide d'un mot clé Handles sur la déclaration du gestionnaire lui-même.

Exécution de la page

Vous pouvez maintenant tester les contrôles serveur sur 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 de nouveau en utilisant le serveur de développement ASP.NET.

  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. Notez que lorsque vous cliquez sur le bouton, la page est publiée au serveur Web. ASP.NET recrée ensuite la page, exécute votre code (dans ce cas, le gestionnaire d'événements Click du contrôle Button s'exécute), puis envoie la nouvelle page au navigateur. Si vous regardez la barre d'état dans le navigateur, vous pouvez voir que la page fait un aller-retour sur le serveur Web chaque fois que vous cliquez sur le bouton.

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

    Dans le code source de la page, vous voyez uniquement le code HTML ordinaire ; vous ne voyez pas les éléments <asp:> que vous utilisez dans l'affichage Source. Lorsque la page s'exécute, ASP.NET traite les contrôles serveur et restitue des éléments HTML sur la page qui exécute les fonctions qui représentent le contrôle. Par exemple, le contrôle <asp:Button> est restitué comme l'élément HTML <input type="submit">.

  4. Fermez le navigateur.

Utilisation de contrôles supplémentaires

Dans cette partie de la procédure pas à pas, vous utiliserez le contrôle Calendar qui affiche les dates mois par mois. Le contrôle Calendar est un contrôle plus complexe que le bouton, la zone de texte et l'étiquette que vous avez utilisés, et illustre quelques fonctions supplémentaires de contrôles serveur.

Dans cette section, vous ajouterez un contrôle Calendar à la page et le mettrez en forme.

Pour ajouter un contrôle Calendar

  1. Dans Visual Web Developer, basculez vers le mode Design.

  2. À partir de la section Standard de la Boîte à outils, faites glisser un contrôle Calendar sur la page.

    Le panneau des balises actives du calendrier est affiché. Le panneau affiche des commandes qui vous facilitent l'exécution des tâches les plus courantes du contrôle sélectionné. La capture d'écran suivante affiche le contrôle Calendar tel que restitué en mode Design.

    Contrôle Calendar en mode Design

  3. Dans le panneau des balises actives, sélectionnez Mise en forme automatique.

    La boîte de dialogue Mise en forme automatique s'affiche, ce qui vous permet de sélectionner une méthode de mise en forme pour le calendrier. La capture d'écran suivante affiche la boîte de dialogue Mise en forme automatique pour le contrôle Calendar.

    Boîte de dialogue Mise en forme automatique du contrôle Calendar

  4. Dans la liste Sélectionner un schéma, sélectionnez Simple, puis cliquez sur OK.

  5. Basculez en mode Source.

    L'élément <asp:Calendar> s'affiche. Cet élément est beaucoup plus long que les éléments des contrôles simples que vous avez créés précédemment. Il inclut également des sous-éléments, tels que <WeekEndDayStyle>, qui représentent plusieurs paramètres de mise en forme. La capture d'écran suivante affiche le contrôle Calendar en mode Source.

    Contrôle Calendar en mode Source

Programmation du contrôle Calendar

Dans cette section, vous programmerez le contrôle Calendar pour afficher la date en cours de sélection.

Pour programmer le contrôle Calendar

  1. En mode Design, double-cliquez sur le contrôle Calendar.

    Un nouveau gestionnaire d'événements est créé en mode Source.

  2. Terminez le gestionnaire d'événements SelectionChanged par le code en surbrillance suivant.

    Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = Calendar1.SelectedDate.ToString()
End Sub

    protected void Calendar1_SelectionChanged(object sender, System.EventArgs e)
{    
    Label1.Text = Calendar1.SelectedDate.ToString();
}

Exécution de la page

Vous pouvez à présent tester le calendrier.

Pour exécuter la page

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

  2. Cliquez sur une date dans le calendrier.

    La date sur laquelle vous avez cliqué est affichée dans le contrôle Label.

  3. Dans le navigateur, affichez le code source de la page.

    Notez que le contrôle Calendar a été restitué à la page sous forme de tableau, dont chaque jour est un élément <td> contenant un élément <a>.

  4. Fermez le navigateur.

Étapes suivantes

Cette procédure pas à pas a illustré les fonctionnalités de base du Concepteur de pages Visual Web Developer. Maintenant que vous savez créer et modifier une page Web dans Visual Web Developer, vous êtes susceptible de souhaiter 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'un site Web IIS local dans Visual Web Developer

Procédure pas à pas : modification de sites Web avec FTP dans Visual Web Developer

Concepts

Vue d'ensemble d'ASP.NET

Utilisation de Visual Web Developer