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 DANS CE CHAPITRE : Les outils nécessaires Une page simple ASP.NET permet de construire des applications Internet, c'est-à-dire des programmes qui fonctionnent 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 ciaprè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 Information 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 fonctionner 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 éventuellement 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 autorisant 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 fonctionnera 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 : <html> <head> </head> <body> 3
Chapitre 1 - Un tour d ASP.NET <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. 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éroulante 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 choisissez 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 = "<p>merci " & txtnom.text & "</p>" 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 : <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> </p> <input type="submit" name="btnenvoyer" value="envoyer" id="btnenvoyer" /> 10
Applications ASP.NET avec VB.NET <!-- Insert content here --> </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 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 <span > correspondant au label. Figure 1.10 La page ASP.NET après la saisie d'un nom <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> 11
Chapitre 1 - Un tour d ASP.NET <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> <!-- Insert content here --> </form> </body> </html> 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, <asp >, 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 <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'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://localhost/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 = "<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 manipulations. 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 : <%@ 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 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 = "<p>merci " & txtnom.text & "</p>" 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 également 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 sensiblement 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