Applications ASP.NET avec VB.NETGérard Frantz

La page est créée Olivier Leblanc
 
CONTINUER À LIRE
Applications ASP.NET
         avec VB.NET             Gérard Frantz

      © Groupe Eyrolles, 2003,
       ISBN : 2-212-11280-7
C h a p i t r e                1

                          Un tour d'ASP.NET

                                                   D AN S     CE    CH A PI TR E    :

                                                    ■   Les outils nécessaires
                                                    ■   Une page simple

 ASP.NET permet de construire des applications Internet, c'est-à-dire des programmes qui fonc-
 tionnent sur le Web et utilisent des pages HTML pour réaliser l'interaction avec l'utilisateur. Ces
 applications sont capables d'effectuer des traitements en recourant à un langage de
 programmation.
 Ce chapitre montre la construction d'une page simple et l'ajout d'un traitement spécifique à
 l'aide du langage Visual Basic .NET. Plusieurs façons de créer et d'utiliser les pages sont
 explorées.

                                                                                                       1
Chapitre 1 - Un tour d’ASP.NET

    ●   Les outils nécessaires
    La mise en œuvre de pages ASP.NET nécessite une configuration minimale qui est décrite ci-
    après. Les éléments nécessaires comprennent au moins :
        ■   Un système Windows approprié.
        ■   Un serveur Web.
        ■   Le Framework .NET.
        ■   Un éditeur de textes ou un outil de développement.
    ASP.NET fonctionne sur les plates-formes Windows, à partir de Windows 2000. Il peut donc
    s'agir de Windows 2000, Windows XP ou Windows .NET Server. Toutes les éditions de chacun
    de ces systèmes conviennent.
    Une application Internet fonctionne sur un serveur Web. Pour pouvoir la tester sur votre poste
    de développement, il faut donc qu'un serveur Web y soit disponible. Les éditions serveur des
    systèmes énoncés ci-dessus comprennent le serveur Internet de Microsoft (IIS, Internet Infor-
    mation Server). Mais comme il n'est pas systématiquement installé sur les éditions familiale ou
    professionnelle, il faut donc l'ajouter en sélectionnant Services Internet (IIS) dans la section
    Ajouter ou supprimer des composants Windows du panneau de configuration.

            Note
     L'outil Web Matrix (voir ci-dessous) comprend un serveur Internet qui peut être utilisé à la place de IIS pour
     tester des pages ASP.NET.

    À son installation, IIS ne prend pas en charge ASP.NET, mais simplement ASP. Pour faire fonc-
    tionner les pages ASP.NET que vous allez développer, il faut donc installer un environnement
    d'exécution spécifique, le Framework .NET, que vous pouvez trouver sur le site Web de Microsoft.

            Note
     Pour faire fonctionner l'application sur un hébergeur de sites Internet, il faut que celui-ci ait installé les
     outils nécessaires (IIS et le Framework .NET) sur ses serveurs.

    Il vous faut enfin des outils de développement pour créer les pages et le code associé et éven-
    tuellement vous aider à les mettre au point. Vous pouvez pour cela utiliser divers outils :

2
Applications ASP.NET avec VB.NET

    ■   Un éditeur de textes simple suffit a priori pour développer des pages. Le bloc-notes de
        Windows peut tout à fait faire l'affaire mais son emploi nécessite de bien connaître le HTML
        et n'offre aucun confort d'utilisation (pas de couleurs pour les mots-clés, par exemple).
    ■   Un éditeur spécialisé pour le HTML facilite la création de pages. Il en existe des gratuits
        ou d'autres qui sont payants (et disposent généralement de plus de fonctionnalités). Un
        éditeur HTML permet généralement la création des pages de façon visuelle, tout en auto-
        risant la modification directe du code HTML.
    ■   Un éditeur spécialisé pour ASP.NET prend en charge, non seulement la création de pages
        HTML, mais aussi celle du code associé. Microsoft propose deux éditeurs : Web Matrix,
        qui est gratuit, et Visual Studio .NET. D'autres éditeurs proposent également des outils de
        développement d'applications ASP.NET. Nous utiliserons principalement Visual Studio
        .NET dans ce livre.

●   Une page simple
Pour bien comprendre ce qu'est ASP.NET, nous allons commencer par construire une page très
simple qui présente une zone de texte et un bouton. Quand l'utilisateur clique sur le bouton, le
contenu de la zone de texte est affiché ailleurs sur la page. Nous allons développer plusieurs
versions de cette page :
    ■   Une version purement HTML : l'apparence de la page sera correcte, mais le bouton ne fonc-
        tionnera pas comme on le souhaite.
    ■   Une version ASP.NET développée avec Web Matrix, dans laquelle le code et la présentation
        (le HTML) sont situés dans le même fichier.
    ■   Une version ASP.NET développée avec Visual Studio .NET, qui permet la séparation du
        code et du HTML dans deux fichiers différents.

Page simple HTML
La page simple HTML peut être écrite à l'aide de n'importe quel éditeur de textes, le bloc-notes
de Windows, par exemple. En voici un contenu possible :

                                                                                                       3
Chapitre 1 - Un tour d’ASP.NET

                Ma page     simple HTML
                
                      Entrez    votre nom :
                      
    La figure 1-1 présente la page affichée par l'explorateur Internet à partir de ce code.

    Figure 1.1 •   La page simple HTML dans l'explorateur Internet

    Si vous ne maîtrisez pas le HTML, il est préférable d'utiliser un outil pour la création de cette
    page. Avec Web Matrix, il suffit d'effectuer les manipulations suivantes :
       ■   Dans Web Matrix, sélectionnez l'option de menu File ! New.
       ■   Dans le dialogue Add New File, sélectionnez HTML Page dans la liste de droite et choisissez
           un emplacement et un nom pour votre page (figure 1-2).
       ■   Dans la page vide qui est affichée, vous pouvez taper un texte (par exemple, Ma page
           simple HTML) et choisir une mise en forme (par exemple, Heading 1) dans la liste dérou-
           lante située dans la barre d'outils.

4
Applications ASP.NET avec VB.NET

Figure 1.2 •   Création d'une page HTML avec Web Matrix

   ■   Vous pouvez également placer d'autres éléments sur la page en les sélectionnant dans la
       boîte à outils située sur la gauche de la fenêtre et en les faisant glisser sur votre page.
       Nous avons ajouté un élément Horizontal Rule sur la page pour tracer une ligne sous le
       titre, puis avons tapé un texte (Entrez votre nom :), et enfin nous avons placé un TextBox
       et un Submit Button.
La page apparaît dans Web Matrix exactement comme dans l'explorateur Internet (figure 1-3).
Mais toutes les manipulations qui ont été faites ont généré du code HTML qui est affiché à la
suite d'un simple clic sur l'onglet HTML de la fenêtre de composition (figure 1-4).

Figure 1.3 •   La page HTML en cours de composition dans Web Matrix

                                                                                                         5
Chapitre 1 - Un tour d’ASP.NET

    Figure 1.4 •   Le code HTML est généré par Web Matrix

           Note
     Pour afficher la page dans le navigateur Internet Explorer, il suffit d'appuyer sur la touche F5.

           Note
     L'exemple se trouve dans le répertoire 01 des exemples.

    Page simple ASP.NET dans un seul fichier
    La page précédemment composée est bien sympathique, mais elle ne fonctionne pas comme on
    le souhaite : un clic sur le bouton ne produit pas l'effet escompté. Pour la rendre opérationnelle,
    il faut lui ajouter du code.
    Pour afficher le texte saisi dans la zone de texte, il faut effectuer un traitement à l'aide de code.
    Ce code peut s'exécuter, soit du côté client, soit du côté serveur, dans IIS. Dans le premier cas,
    côté client, il s'exécute dans le navigateur Internet. Or il en existe de nombreux types, sur
    diverses plates-formes matérielles, et entre eux la compatibilité n'est pas toujours assurée.
    Le code écrit avec ASP.NET s'exécute du côté serveur, dans IIS. Il peut utiliser divers langages,
    principalement Visual Basic .NET ou C# (au moins pour ceux de Microsoft). Dans ce livre, nous
    utiliserons Visual Basic .NET.

6
Applications ASP.NET avec VB.NET

Nous allons commencer par transformer la page précédente avec Web Matrix afin d'y ajouter du
code. Vous pouvez pour cela effectuer les manipulations suivantes :
   ■   Dans Web Matrix, sélectionnez l'option de menu File ! New.
   ■   Dans le dialogue Add New File, sélectionnez ASP.NET Page dans la liste de droite et choi-
       sissez un emplacement et un nom pour votre page. Vous pouvez remarquer que l'extension
       du fichier est maintenant aspx. Le dialogue d'ajout d'un fichier vous permet également de
       choisir le langage à utiliser (figure 1-5).

Figure 1.5 •   Création d'une page ASP.NET avec Web Matrix

   ■   Dans la page vide qui est affichée, vous pouvez entrer le titre, comme pour la page HTML,
       et ajouter une ligne horizontale.
   ■   Les éléments utilisés pour la saisie sont ici différents. Vous pouvez voir que pour une page
       ASP.NET, la boîte à outils comprend un autre onglet, appelé Web Controls, et qu'il est
       sélectionné par défaut. Cet onglet comprend des contrôles qui jouent le même rôle que
       les éléments HTML, tout en offrant plus de possibilités de programmation côté serveur.
   ■   Placez sur la page un contrôle TextBox, un Label et un contrôle Button.
   ■   Quand vous sélectionnez un contrôle, la fenêtre des propriétés, située sur la droite de
       l'écran, affiche des valeurs liées au contrôle sélectionné. Vous pouvez modifier la valeur
       de la propriété ID pour chaque contrôle (respectivement txtNom, lblNom et btnEnvoyer).

                                                                                                      7
Chapitre 1 - Un tour d’ASP.NET

          Vous pouvez effacer la valeur de la propriété Text du contrôle Label, et donner la valeur
          False à sa propriété Visible. La valeur de la propriété Text du bouton sera le texte affiché,
          par exemple Envoyer (figure 1-6).

    Figure 1.6 •   La page simple ASP.NET dans Web Matrix

    La page que nous avons créée ressemble beaucoup à la première version en HTML. En regardant
    de plus près, on peut cependant noter des petits carrés situés dans le coin supérieur gauche
    des contrôles, qui indiquent qu'il s'agit de contrôles Web s'exécutant côté serveur. Le contrôle
    Label a également été ajouté pour les besoins du traitement (il affichera le texte saisi).
    Si on examine le code HTML généré par Web Matrix en cliquant sur l'onglet HTML, on peut voir
    qu'il est un peu différent : les balises de saisie ne sont plus les mêmes, leurs noms commencent
    par asp: (figure 1-7).
    Vous pouvez également remarquer que la fenêtre d'édition de Web Matrix comprend deux
    onglets supplémentaires pour le fichier aspx : Code et All. Si vous effectuez un double-clic sur
    le bouton Envoyer, l'onglet de code est sélectionné et une procédure est affichée (figure 1-8).
    Vous pouvez alors compléter ce code afin de copier le contenu de la zone de texte dans le label
    et de rendre ce dernier visible :

8
Applications ASP.NET avec VB.NET

Figure 1.7 •   Le code HTML de la page simple ASP.NET généré par Web Matrix

Figure 1.8 •   La partie code de la page simple ASP.NET

      Sub btnEnvoyer_Click(sender As Object, e As EventArgs)
           lblNom.Visible = true
           lblNom.Text = "Merci " & txtNom.Text & ""
      End Sub

Ce code est conforme à la syntaxe de Visual Basic .NET et on peut utiliser toutes les fonctions
disponibles pour le langage choisi. La première ligne de code rend le contrôle Label visible et
la seconde modifie son contenu, à partir du contenu de la zone de texte.
Tout ce code est exécuté sur le serveur, avant que la page ne soit envoyée au client. Pour bien
comprendre ce qui se passe, examinons le contenu de la page HTML sur le client. En appuyant

                                                                                                                 9
Chapitre 1 - Un tour d’ASP.NET

     sur la touche F5 (exécution), la page est affichée dans le navigateur Internet. Initialement, le
     label n'est pas visible (figure 1-9).

     Figure 1.9 •   La page ASP.NET dans le navigateur Web

     En sélectionnant l'élément de menu Affichage ! Source dans Internet Explorer, vous pouvez voir
     le code HTML envoyé par le serveur :

                        Ma page simple ASP.NET
                        
                              Entrez votre nom : 
                              
10
Applications ASP.NET avec VB.NET

Si vous le comparez à celui de la figure 1-7, vous pouvez constater que les balises  ont
été remplacées par des balises standard . De plus, la page ne comprend plus aucune
trace du label, ce qui explique qu'il ne soit pas visible sur la page.
Maintenant, saisissez un texte dans la zone de texte et cliquez sur le bouton Envoyer. La même
page est affichée à nouveau mais, cette fois-ci, avec le label (figure 1-10). Le code source de la
page est semblable au précédent, mais comprend en plus une balise  correspondant au
label.

Figure 1.10 •   La page ASP.NET après la saisie d'un nom

                   Ma page simple ASP.NET
                   
                                                                                                     11
Chapitre 1 - Un tour d’ASP.NET

                           Entrez votre nom : 
                           
                           Merci Gérard
                            
            Note
      Tout cela est expliqué plus en détail dans les chapitres suivants.

     Faisons une synthèse de ce qui a été vu jusqu'à présent :
        ■   Une page HTML provient d'une page aspx sur le serveur.
        ■   La page aspx comprend des balises particulières, , qui sont transformées en balises
            HTML standard avant d'être envoyées au client.
        ■   À la suite d'une action de l'utilisateur (un clic sur le bouton), du code s'exécute, ce qui
            peut modifier la structure ou le contenu de la page.
     Pour terminer cette section, regardons d'un peu plus près le contenu du fichier PageSimple.aspx.
     L'éditeur de Web Matrix nous en montre deux aspects : la partie HTML, correspondant à la pré-
     sentation (onglet HTML, figure 1-7), et le code comprenant des instructions Visual Basic .NET
     (onglet Code, figure 1-8). En réalité ces deux parties sont placées dans le même fichier, Page-
     Simple.aspx et l'onglet All permet de l'afficher dans sa totalité (figure 1-11). Le code est placé
     dans une balise  située en début de fichier et la présentation se trouve dans une balise
     . Le lien entre le bouton et la procédure btnEnvoyer_Click se fait grâce à l'attribut
     onclick du bouton.

12
Applications ASP.NET avec VB.NET

Figure 1.11 •   Le contenu du fichier PageSimple.aspx

      Note
 L'exemple se trouve dans le répertoire 01 des exemples.

Page simple ASP.NET en deux fichiers
L'écriture du code de présentation (le HTML) et de celui de traitement (Visual Basic .NET) dans
le même fichier présente des inconvénients. Le mélange de deux langages dans un même fichier
n'est pas toujours facile à gérer ni surtout à maintenir. Un site programmé de cette façon peut
se révéler difficile à mettre au point et n'est pas très structuré.
Visual Studio .NET permet de séparer le code de présentation et celui de traitement en les
plaçant dans deux fichiers distincts. Le premier a une extension aspx et ne contient que le HTML,
c'est-à-dire les éléments de présentation de la page. Une directive située au début de ce fichier
fait le lien avec le second, qui ne contient que le code, et dont l'extension est vb pour le langage
Visual Basic (ou cs pour le C#).
Avant d'examiner plus en détail la structure des pages gérées par Visual Studio .NET, regardons
comment créer la page simple précédente.

                                                                                                       13
Chapitre 1 - Un tour d’ASP.NET

        ■   Dans Visual Studio .NET, sélectionnez Nouveau projet dans la page de démarrage, ou
            l'option de menu Fichier ! Nouveau ! Projet.
        ■   Dans le dialogue Nouveau projet qui apparaît, choisissez Projets Visual Basic dans le volet
            Types de projets situé à gauche, et Application Web ASP.NET dans le volet Modèle situé
            à droite. Dans la zone emplacement, modifiez le nom de façon à ce qu'il soit http://local-
            host/SimplePage (ou un autre nom, si vous préférez, tout en veillant à bien laisser http:/
            /localhost au début du nom, figure 1-12). Cliquez sur OK.

            Note
      Le localhost qui figure dans le nom de l'emplacement du projet indique que le projet est situé sur le serveur
      Web de la machine locale.

     Figure 1.12   • Le dialogue Nouveau projet permet de définir les caractéristiques du projet à créer

        ■   Un nouveau projet est créé, ne comprenant qu'une page appelée WebForm1. Vous pouvez
            renommer cette page en la sélectionnant dans l'explorateur de solutions (normalement
            situé le long de la partie droite de la fenêtre de Visual Studio .NET), puis en cliquant à
            droite dessus et en sélectionnant Renommer. Vous pouvez appeler la nouvelle page Page-
            Simple.aspx, par exemple (figure 1-13).
        ■   Il vous reste à placer les contrôles sur la page, comme avec Web Matrix. Initialement, la
            page est en mode grille, ce qui signifie que les éléments sont placés à des positions abso-

14
Applications ASP.NET avec VB.NET

Figure 1.13 •   Le projet fraîchement créé dans l'environnement de développement Visual Studio .NET

       lues. Vous pouvez repasser en mode fluide classique en cliquant sur la page, puis en
       donnant la valeur FlowLayout à la propriété pageLayout dans la fenêtre des propriétés
       située sur la droite de la fenêtre de Visual Studio .NET.
   ■   Commencez par simplement taper le titre Ma page simple VS.NET. Dans la barre d'outils
       située juste au-dessus de la fenêtre se trouve une liste combinée appelée Format du bloc
       dans laquelle vous pouvez choisir le style En-tête 1.
   ■   Sélectionnez l'onglet HTML dans la boîte à outils et faites glisser un contrôle Horizontal
       Rule sous le titre.
   ■   Tapez ensuite le texte Entrez votre nom :.
   ■   Sélectionnez l'onglet Web Forms dans la boîte à outils et faites glisser un contrôle TextBox
       après le texte. Sélectionnez ce contrôle en cliquant dessus et donnez la valeur txtNom à
       sa propriété (ID) dans la fenêtre des propriétés.

                                                                                                                 15
Chapitre 1 - Un tour d’ASP.NET

        ■   Cliquez à droite de la zone de texte et appuyez sur ENTRÉE pour changer de ligne.
        ■   Faites glisser un contrôle Label à partir de l'onglet Web Forms de la boîte à outils, puis
            un contrôle Button.
        ■   Sélectionnez le contrôle Label en cliquant dessus et donnez la valeur lblNom à sa propriété
            (ID). Donnez aussi à sa propriété Text une valeur vide pour effacer le texte initial et à sa
            propriété Visible la valeur False.
        ■   Sélectionnez enfin le contrôle bouton, et donnez la valeur btnEnvoyer à sa propriété (ID),
            et Envoyer à sa propriété Text.
     La figure 1-14 montre le formulaire dans Visual Studio .NET après le placement de ses contrôles.

     Figure 1.14 •   Le formulaire dans Visual Studio .NET

     Pour que la page soit opérationnelle, il ne reste plus qu'à traiter l'événement produit. Effectuez
     pour cela un double-clic sur le bouton : la fenêtre de code associée à la page est ouverte et le

16
Applications ASP.NET avec VB.NET

squelette de la procédure de traitement de l'événement Click pour le bouton est généré. Vous
pouvez y taper le même code que pour la version précédente de la page :

      Private Sub btnEnvoyer_Click(...) Handles btnEnvoyer.Click
         lblNom.Visible = True
         lblNom.Text = "Merci " & txtNom.Text & ""
      End Sub

L'application fonctionne comme précédemment.
Examinons d'un peu plus près comment a réagi Visual Studio .NET à la suite de nos manipula-
tions. Trois fichiers ont été créés pour la page simple : PageSimple.aspx comprend la description
HTML de la page ; PageSimple.aspx.vb, le code Visual Basic .NET ; et PageSimple.aspx.resx,
des ressources que nous n'utiliserons pas ici.
Le fichier PageSimple.aspx est affiché dans la fenêtre de conception de Visual Studio .NET sous
forme graphique comme le montre la figure 1-14. Si vous cliquez sur l'onglet HTML situé en bas
de la fenêtre de conception, le code HTML correspondant à notre page est affiché. Ce code est
très semblable à celui qui avait été généré par Web Matrix dans la section précédente, avec une
différence notable : la première ligne qui effectue la liaison avec le fichier de code associé à la
page :

Cette ligne est une directive qui comprend plusieurs attributs. L'attribut Codebehind indique le
nom du fichier de code associé (il doit être situé dans le même répertoire) et l'attribut Inherits
indique le nom de la classe comprenant le code de traitement de la page (ici, WebForm1).
Regardons maintenant le fichier de code associé à la page :

      Public Class WebForm1
           Inherits System.Web.UI.Page
           Protected WithEvents txtNom As System.Web.UI.WebControls.TextBox
           Protected WithEvents lblNom As System.Web.UI.WebControls.Label
           Protected WithEvents btnEnvoyer As System.Web.UI.WebControls.Button

      Code généré par le Concepteur Web Form

           Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)
      Handles MyBase.Load
                'Placez ici le code utilisateur pour initialiser la page

                                                                                                      17
Chapitre 1 - Un tour d’ASP.NET

                 End Sub

               Private Sub btnEnvoyer_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)
           Handles btnEnvoyer.Click
                      lblNom.Visible = True
                      lblNom.Text = "Merci " & txtNom.Text & ""
                 End Sub
           End Class

     La première ligne indique le nom de la classe, qui doit être le même que dans la directive Page
     du fichier HTML. Ensuite, viennent trois lignes de déclaration de contrôles, les trois contrôles
     Web Form que nous avons placés sur la page.
     Après un bloc de code caché (mais que nous dévoilerons dans les chapitres suivants), viennent
     les procédures de traitement des événements. La première, Page_Load, est automatiquement
     créée. Elle n'est pas utilisée ici et sa déclaration pourrait être supprimée. La seconde est celle
     qui traite l'événement Click du bouton.
     Il existe d'autres différences entre la version simple de l'application générée avec Web Matrix
     et celle plus élaborée de Visual Studio .NET que la séparation du code en deux fichiers. Visual
     Studio .NET produit un fichier projet pour gérer l'ensemble des pages du site. Il conçoit égale-
     ment des fichiers globaux Global.asax et Web.config que nous étudierons ultérieurement.
     Mais une des différences essentielles entre les deux versions est la compilation du code. Quand
     la page réalisée par Web Matrix est appelée par un utilisateur, son code est analysé et compilé
     juste avant son affichage. En revanche, Visual Studio .NET compile le code de toutes les pages
     du projet dans un fichier DLL qui est utilisé lors de l'appel des pages, ce qui améliore sensible-
     ment les performances.

            Note
      L'exemple se trouve dans le projet PageSimple du répertoire 01 des exemples.

     ●   Résumé du chapitre
     Dans ce chapitre, nous avons montré que la création de pages ASP.NET peut se faire avec un
     outil aussi simple que le bloc-notes de Windows. Des outils plus spécialisés peuvent cependant
     faciliter la création et la maintenance des pages. Web Matrix a l'avantage d'être gratuit et
     d'inclure un serveur Web simple pour le développement et les tests. C'est cependant Visual
     Studio .NET qui apporte le plus de puissance et de souplesse pour la réalisation de sites Web
     et c'est cet outil que nous utiliserons dans la suite de cet ouvrage.

18
Vous pouvez aussi lire