Applications ASP.NET avec VB.NETGérard Frantz
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
Applications ASP.NET
avec VB.NET Gérard Frantz
© Groupe Eyrolles, 2003,
ISBN : 2-212-11280-7C 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.
1Chapitre 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 :
2Applications 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 :
3Chapitre 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.
4Applications 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
5Chapitre 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.
6Applications 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).
7Chapitre 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 :
8Applications 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
9Chapitre 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 :
10Applications 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
11Chapitre 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.
12Applications 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.
13Chapitre 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-
14Applications 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.
15Chapitre 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
16Applications 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
17Chapitre 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.
18Vous pouvez aussi lire
