Applications ASP.NET avec VB - eyrolles.com · Applications ASP.NET avec VB.NET 5 Vous pouvez également placer d'autres éléments sur la page en les sélectionnant dans la boîte

Applications ASP.NETavec VB.NET

Gérard Frantz

© Groupe Eyrolles, 2003, ISBN : 2-212-11280-7

1

C h a p i t r e 1

Un tour d'ASP.NET

D A N S C E C H A P I T R 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. Cesapplications sont capables d'effectuer des traitements en recourant à un langage deprogrammation.

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 sontexplorées.

Chapitre 1 - Un tour d’ASP.NET

2

� Les outils nécessairesLa 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 doncs'agir de Windows 2000, Windows XP ou Windows .NET Server. Toutes les éditions de chacunde ces systèmes conviennent.

Une application Internet fonctionne sur un serveur Web. Pour pouvoir la tester sur votre postede développement, il faut donc qu'un serveur Web y soit disponible. Les éditions serveur dessystè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 ouprofessionnelle, il faut donc l'ajouter en sélectionnant Services Internet (IIS) dans la sectionAjouter ou supprimer des composants Windows du panneau de configuration.

À 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 environnementd'exécution spécifique, le Framework .NET, que vous pouvez trouver sur le site Web de Microsoft.

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 :

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

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

Applications ASP.NET avec VB.NET

3

� Un éditeur de textes simple suffit a priori pour développer des pages. Le bloc-notes deWindows peut tout à fait faire l'affaire mais son emploi nécessite de bien connaître le HTMLet 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 gratuitsou 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 pagesHTML, 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 dedéveloppement d'applications ASP.NET. Nous utiliserons principalement Visual Studio.NET dans ce livre.

� Une page simplePour bien comprendre ce qu'est ASP.NET, nous allons commencer par construire une page trèssimple qui présente une zone de texte et un bouton. Quand l'utilisateur clique sur le bouton, lecontenu de la zone de texte est affiché ailleurs sur la page. Nous allons développer plusieursversions 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 ducode 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-notesde Windows, par exemple. En voici un contenu possible :

<html><head></head><body>


4

<h1>Ma page simple HTML </h1> <hr /> <p> Entrez votre nom : <input type="text" /> </p> <p> <input type="submit" value="Envoyer" /> </p></body></html>

La figure 1-1 présente la page affichée par l'explorateur Internet à partir de ce code.

Si vous ne maîtrisez pas le HTML, il est préférable d'utiliser un outil pour la création de cettepage. 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 choisissezun 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 pagesimple HTML) et choisir une mise en forme (par exemple, Heading 1) dans la liste dérou-lante située dans la barre d'outils.

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


5

� Vous pouvez également placer d'autres éléments sur la page en les sélectionnant dans laboî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 letitre, puis avons tapé un texte (Entrez votre nom :), et enfin nous avons placé un TextBoxet 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é à lasuite d'un simple clic sur l'onglet HTML de la fenêtre de composition (figure 1-4).

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

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


6

Page simple ASP.NET dans un seul fichier

La page précédemment composée est bien sympathique, mais elle ne fonctionne pas comme onle 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, surdiverses 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, nousutiliserons Visual Basic .NET.

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

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

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


7

Nous allons commencer par transformer la page précédente avec Web Matrix afin d'y ajouter ducode. 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'extensiondu fichier est maintenant aspx. Le dialogue d'ajout d'un fichier vous permet également dechoisir le langage à utiliser (figure 1-5).

� 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 pageASP.NET, la boîte à outils comprend un autre onglet, appelé Web Controls, et qu'il estsélectionné par défaut. Cet onglet comprend des contrôles qui jouent le même rôle queles é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 del'écran, affiche des valeurs liées au contrôle sélectionné. Vous pouvez modifier la valeurde la propriété ID pour chaque contrôle (respectivement txtNom, lblNom et btnEnvoyer).

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


8

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

La page que nous avons créée ressemble beaucoup à la première version en HTML. En regardantde plus près, on peut cependant noter des petits carrés situés dans le coin supérieur gauchedes contrôles, qui indiquent qu'il s'agit de contrôles Web s'exécutant côté serveur. Le contrôleLabel 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 voirqu'il est un peu différent : les balises de saisie ne sont plus les mêmes, leurs noms commencentpar asp: (figure 1-7).

Vous pouvez également remarquer que la fenêtre d'édition de Web Matrix comprend deuxonglets supplémentaires pour le fichier aspx : Code et All. Si vous effectuez un double-clic surle 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 labelet de rendre ce dernier visible :

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


9

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

Ce code est conforme à la syntaxe de Visual Basic .NET et on peut utiliser toutes les fonctionsdisponibles pour le langage choisi. La première ligne de code rend le contrôle Label visible etla 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 biencomprendre ce qui se passe, examinons le contenu de la page HTML sur le client. En appuyant

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


10

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

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

<html><head></head><body> <form name="_ctl0" method="post" action="PageSimple.aspx" id="_ctl0"><input type="hidden" name="__VIEWSTATE" value="dDwtMzA5NTQzMTMzOzs+Cz4sUkowOiRYvLInV1eNsXg5F3E=" />

<h1>Ma page simple ASP.NET </h1> <hr /> <p> Entrez votre nom : <input name="txtNom" type="text" id="txtNom" /> </p> <p> <input type="submit" name="btnEnvoyer" value="Envoyer" id="btnEnvoyer" /> </p>

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


11

 </form></body></html>

Si vous le comparez à celui de la figure 1-7, vous pouvez constater que les balises <asp:…> ontété remplacées par des balises standard <input…>. De plus, la page ne comprend plus aucunetrace 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êmepage est affichée à nouveau mais, cette fois-ci, avec le label (figure 1-10). Le code source de lapage est semblable au précédent, mais comprend en plus une balise <span…> correspondant aulabel.

<html><head></head><body> <form name="_ctl0" method="post" action="PageSimple.aspx" id="_ctl0"><input type="hidden" name="__VIEWSTATE" value="dDwtMzA5NTQzMTMzO3Q8O2w8aTwxPjs+O2w8dDw7bDxpPDM+Oz47bDx0PHA8cDxsPFRleHQ7VmlzaWJsZTs+O2w8XDxwXD5NZXJjaSBHw6lyYXJkXDwvcFw+O288dD47Pj47Pjs7Pjs+Pjs+Pjs+3zyG9cMkPX8dpq/Lsb08Z+IF2X0=" />

<h1>Ma page simple ASP.NET </h1>

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


12

<hr /> <p> Entrez votre nom : <input name="txtNom" type="text" value="Gérard" id="txtNom" /> </p> <p> <span id="lblNom" style="font-weight:bold;"><p>Merci Gérard</p></span> <input type="submit" name="btnEnvoyer" value="Envoyer" id="btnEnvoyer" /> </p>  </form></body></html>

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, <asp…>, qui sont transformées en balisesHTML 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 quipeut 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 <script…> située en début de fichier et la présentation se trouve dans une balise<html>. Le lien entre le bouton et la procédure btnEnvoyer_Click se fait grâce à l'attributonclick du bouton.

NoteTout cela est expliqué plus en détail dans les chapitres suivants.


13

Page simple ASP.NET en deux fichiers

L'écriture du code de présentation (le HTML) et de celui de traitement (Visual Basic .NET) dansle même fichier présente des inconvénients. Le mélange de deux langages dans un même fichiern'est pas toujours facile à gérer ni surtout à maintenir. Un site programmé de cette façon peutse 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 lesplaç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 fichierfait le lien avec le second, qui ne contient que le code, et dont l'extension est vb pour le langageVisual Basic (ou cs pour le C#).

Avant d'examiner plus en détail la structure des pages gérées par Visual Studio .NET, regardonscomment créer la page simple précédente.

Figure 1.11 • Le contenu du fichier PageSimple.aspx

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


14

� Dans Visual Studio .NET, sélectionnez Nouveau projet dans la page de démarrage, oul'option de menu Fichier ! Nouveau ! Projet.

� Dans le dialogue Nouveau projet qui apparaît, choisissez Projets Visual Basic dans le voletTypes 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.

� Un nouveau projet est créé, ne comprenant qu'une page appelée WebForm1. Vous pouvezrenommer cette page en la sélectionnant dans l'explorateur de solutions (normalementsitué 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, lapage est en mode grille, ce qui signifie que les éléments sont placés à des positions abso-

NoteLe localhost qui figure dans le nom de l'emplacement du projet indique que le projet est situé sur le serveurWeb de la machine locale.

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


15

lues. Vous pouvez repasser en mode fluide classique en cliquant sur la page, puis endonnant la valeur FlowLayout à la propriété pageLayout dans la fenêtre des propriétéssitué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'outilssituée juste au-dessus de la fenêtre se trouve une liste combinée appelée Format du blocdans 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 HorizontalRule 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 TextBoxaprè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.

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


16

� 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, puisun 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 à saproprié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.

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

Figure 1.14 • Le formulaire dans Visual Studio .NET


17

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

Private Sub btnEnvoyer_Click(...) Handles btnEnvoyer.ClicklblNom.Visible = TruelblNom.Text = "<p>Merci " & txtNom.Text & "</p>"

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 descriptionHTML 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 sousforme graphique comme le montre la figure 1-14. Si vous cliquez sur l'onglet HTML situé en basde la fenêtre de conception, le code HTML correspondant à notre page est affiché. Ce code esttrès semblable à celui qui avait été généré par Web Matrix dans la section précédente, avec unedifférence notable : la première ligne qui effectue la liaison avec le fichier de code associé à lapage :

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="PageSimple.aspx.vb" Inherits="PageSimple.WebForm1"%>

Cette ligne est une directive qui comprend plusieurs attributs. L'attribut Codebehind indique lenom du fichier de code associé (il doit être situé dans le même répertoire) et l'attribut Inheritsindique 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


18

End Sub

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

La première ligne indique le nom de la classe, qui doit être le même que dans la directive Pagedu fichier HTML. Ensuite, viennent trois lignes de déclaration de contrôles, les trois contrôlesWeb 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), viennentles procédures de traitement des événements. La première, Page_Load, est automatiquementcréée. Elle n'est pas utilisée ici et sa déclaration pourrait être supprimée. La seconde est cellequi 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 Matrixet celle plus élaborée de Visual Studio .NET que la séparation du code en deux fichiers. VisualStudio .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. Quandla 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 pagesdu projet dans un fichier DLL qui est utilisé lors de l'appel des pages, ce qui améliore sensible-ment les performances.

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

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

Documents

Applications ASP.NET avec VB - eyrolles.com · Applications ASP.NET avec VB.NET 5 Vous pouvez également placer d'autres éléments sur la page en les sélectionnant dans la boîte