Introduction rapide ASP.NET
avec Visual Studio 2010
serge.tahe at istia.univ-angers.fr, novembre 2011
http://tahe.developpez.com
1/46
1
Introduction
Nous nous proposons ici d'introduire, l'aide de quelques exemples, les concepts importants d'ASP.NET. Cette introduction ne
permet pas de comprendre les subtilit s des changes client / serveur d'une application web. Pour cela, on pourra lire d'anciens
documents qui d crivent les changes Http entre un navigateur et un serveur web :
"
Programmation ASP.NET et
Cette introduction est faite pour ceux qui voudraient aller vite en acceptant, dans un premier temps, de laisser dans l'ombre des
points qui peuvent tre importants. Ce document peut tre ult rieurement approfondi par une tude de cas :
"
Construction d'une application trois couches avec ASP.NET, C#, Spring.net et Nhibernate
Les exemples ont t construits avec Visual Studio 2010 Professionnel. Des versions Express de Visual Studio 2010 sont
disponibles l'Url (novembre 2011) et peuvent tre t l charg es librement.
On t l chargera ainsi Visual Web Developer Express 2010. Les copies d' cran de ce document sont celles de Visual Studio 2010
Professionnel . Elles pourront parfois diff rer des crans de Visual Studio 2010 Express mais le lecteur devrait s'y retrouver
n anmoins ais ment.
2 Un projet exemple
2.1 Cr ation du projet
1
2
3
"
"
"
en [1], on cr e un nouveau projet avec Visual Studio
en [2], on choisit un projet web en Visual C#
en [3], on indique qu'on veut cr er une application web ASP.NET vide
4
5
"
"
en [4], on donne un nom l'application. Un dossier sera cr pour le projet avec ce nom.
en [5], on indique le dossier parent du dossier [4] du projet
http://tahe.developpez.com
2/46
6
7
8
"
"
"
en [6], le projet cr
est le fichier de configuration du projet ASP.NET.
est la liste des Dll utilis es par le projet web. Ces Dll sont des biblioth ques de classes que le projet est amen
utiliser. En [7] la liste des Dll mises par d faut dans les r f rences du projet. La plupart sont inutiles. Si le projet doit
utiliser une Dll non list e en [7], celle-ci peut tre ajout e par [8].
2.2 La page
Cr ons notre premi re page web :
1
2
4
3
"
"
"
"
"
en [1], nous ajoutons un formulaire web [2]
en [3], nous le nommons . Cette page est particuli re. C'est elle qui est servie lorsqu'un utilisateur fait une
requ te l'application sans pr ciser de page. Elle contient des balises HTML et des balises ASP.NET
en [4], les nouveaux fichiers du projet
contient le code de gestion des v nements provoqu s par l'utilisateur sur la page affich e
dans son navigateur
contient la liste des composants ASP.NET de la page . Chaque composant
ASP.NET d pos sur la page donne naissance la d claration de ce composant dans
.
Si on ex cute le projet par , la page est affich e dans un navigateur :
http://tahe.developpez.com
3/46
1
3
2
4
"
"
"
"
en [1], l'Url du projet web. Visual Studio a un serveur web int gr qui est lanc lorsqu'on demande l'ex cution d'un projet
web. Il coute sur un port al atoire, ici 57365. Le port d' coute est habituellement le port 80. En [1], aucune page n'est
demand e. Dans ce cas, c'est la page qui est affich e, d'o son nom de page par d faut.
en [2], la page est vide.
dans Visual Studio, la page [3] peut tre construite visuellement (onglet ) ou l'aide de balises
(onglet )
en [4], la page en mode . On la construit en y d posant des composants que l'on trouve dans la
bo te outils [5]. Si cette bo te n'est pas visible, on l'obtient par le menu .
5
6
Le mode [6] donne acc s au code source de la page :
1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
Inherits="Intro._Default" %>
2.
3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4. <html xmlns="http://www.w3.org/1999/xhtml">
5. <head runat="server">
6. <title></title>
7. </head>
8. <body>
9. <form id="form1" runat="server">
10. <div>
11. </div>
12. </form>
13. </body>
14. </html>
"
la ligne 1 est une directive ASP.NET qui liste certaines propri t s de la page
"
"
"
"
"
la directive Page s'applique une page web. Il y a d'autres directives telles que Application, WebService, ... qui
s'applique d'autres objets ASP.NET
l'attribut CodeBehind indique le fichier qui g re les v nements de la page
l'attribut Language indique le langage .NET utilis par le fichier CodeBehind
l'attribut Inherits indique le nom de la classe d finie l'int rieur du fichier CodeBehind
l'attribut AutoEventWireUp="true" indique que la liaison entre un v nement dans et son
gestionnaire dans se fait par le nom de l' v nement. Ainsi l' v nement Load sur la page
sera trait par la m thode Page_Load de la classe Intro._Default d finie par l'attribut Inherits.
"
les lignes 4-14 d crivent la page l'aide de balises :
" Html classiques telles que la balise <body> ou <div>
http://tahe.developpez.com
4/46
"
ASP.NET. Ce sont les balises qui ont l'attribut runat="server". Les balises ASP.NET sont trait es par le serveur
web avant envoi de la page au client. Elles sont transform es en balises Html. Le navigateur client re oit donc
une page Html standard dans laquelle il n'existe plus de balises ASP.NET.
La page peut tre modifi e directement partir de son code source. C'est parfois plus simple que de passer par le
mode . Nous modifions le code source de la fa on suivante :
1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
Inherits="Intro._Default" %>
2.
3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4. <html xmlns="http://www.w3.org/1999/xhtml">
Publicité
5. <head runat="server">
6. <title>Introduction ASP.NET</title>
7. </head>
8. <body>
9. <h3>Introduction ASP.NET</h3>
10. <form id="form1" runat="server">
11. <div>
12. </div>
13. </form>
14. </body>
15. </html>
En ligne 6, nous donnons un titre la page gr ce la balise Html <title>. En ligne 9, nous introduisons un texte dans le corps
(<body>) de la page. Si nous ex cutons le projet (Ctrl-F5), nous obtenons le r sultat suivant dans le navigateur :
2.3 Les fichiers et
Le fichier d clare les composants de la page :
//------------------------------------------------------------------------------
// <auto-generated>
// Ce code a t g n r par un outil.
// Version du runtime :2.0.50727.3603
//
// Les modifications apport es ce fichier peuvent provoquer un comportement incorrect et seront perdues si
// le code est r g n r .
// </auto-generated>
//------------------------------------------------------------------------------
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11. namespace Intro {
12.
13.
14. public partial class _Default {
15.
16. /// <summary>
17. /// Contr le form1.
18. /// </summary>
19. /// <remarks>
20. /// Champ g n r automatiquement.
21. /// Pour modifier, d placez la d claration de champ du fichier de concepteur dans le fichier code-
behind.
22. /// </remarks>
23. protected global::System.Web.UI.HtmlControls.HtmlForm form1;
24. }
25. }
On trouve dans ce fichier la liste des composants ASP.NET de la page ayant un identifiant. Ils correspondent aux
balises de ayant l'attribut runat="server" et l'attribut id. Ainsi le composant de la ligne 23 ci-dessus correspond la
balise
http://tahe.developpez.com
5/46
<form id="form1" runat="server">
de .
Le d veloppeur interagit peu avec le fichier . N anmoins ce fichier est utile pour conna tre la classe d'un
composant particulier. Ainsi on voit ci-dessous que le composant form1 est de type HtmlForm. Le d veloppeur peut alors explorer
cette classe pour en conna tre les propri t s et m thodes. Les composants de la page sont utilis s par la classe du
fichier :
1. using System;
2. using System.Collections.Generic;
3. using System.Linq;
4. using System.Web;
5. using System.Web.UI;
6. using System.Web.UI.WebControls;
7.
8. namespace Intro
9. {
10. public partial class _Default : System.Web.UI.Page
11. {
12. protected void Page_Load(object sender, EventArgs e)
13. {
14.
15. }
16. }
17. }
On notera que la classe d finie dans les fichiers et est la m me (ligne 10) : Intro._Default.
C'est le mot cl partial qui rend possible d' tendre la d claration d'une classe sur plusieurs fichiers, ici deux.
Ligne 10, ci-dessus, on voit que la classe [_Default] tend la classe et h rite de ses v nements. L'un d'entre-eux est
l' v nement Load qui se produit lorsque la page est charg e par le serveur web. Ligne 12, la m thode Page_Load qui g re
l' v nement Load de la page. C'est g n ralement ici qu'on initialise la page avant son affichage dans le navigateur du client. Ici, la
m thode Page_Load ne fait rien.
La classe associ e une page web, ici la classe Intro._Default, est cr e au d but de la requ te du client et d truite lorsque la r ponse
au client a t envoy e. Elle ne peut donc servir m moriser des informations entre deux requ tes. Pour cela il faut utiliser la
notion de session utilisateur.
2.4 Les v nements d'une page web ASP.NET
Nous construisons la page suivante :
1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
Inherits="Intro._Default" %>
2.
3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4. <html xmlns="http://www.w3.org/1999/xhtml">
5. <head runat="server">
6. <title>Introduction ASP.NET</title>
7. </head>
8. <body>
9. <h3>Introduction ASP.NET</h3>
10. <form id="form1" runat="server">
11. <div>
12. <table>
13. <tr>
14. <td>
15. Nom</td>
16. <td>
17. <asp:TextBox ID="TextBoxNom" runat="server"></asp:TextBox>
18. </td>
19. <td>
20. </td>
21. </tr>
22. <tr>
23. <td>
24. Age</td>
25. <td>
http://tahe.developpez.com
6/46
26. <asp:TextBox ID="TextBoxAge" runat="server"></asp:TextBox>
27. </td>
28. <td>
29. </td>
30. </tr>
31. </table>
32. </div>
33. <asp:Button ID="ButtonValider" runat="server" Text="Valider" />
34. <hr />
35. <p>
36. Ev nements trait s par le serveur</p>
37. <p>
38. <asp:ListBox ID="ListBoxEvts" runat="server"></asp:ListBox>
39. </p>
40. </form>
41. </body>
42. </html>
Cette page peut tre obtenue en modifiant directement le code source de la page ou en dessinant la page en mode . On
trouvera les composants n cessaires dans la bo te outils sous le th me Standard.
Le fichier est le suivant :
1. namespace Intro {
2. public partial class _Default {
3. protected global::System.Web.UI.HtmlControls.HtmlForm form1;
4. protected global::System.Web.UI.WebControls.TextBox TextBoxNom;
5. protected global::System.Web.UI.WebControls.TextBox TextBoxAge;
Publicité
6. protected global::System.Web.UI.WebControls.Button ButtonValider;
7. protected global::System.Web.UI.WebControls.ListBox ListBoxEvts;
8. }
9. }
On y retrouve tous les composants ASP.NET de la page ayant un identifiant.
Nous faisons voluer le fichier comme suit :
1. using System;
2.
3. namespace Intro
4. {
5. public partial class _Default : System.Web.UI.Page
6. {
7. protected void Page_Init(object sender, EventArgs e)
8. {
9. // on note l' v nement
10. ListBoxEvts.Items.Insert(0, string.Format("{0}: Page_Init",
DateTime.Now.ToString("hh:mm:ss")));
11. }
12.
13. protected void Page_Load(object sender, EventArgs e)
14. {
http://tahe.developpez.com
7/46
15. // on note l' v nement
16. ListBoxEvts.Items.Insert(0, string.Format("{0}: Page_Load",
DateTime.Now.ToString("hh:mm:ss")));
17. }
18.
19. protected void ButtonValider_Click(object sender, EventArgs e)
20. {
21. // on note l' v nement
22. ListBoxEvts.Items.Insert(0, string.Format("{0}: ButtonValider_Click",
DateTime.Now.ToString("hh:mm:ss")));
23. }
24. }
25. }
La classe [_Default] (ligne 5) traite trois v nements :
"
"
"
l' v nement Init (ligne 7) qui se produit lorsque la page a t initialis e
l' v nement Load (ligne 13) qui se produit lorsque la page a t charg e par le serveur web. L' v nement Init se produit
avant l' v nement Load.
l' v nement Click sur le bouton ButtonValider (ligne 19) qui se produit lorsque l'utilisateur clique sur le bouton
La gestion de chacun de ces trois v nements consiste ajouter un message au composant Listbox nomm ListBoxEvts. Ce message
affiche l'heure de l' v nement et le nom de celui-ci. Chaque message est plac en d but de liste. Aussi les messages plac s en haut
de la liste sont les plus r cents.
Lorsqu'on ex cute le projet, on obtient la page suivante :
2
3
1
On voit en [1] que les v nements Page_Init et Page_Load se sont produits dans cet ordre. On rappelle que l' v nement le plus r cent
est en haut de la liste. Lorsque le navigateur demande la page directement par son Url [2], il le fait par une commande
HTTP (HyperText Transfer Protocol) appel e GET. Une fois la page charg e dans le navigateur, l'utilisateur va provoquer des
v nements sur la page. Par exemple il va cliquer sur le bouton [3]. Les v nements provoqu s par l'utilisateur une fois la
page charg e dans le navigateur, d clenchent une requ te la page mais cette fois-ci avec une commande HTTP
appel e POST. Pour r sumer :
"
"
le chargement initial d'une page P dans un navigateur est faite par une op ration HTTP GET
les v nements qui se produisent ensuite sur la page produisent chaque fois une nouvelle requ te vers la m me page P
mais cette fois avec une commande HTTP POST. Il est possible pour une page P de savoir si elle a t demand e avec
une commande GET ou une commande POST, ce qui lui permet de se comporter diff remment si c'est n cessaire, ce qui
est la plupart du temps le cas.
Demande initiale d'une page ASPX : GET
http://tahe.developpez.com
8/46
Navigateur
Serveur web
Html
1
2
Page ASPX
"
"
en [1], le navigateur demande la page ASPX via une commande HTTP GET sans param tres.
en [2], le serveur web lui envoie en r ponse le flux HTML traduction de la page ASPX demand e.
Traitement d'un v nement produit sur la page affich e par le navigateur : POST
Navigateur
Serveur web
Html
1
2
Page ASPX
"
"
en [1], lors d'un v nement sur la page Html, le navigateur demande la page ASPX d j acquise avec une op ration GET,
cette fois avec une commande HTTP POST accompagn e de param tres. Ces param tres sont les valeurs des
composants qui se trouvent l'int rieur de la balise <form> de la page HTML affich e par le navigateur. On appelle ces
valeurs, les valeurs post es par le client. Elles vont tre exploit es par la page ASPX pour traiter la demande du client.
en [2], le serveur web lui envoie en r ponse le flux HTML traduction de la page ASPX demand e initialement par le
POST ou bien d'une autre page s'il y a eu transfert de page ou redirection de page.
Revenons notre page exemple :
2
3
1
4
"
"
en [2], la page a t obtenue par un GET.
en [1], on voit les deux v nements qui se sont produits lors de ce GET
Si, ci-dessus, l'utilisateur clique sur le bouton [3], la page va tre demand e avec un POST. Ce POST sera
accompagn de param tres qui seront les valeurs de tous les composants inclus dans la balise <form> de la page : les
deux TextBox , le bouton , la liste . Les valeurs post es pour les
composants sont les suivantes :
http://tahe.developpez.com
9/46
"
"
"
TextBox : la valeur saisie
Button : le texte du bouton, ici le texte "Valider"
Listbox : le texte du message s lectionn dans le ListBox
En r ponse du POST, on obtient la page [4]. C'est de nouveau la page . C'est le comportement normal, moins qu'il
y ait transfert ou redirection de page par les gestionnaires d' v nements de la page. On peut voir que deux nouveaux v nements se
sont produits :
"
"
l' v nement Page_Load qui s'est produit lors du chargement de la page
l' v nement ButtonValider_Click qui s'est produit cause du clic sur le bouton
On peut remarquer que :
"
"
"
"
"
l' v nement Page_Init ne s'est pas produit sur l'op ration HTTP POST alors qu'il s' tait produit sur l' v nement HTTP
GET
l' v nement Page_Load se produit tout le temps, que ce soit sur un GET ou un POST. C'est dans cette m thode qu'on a en
g n ral besoin de savoir si on a affaire un GET ou un POST.
l'issue du POST, la page a t renvoy e au client avec les modifications apport es par les gestionnaires
d' v nements. C'est toujours ainsi. Une fois les v nements d'une page P trait s, cette m me page P est renvoy e au client.
Il y a deux fa ons d' chapper cette r gle. Le dernier gestionnaire d' v nement ex cut peut
"
"
transf rer le flux d'ex cution une autre page P2.
rediriger le navigateur client vers une autre page P2.
Dans les deux cas, c'est la page P2 qui est renvoy e au navigateur. Les deux m thodes pr sentent des diff rences sur
lesquelles nous reviendrons.
l' v nement ButtonValider_Click s'est produit apr s l' v nement Page_Load. C'est donc ce gestionnaire qui peut prendre la
d cision du transfert ou de la redirection vers une page P2.
la liste des v nements [4] a gard les deux v nements affich s lors du chargement initial GET de la page .
C'est surprenant lorsqu'on sait que la page a t recr e lors du POST. On devrait retrouver la page
Publicité
avec ses valeurs de conception avec donc un ListBox vide. L'ex cution des gestionnaires Page_Load et
ButtonValider_Click devrait y mettre ensuite deux messages. Or on en trouve quatre. C'est le m canisme du VIEWSTATE
qui explique cela. Lors du GET initial, le serveur web envoie la page avec une balise HTML <input
type="hidden" ...> appel champ cach (ligne 10 ci-dessous).
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head><title>
4. Introduction ASP.NET
5. </title></head>
6. <body>
7. <h3>Introduction ASP.NET</h3>
8. <form name="form1" method="post" action="default.aspx" id="form1">
9. <div>
10. <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
value="/wEPDwUKLTMzMTEyNDMxMg9kFgICAw9kFgICBw8QZBAVAhMwNjoxNjozNjogUGFnZV9Mb2FkEzA2OjE2OjM2OiBQYWd
lX0luaXQVAhMwNjoxNjozNjogUGFnZV9Mb2FkEzA2OjE2OjM2OiBQYWdlX0luaXQUKwMCZ2dkZGRW1AnTL8f/q7h2MXBLxctKD
1UKfg==" />
11. </div>
12. ..............................
Dans le champ d'id "__VIEWSTATE" le serveur web met sous forme cod e la valeur de tous les composants de la page. Il le fait
aussi bien sur le GET initial que sur les POST qui suivent. Lorsqu'un POST sur une page P se produit :
"
"
"
"
"
"
"
le navigateur demande la page P en envoyant dans sa requ te les valeurs de tous les composants qui sont l'int rieur de la
balise <form>. Ci-dessus, on peut voir que le composant "__VIEWSTATE" est l'int rieur de la balise <form>. Sa
valeur est donc envoy e au serveur lors d'un POST.
la page P est instanci e et initialis e avec ses valeurs de construction
le composant "__VIEWSTATE" est ensuite utilis pour redonner aux composants les valeurs qu'ils avaient lorsque la
page P avait t envoy e pr c demment. C'est ainsi par exemple, que la liste des v nements [4] retrouve les deux
premiers messages qu'elle avait lorsqu'elle a t envoy e en r ponse au GET initial du navigateur.
les composants de la page P prennent ensuite pour valeurs, les valeurs post es par le navigateur. A ce moment l , le
formulaire de la page P est dans l' tat o l'utilisateur l'a post .
l' v nement Page_Load est trait . Ici il rajoute un message la liste des v nements[4].
l' v nement qui a provoqu le POST est trait . Ici ButtonValider_Click rajoute un message la liste des v nements[4].
la page P est renvoy e. Les composants ont pour valeur :
http://tahe.developpez.com
10/46
"
"
soit la valeur post e, c.a.d. la valeur que le composant avait dans le formulaire lorsque celui a t post au serveur
soit une valeur donn e par l'un des gestionnaires d' v nements.
Dans notre exemple,
"
"
les deux composants TextBox retrouveront leur valeur post e car les gestionnaires d' v nements n'y touchent pas
la liste des v nements [4] retrouve sa valeur post e, c.a.d. tous les v nements d j inscrits dans la liste, plus
deux nouveaux v nements cr s par les m thodes Page_Load et ButtonValider_Click.
Le m canisme du VIEWSTATE peut tre activ ou inhib au niveau de chaque composant. Inhibons-le pour le composant
(clic droit sur ListBoxEvts / Propri t s) :
1
2
3
"
"
en [1], le VIEWSTATE du composant est inhib . Celui des TextBox [2] est activ par d faut.
en [3], les deux v nements renvoy s apr s le GET initial
4
5
6
7
8
"
"
en [4], on a rempli le formulaire et on clique sur le bouton . Un POST vers la page va tre fait.
en [6], le r sultat renvoy apr s un Clic sur le bouton
"
"
le m canisme du VIEWSTATE activ explique que les TextBox [7] aient gard leur valeur post e en [4]
le m canisme du VIEWSTATE inhib explique que le composant [8] n'ait pas gard son contenu
[5].
http://tahe.developpez.com
11/46
2.5 Gestion des valeurs post es
Nous allons nous int resser ici aux valeurs post es par les deux TextBox lorsque l'utilisateur clique sur le bouton . La page
en mode volue comme suit :
2
1
Le code source de l' l ment rajout en [1] est le suivant :
1. <p>
2. El ments post s au serveur :
3. <asp:Label ID="LabelPost" runat="server"></asp:Label>
4. </p>
Nous utiliserons le composant pour afficher les valeurs saisies dans les deux TextBox [2]. Le code du gestionnaire
d' v nements volue comme suit :
1. using System;
2.
3. namespace Intro
4. {
5. public partial class _Default : System.Web.UI.Page
6. {
7. protected void Page_Init(object sender, EventArgs e)
8. {
9. // on note l' v nement
10. ListBoxEvts.Items.Insert(0, string.Format("{0}: Page_Init",
DateTime.Now.ToString("hh:mm:ss")));
11. }
12.
13. protected void Page_Load(object sender, EventArgs e)
14. {
15. // on note l' v nement
16. ListBoxEvts.Items.Insert(0, string.Format("{0}: Page_Load",
DateTime.Now.ToString("hh:mm:ss")));
17. }
18.
19. protected void ButtonValider_Click(object sender, EventArgs e)
20. {
21. // on note l' v nement
22. ListBoxEvts.Items.Insert(0, string.Format("{0}: ButtonValider_Click",
DateTime.Now.ToString("hh:mm:ss")));
23. // on affiche le nom et l' ge
24. LabelPost.Text = string.Format("nom={0}, age={1}", TextBoxNom.Text.Trim(),
TextBoxAge.Text.Trim());
25. }
26. }
27. }
Ligne 24, on met jour le composant LabelPost :
http://tahe.developpez.com
12/46
"
"
"
LabelPost est de type (cf Default.aspx.designer.cs). Sa propri t Text repr sente le
texte affich par le composant.
TextBoxNom et TextBoxAge sont de type . La propri t Text d'un composant
TextBox est le texte affich dans la zone de saisie.
la m thode Trim() limine les espaces qui peuvent pr c der ou suivre une cha ne de caract res
Comme il a t expliqu pr c demment, lorsque la m thode ButtonValider_Click est ex cut e, les composants de la page ont la
valeur qu'ils avaient lorsque la page a t post e par l'utilisateur. Les propri t s Text des deux TextBox ont donc pour valeur les
textes saisis par l'utilisateur dans le navigateur.
Voici un exemple :
1
2
3
4
5
"
"
Publicité
"
"
"
en [1], les valeurs post es
en [2], la r ponse du serveur.
en [3], les TextBox ont retrouv leur valeur post e par le m canisme du VIEWSTATE activ
en [4], les messages du composant ListBoxEvts sont issus des m thodes Page_Init, Page_Load, ButtonValider_Click et d'un
VIEWSTATE inhib
en [5], le composant LabelPost a obtenu sa valeur par la m thode ButtonValider_Click. On a bien r cup r les deux valeurs
saisies par l'utilisateur dans les deux TextBox [1].
On voit ci-dessus que la valeur post e pour l' ge est la cha ne "yy", une valeur ill gale. Nous allons rajouter la page des
composants appel s validateurs. Ils servent v rifier la validit de donn es post es. Cette validit peut tre v rifi e deux endroits
:
"
"
sur le client. Une option de configuration du validateur permet de demander ou non que les tests soient faits sur le
navigateur. Ils sont alors faits par du code JavaScript embarqu dans la page Html. Lorsque l'utilisateur fait un POST des
valeurs saisies dans le formulaire, celles-ci sont tout d'abord v rifi es par le code Javascript. Si l'un des tests choue, le
POST n'est pas effectu . On vite ainsi un aller-retour avec le serveur rendant ainsi la page plus r active.
sur le serveur. Si les tests c t client peuvent tre facultatifs, c t serveur ils sont obligatoires qu'il y ait eu v rification ou
non c t client. En effet, lorsqu'une page re oit des valeurs post es, elle n'a pas possibilit de savoir si elles ont t
v rifi es par le client avant leur envoi. C t serveur, le d veloppeur doit donc toujours v rifier la validit des donn es
post es.
La page volue comme suit :
1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
Inherits="Intro._Default" %>
2.
3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4. <html xmlns="http://www.w3.org/1999/xhtml">
5. <head runat="server">
http://tahe.developpez.com
13/46
6. <title>Introduction ASP.NET</title>
7. </head>
8. <body>
9. <h3>Introduction ASP.NET</h3>
10. <form id="form1" runat="server">
11. <div>
12. <table>
13. <tr>
14. <td>
15. Nom</td>
16. <td>
17. <asp:TextBox ID="TextBoxNom" runat="server"></asp:TextBox>
18. </td>
19. <td>
20. <asp:RequiredFieldValidator ID="RequiredFieldValidatorNom" runat="server"
21. ControlToValidate="TextBoxNom" Display="Dynamic"
22. ErrorMessage="Donn e obligatoire !"></asp:RequiredFieldValidator>
23. </td>
24. </tr>
25. <tr>
26. <td>
27. Age</td>
28. <td>
29. <asp:TextBox ID="TextBoxAge" runat="server"></asp:TextBox>
30. </td>
31. <td>
32. <asp:RequiredFieldValidator ID="RequiredFieldValidatorAge" runat="server"
33. ControlToValidate="TextBoxAge" Display="Dynamic"
34. ErrorMessage="Donn e obligatoire !"></asp:RequiredFieldValidator>
35. <asp:RangeValidator ID="RangeValidatorAge" runat="server"
36. ControlToValidate="TextBoxAge" Display="Dynamic"
37. ErrorMessage="Tapez un nombre entre 1 et 150 !" MaximumValue="150"
38. MinimumValue="1" Type="Integer"></asp:RangeValidator>
39. </td>
40. </tr>
41. </table>
42. </div>
43. <asp:Button ID="ButtonValider" runat="server" onclick="ButtonValider_Click"
44. Text="Valider" CausesValidation="False"/>
45. <hr />
46. <p>
47. Ev nements trait s par le serveur</p>
48. <p>
49. <asp:ListBox ID="ListBoxEvts" runat="server" EnableViewState="False">
50. </asp:ListBox>
51. </p>
52. <p>
53. El ments post s au serveur :
54. <asp:Label ID="LabelPost" runat="server"></asp:Label>
55. </p>
56. <p>
57. El ments valid s par le serveur :
58. <asp:Label ID="LabelValidation" runat="server"></asp:Label>
59. </p>
60. <asp:Label ID="LabelErreursSaisie" runat="server" ForeColor="Red"></asp:Label>
61. </form>
62. </body>
63. </html>
Les validateurs ont t rajout s aux lignes 20, 32 et 35. Ligne 58, un composant Label est utilis pour afficher les valeurs post es
valides. Ligne 60, un un composant Label est utilis pour afficher un message d'erreur s'il y a des erreurs de saisie.
La page peut tre galement construite en mode . Les nouveaux composants peuvent tre trouv s dans la
bo te outils sous le th me Validation.
http://tahe.developpez.com
14/46
1
2
3
4
"
"
"
les composants [1] et [2] sont de type RequiredFieldValidator. Ce validateur v rifie qu'un champ de saisie est non vide.
le composant [3] est de type RangeValidator. Ce validateur v rifie qu'un champ de saisie contient une valeur entre deux
bornes.
en [4], les propri t s du validateur [1].
Nous allons pr senter les deux types de validateurs au travers de leurs balises dans le code de la page :
<asp:RequiredFieldValidator ID="RequiredFieldValidatorNom" runat="server"
ControlToValidate="TextBoxNom" Display="Dynamic"
ErrorMessage="Donn e obligatoire !"></asp:RequiredFieldValidator>
"
"
"
"
ID : l'identifiant du composant
ControlToValidate : le nom du composant dont la valeur est v rifi e. Ici on veut que le composant TextBoxNom n'ait pas
une valeur vide (cha ne vide ou suite d'espaces)
ErrorMessage : message d'erreur afficher dans le validateur en cas de donn e invalide.
EnableClientScript : bool en indiquant si le validateur doit tre ex cut galement c t client. Cet attribut a la valeur
True par d faut lorsqu'il n'est pas explicitement positionn comme ci-dessus.
" Display : mode d'affichage du validateur. Il y a deux modes :
"
"
static (d faut) : le validateur occupe de la place sur la page m me s'il n'affiche pas de message d'erreur
dynamic : le validateur n'occupe pas de place sur la page s'il n'affiche pas de message d'erreur.
<asp:RangeValidator ID="RangeValidatorAge" runat="server"
ControlToValidate="TextBoxAge" Display="Dynamic"
ErrorMessage="Tapez un nombre entre 1 et 150 !" MaximumValue="150"
MinimumValue="1" Type="Integer"></asp:RangeValidator>
Type : le type de la donn e v rifi e. Ici l' ge est un entier.
"
" MinimumValue, MaximumValue : les bornes dans lesquelles doit se trouver la valeur v rifi e
La configuration du composant qui provoque le POST joue un r le dans le mode de validation. Ici ce composant est le bouton
:
<asp:Button ID="ButtonValider" runat="server" onclick="ButtonValider_Click" Text="Valider"
CausesValidation="True" />
"
CausesValidation : fixe le mode automatique ou nom des validations c t serveur. Cet attribut a la valeur par d faut
"True" s'il n'est pas explicitement mentionn . Dans ce cas,<...