Share via

Utilisation de Visual Studio 2013 pour créer une page Web Forms ASP.NET de base 4.5

  • Article

par Erik Reitan

Pour le développement de nouvelles applications web, nous vous recommandons Razor Pages. Pour plus d’informations, consultez Prise en main des pages Razor.

Cette procédure pas à pas vous présente l’environnement de développement web dans Microsoft Visual Studio 2013 et dans Microsoft Visual Studio Express 2013 pour le web. Cette procédure pas à pas vous guide tout au long de la création d’une page ASP.NET Web Forms simple et illustre les techniques de base de création d’une page, d’ajout de contrôles et d’écriture de code.

Cette procédure pas à pas décrit notamment les tâches suivantes :

  • Création d’un système de fichiers Web Forms projet d’application.
  • Vous familiariser avec Visual Studio.
  • Création d’une page ASP.NET.
  • Ajout de contrôles.
  • Ajout de gestionnaires d’événements.
  • Exécution et test d’une page à partir de Visual Studio.

Prérequis

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

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. Vous allez également ajouter du texte HTML et exécuter la page dans votre navigateur.

Pour créer un projet d’application web

  1. Ouvrez Microsoft Visual Studio.

  2. Dans le menu Fichier, sélectionnez Nouveau projet.
    Menu Fichier

    La boîte de dialogue Nouveau projet apparaît.

  3. Sélectionnez le groupe Modèles ->Visual C# ->Modèles web sur la gauche.

  4. Choisissez le modèle Application Web ASP.NET dans la colonne centrale.

  5. Nommez votre projet BasicWebApp et cliquez sur le bouton OK .
    Boîte de dialogue Nouveau projet

  6. Ensuite, sélectionnez le modèle Web Forms, puis cliquez sur le bouton OK pour créer le projet.
    Boîte de dialogue New ASP.NET Project

    Visual Studio crée un projet qui inclut des fonctionnalités prédéfinies basées sur le modèle Web Forms. Il vous fournit non seulement une page Home.aspx , une page About.aspx , une page Contact.aspx , mais inclut également des fonctionnalités d’appartenance qui inscrivent les utilisateurs et enregistrent leurs informations d’identification afin qu’ils puissent se connecter à votre site web. Lorsqu’une page est créée, Par défaut, Visual Studio affiche la page en mode Source , où vous pouvez voir les éléments HTML de la page. L’illustration suivante montre ce que vous verrez en mode Source si vous créez une page web nommée BasicWebApp.aspx.
    Mode Source

Présentation de l’environnement de développement web Visual Studio

Avant de continuer en modifiant la page, il est utile de vous familiariser avec l’environnement de développement Visual Studio. L’illustration suivante montre les fenêtres et les outils disponibles dans Visual Studio et Visual Studio Express pour le web.

Notes

Ce diagramme montre les fenêtres par défaut et les emplacements des fenêtres. Le menu Affichage vous permet d’afficher des fenêtres supplémentaires et de réorganiser et de redimensionner les fenêtres en fonction de vos préférences. Si des modifications ont déjà été apportées à la disposition de la fenêtre, ce que vous voyez ne correspondra pas à l’illustration.

Environnement Visual Studio

Environnement Visual Studio

Familiarisez-vous avec le concepteur web

Examinez l’illustration ci-dessus et faites correspondre le texte à la liste suivante, qui décrit les fenêtres et outils les plus couramment utilisés. (Toutes les fenêtres et outils que vous voyez ne sont pas répertoriés ici, uniquement ceux marqués dans l’illustration précédente.)

  • Barres d’outils. Fournissez des commandes pour la mise en forme du texte, la recherche de texte, etc. Certaines barres d’outils sont disponibles uniquement lorsque vous travaillez en mode Création .
  • Explorateur de solutions fenêtre. Affiche les fichiers et dossiers de votre application web.
  • Fenêtre Document. Affiche les documents sur lesquels vous travaillez dans des fenêtres à onglets. Vous pouvez basculer d’un document à l’autre en cliquant sur les onglets.
  • Fenêtre Propriétés . Vous permet de modifier les paramètres de la page, des éléments HTML, des contrôles et d’autres objets.
  • Afficher les onglets. Présentez différentes vues du même document. Le mode Création est une surface d’édition proche de WYSIWYG. La vue source est l’éditeur HTML de la page. Le mode fractionné affiche à la fois le mode Création et la vue Source pour le document. Vous allez utiliser les vues Création et Source plus loin dans cette procédure pas à pas. Si vous préférez ouvrir des pages web en mode Création, dans le menu Outils, cliquez sur Options, sélectionnez le nœud HTML Designer, puis modifiez l’option Démarrer les pages dans.
  • Boîte à outils. Fournit des contrôles et des éléments HTML que vous pouvez faire glisser sur votre page. Les éléments de boîte à outils sont regroupés par fonction commune.
  • S erver Explorer. Affiche connexions aux bases de données. Si server Explorer n’est pas visible, dans le menu Affichage, cliquez sur Serveur Explorer.

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

  1. Fermez la page Default.aspx . Pour ce faire, cliquez sur l’onglet qui affiche le nom du fichier, puis cliquez sur l’option fermer.
  2. 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.
  3. 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.
    Boîte de dialogue Ajouter un nouvel élément
  4. Cliquez sur Ajouter pour ajouter la page web à votre projet.
    Visual Studio crée la nouvelle page et l’ouvre.

Ajout du code HTML à la page

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

Pour ajouter du texte à la page

  1. En bas de la fenêtre de document, cliquez sur l’onglet Création pour basculer en mode Création .

    Le mode Création affiche la page active de manière WYSIWYG. À ce stade, vous n’avez pas de texte ou de contrôles sur la page. La page est donc vide, à l’exception d’une ligne pointillée qui présente un rectangle. Ce rectangle représente un élément div sur la page.

  2. Cliquez à l’intérieur du rectangle délimité par une ligne en pointillés.

  3. Tapez Bienvenue dans Visual Web Developer et appuyez deux fois sur Entrée .

    L’illustration suivante montre le texte que vous avez tapé en mode Création .

    Texte d’accueil en mode Création

  4. Basculez vers la vue Source .

    Vous pouvez voir le code HTML en mode Source que vous avez créé lorsque vous avez tapé en mode Création .
    Page web avec texte statique

Exécution de la page

Avant de continuer en ajoutant des contrôles à la page, vous pouvez d’abord l’exécuter.

Pour exécuter la page

  1. Dans Explorateur de solutions, cliquez avec le bouton droit sur FirstWebPage.aspx et sélectionnez Définir comme page de démarrage.

  2. Appuyez sur Ctrl+F5 pour exécuter la page.

    La page s’affiche dans le navigateur. Bien que la page que vous avez créée ait une extension de nom de fichier .aspx, elle s’exécute actuellement comme n’importe quelle page HTML.

    Pour afficher une page dans le navigateur, vous pouvez également cliquer avec le bouton droit sur la page dans Explorateur de solutions et sélectionner Afficher dans le navigateur.

  3. Fermez le navigateur pour arrêter l’application web.

Ajout et programmation de contrôles

Vous allez maintenant ajouter des contrôles serveur à la page. Les contrôles serveur, tels que les boutons, les étiquettes, les zones de texte et d’autres contrôles familiers, fournissent des fonctionnalités de traitement de formulaire classiques pour vos pages Web Forms. Toutefois, vous pouvez programmer les contrôles avec du code qui s’exécute sur le serveur plutôt que sur le client.

Vous allez ajouter un contrôle Button , un contrôle TextBox et un contrôle Label à la page et écrire du code pour gérer l’événement Click pour le contrôle Button .

Pour ajouter des contrôles à la page

  1. Cliquez sur l’onglet Création pour basculer en mode Création .

  2. Placez le point d’insertion à la fin du texte Bienvenue dans Visual Web Developer et appuyez cinq fois ou plus sur ENTRÉE pour faire de la place dans la zone div élément.

  3. Dans la boîte à outils, développez le groupe Standard s’il n’est pas déjà développé.
    Notez que vous devrez peut-être développer la fenêtre Boîte à outils sur la gauche pour l’afficher.

  4. Faites glisser un contrôle TextBox sur la page et déposez-le au milieu de la zone d’élément div qui contient Bienvenue dans Visual Web Developer dans la première ligne.

  5. Faites glisser un contrôle Button sur la page et déposez-le à droite du contrôle TextBox .

  6. Faites glisser un contrôle Label sur la page et déposez-le sur une ligne distincte sous le contrôle Button .

  7. Placez le point d’insertion au-dessus du contrôle TextBox , puis tapez Entrez votre nom : .

    Ce texte HTML statique est le légende du contrôle TextBox. Vous pouvez mélanger du code HTML statique et des contrôles serveur sur la même page. L’illustration suivante montre comment les trois contrôles apparaissent en mode Création .

    Trois contrôles en mode Création

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

Visual Studio vous offre différentes façons de définir les propriétés des contrôles sur la page. Dans cette partie de la procédure pas à pas, vous allez définir des propriétés en mode Création et en mode Source .

Pour définir les propriétés de contrôle

  1. Tout d’abord, affichez les fenêtres Propriétés en sélectionnant dans le menu Affichage ->Autres fenêtres ->Fenêtre Propriétés. Vous pouvez également sélectionner F4 pour afficher la fenêtre Propriétés .

  2. Sélectionnez le contrôle Bouton , puis, dans la fenêtre Propriétés , définissez la valeur Texte sur Nom d’affichage. Le texte que vous avez entré s’affiche sur le bouton du concepteur, comme illustré dans l’illustration suivante.

    Définir le texte du bouton

  3. Basculez vers la vue Source .

    La vue source affiche le code HTML de la page, y compris les éléments que Visual Studio a créés pour les contrôles serveur. Les contrôles sont déclarés à l’aide d’une syntaxe de type HTML, sauf que les balises utilisent le préfixe asp: et incluent l’attribut runat="server ».

    Les propriétés de contrôle sont déclarées en tant qu’attributs. Par exemple, lorsque vous définissez la propriété Text pour le contrôle Button , à l’étape 1, vous avez en fait défini l’attribut Text dans le balisage du contrôle.

    Notes

    Tous les contrôles se trouvent à l’intérieur d’un élément de formulaire , qui a également l’attribut runat="server ». L’attribut runat="server » et le préfixe asp: pour les balises de contrôle marquent les contrôles afin qu’ils soient traités par ASP.NET sur le serveur lors de l’exécution de la page. Le code en dehors des <éléments runat="server »> de la forme et <du script runat="server »> est envoyé sans modification au navigateur, c’est pourquoi le code ASP.NET doit se trouver à l’intérieur d’un élément dont la balise d’ouverture contient l’attribut runat="server ».

  4. Ensuite, vous allez ajouter une propriété supplémentaire au contrôle Label . Placez le point d’insertion directement après asp:Label dans la <balise asp:Label> , puis appuyez sur ESPACE.

    Une liste déroulante s’affiche qui affiche la liste des propriétés disponibles que vous pouvez définir pour un contrôle Label . Cette fonctionnalité, appelée IntelliSense, vous aide dans la vue Source avec la syntaxe des contrôles serveur, des éléments HTML et d’autres éléments de la page. L’illustration suivante montre la liste déroulante IntelliSense pour le contrôle Label .

    Attributs IntelliSense Attributs

  5. Sélectionnez ForeColor , puis tapez un signe égal.

    IntelliSense affiche une liste de couleurs.

    Notes

    Vous pouvez afficher une liste déroulante IntelliSense à tout moment en appuyant sur Ctrl+J lors de l’affichage du code.

  6. Sélectionnez une couleur pour le texte du contrôle Label . Veillez à sélectionner une couleur suffisamment foncée pour être lue sur un arrière-plan blanc.

    L’attribut ForeColor est terminé avec la couleur que vous avez sélectionnée, y compris le guillemet fermant.

Programmation du contrôle Button

Pour cette procédure pas à pas, vous allez écrire du code qui lit le nom que l’utilisateur entre dans la zone de texte, puis affiche le nom dans le contrôle Étiquette .

Ajouter un gestionnaire d’événements de bouton par défaut

  1. Basculez en mode Création .

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

    Par défaut, Visual Studio bascule vers un fichier code-behind et crée un gestionnaire d’événements squelette pour l’événement par défaut du contrôle Button , l’événement Click . Le fichier code-behind sépare votre balisage d’interface utilisateur (par exemple, HTML) du code de votre serveur (par exemple, C#).
    Le curseur est positionné pour ajouter du code pour ce gestionnaire d’événements.

    Notes

    Le double-clic sur un contrôle en mode Création n’est qu’une des nombreuses façons de créer des gestionnaires d’événements.

  3. Dans le gestionnaire d’événements Button1_Click , tapez Label1 suivi d’un point (.).

    Lorsque vous tapez la période après l’ID de l’étiquette (Label1), Visual Studio affiche la liste des membres disponibles pour le contrôle Label , comme illustré dans l’illustration suivante. Un membre est généralement une propriété, une méthode ou un événement.

    IntelliSense en mode Code

  4. Terminez le gestionnaire d’événements Click pour le bouton afin qu’il lise comme indiqué dans l’exemple de code suivant.

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

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = Textbox1.Text & ", welcome to Visual Studio!"
End Sub

  5. Revenez à l’affichage Source de votre balisage HTML en cliquant avec le bouton droit sur FirstWebPage.aspx dans le Explorateur de solutions et en sélectionnant Afficher le balisage.

  6. Faites défiler jusqu’à l’élément <asp:Button> . Notez que l’élément <asp:Button> a désormais l’attribut onclick="Button1_Click ».

    Cet attribut lie l’événement Click du bouton à la méthode de gestionnaire que vous avez codée à l’étape précédente.

    Les méthodes de gestionnaire d’événements peuvent avoir n’importe quel nom ; le nom que vous voyez est le nom par défaut créé par Visual Studio. Le point important est que le nom utilisé pour l’attribut OnClick dans le code HTML doit correspondre au nom d’une méthode définie dans le code-behind.

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. Si une erreur se produit, vérifiez à nouveau les étapes ci-dessus.

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

    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 sur le 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 watch la barre de status dans le navigateur, vous pouvez voir que la page effectue un aller-retour vers 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 en cliquant avec le bouton droit sur la page et en sélectionnant Afficher la source.

    Dans le code source de la page, vous voyez du code HTML sans code de serveur. Plus précisément, vous ne voyez pas les <éléments asp:> avec lesquels vous avez travaillé en mode Source . Lorsque la page s’exécute, ASP.NET traite les contrôles serveur et restitue les éléments HTML dans la page qui exécute les fonctions qui représentent le contrôle. Par exemple, le <contrôle asp:Button> est rendu en tant qu’élément d’entrée HTML< type="submit ».>

  4. Fermez le navigateur.

Utilisation de contrôles supplémentaires

Dans cette partie de la procédure pas à pas, vous allez utiliser le contrôle Calendrier , qui affiche les dates d’un mois à la fois. Le contrôle Calendrier est un contrôle plus complexe que le bouton, la zone de texte et l’étiquette avec lesquels vous avez travaillé et illustre certaines fonctionnalités supplémentaires des contrôles serveur.

Dans cette section, vous allez ajouter un contrôle System.Web.UI.WebControls.Calendar à la page et le mettre en forme.

Pour ajouter un contrôle Calendrier

  1. Dans Visual Studio, basculez en mode Création .

  2. Dans la section Standard de la boîte à outils, faites glisser un contrôle Calendar sur la page et déposez-le sous l’élément div qui contient les autres contrôles.

    Le panneau de balise active du calendrier s’affiche. Le panneau affiche des commandes qui vous permettent d’effectuer facilement les tâches les plus courantes pour le contrôle sélectionné. L’illustration suivante montre le contrôle Calendrier tel qu’il est rendu en mode Création .

    Contrôle Calendrier en mode Création

  3. Dans le panneau de balise active, choisissez Format automatique.

    La boîte de dialogue Format automatique s’affiche, ce qui vous permet de sélectionner un schéma de mise en forme pour le calendrier. L’illustration suivante montre la boîte de dialogue Format automatique pour le contrôle Calendrier .

    Boîte de dialogue Format automatique (contrôle Calendrier)

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

  5. Basculez vers la vue Source .

    Vous pouvez voir l’élément <asp:Calendar> . Cet élément est beaucoup plus long que les éléments des contrôles simples que vous avez créés précédemment. Il comprend également des sous-éléments, tels que <WeekEndDayStyle>, qui représentent différents paramètres de mise en forme. L’illustration suivante montre le contrôle Calendrier en mode Source . (Le balisage exact que vous voyez en mode Source peut différer légèrement de l’illustration.)

    Contrôle Calendrier en mode Source

Programmation du contrôle Calendrier

Dans cette section, vous allez programmer le contrôle Calendrier pour afficher la date actuellement sélectionnée.

Pour programmer le contrôle Calendrier

  1. En mode Création , double-cliquez sur le contrôle Calendrier .

    Un nouveau gestionnaire d’événements est créé et affiché dans le fichier code-behind nommé FirstWebPage.aspx.cs.

  2. Terminez le gestionnaire d’événements SelectionChanged avec le code suivant.

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

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

    Le code ci-dessus définit le texte du contrôle d’étiquette sur la date sélectionnée du contrôle calendrier.

Exécution de la page

Vous pouvez maintenant 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 à laquelle vous avez cliqué s’affiche dans le contrôle Étiquette .

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

    Notez que le contrôle Calendrier a été rendu dans la page sous forme de tableau, avec chaque jour comme élément td .

  4. Fermez le navigateur.

Étapes suivantes

Cette procédure pas à pas a illustré les fonctionnalités de base du concepteur de pages Visual Studio. Maintenant que vous savez comment créer et modifier une page Web Forms dans Visual Studio, vous pouvez explorer d’autres fonctionnalités. Par exemple, vous pouvez effectuer les opérations suivantes :