TP2 Programmation de sites web dynamiques ISTA NTIC SYBA

Objectifs :

- Dcrire le Cycle de vie des vnements dune page ASPX

- Comprendre la notion de PostBack
- Utiliser la proprit isPostBack

Le cycle de vie des vnements dune page ASP.NET

Lorsquune page ASP.NET est demande, il se produit une srie dvnements.

Ces vnements ont lieu toujours dans le mme ordre ; cest la raison pour laquelle on parle
de cycle de vie des vnements de page.

Le cycle de vie des vnements de page se compose des vnements de page suivants qui
se produisent dans cet ordre :
1. Page_Init. Cet vnement de page initialise la page en crant et en initialisant les
contrles de serveur Web de la page.
2. Page_Load. Cet vnement de page sexcute chaque demande de la page.
3. vnements Control. Cet vnement de page contient des vnements de modification
(par exemple, TextBox1_Changed) et des vnements daction (par exemple,
Button1_Click).
4. Page_Unload. Cet vnement de page se produit lorsque la page est ferme ou lorsque
le contrle est pass une autre page.
La fin du cycle des vnements de page comprend lenlvement de la page de la mmoire.

1/6 Mr ID MANSOUR
TP2 Programmation de sites web dynamiques ISTA NTIC SYBA

La notion de PostBack

Un postback est un rappel du serveur depuis une page sur elle-mme.

Si on appelle la page Default.aspx une premire fois, elle s'affiche sur le navigateur cot
client, et si ce client appuie sur un bouton, il va rappeler la page Default.aspx. Lorsque cet
appel arrivera sur le serveur, celui-ci considrera tre en postback.

Le post-back est le modle utilis en ASP.NET pour transmettre les donnes d'un formulaire
HTML avec la mthode POST. Ce modle consiste afficher et traiter les donnes
recueillies du formulaire sur la mme page ASPX. Poster un formulaire sur lui-mme permet
aux contrles de la page de non seulement obtenir une programmation vnementielle, mais
aussi de conserver leur tat entre chaque Post.

Les Publications

Dans ASP.NET, les formulaires ont t conus pour republier les informations sur la page
ASP.NET mettrice, pour traitement. Ce processus est appel publication. Les publications
peuvent se produire suite certaines actions des utilisateurs. Par dfaut, seuls les
vnements clic de contrle Button provoquent la publication (PostBack) du formulaire sur
le serveur. Toutefois, si vous attribuez la valeur True la proprit AutoPostBack dun
contrle, la publication des vnements de ce contrle est force.

La proprit isPostBack

Lvnement Page_Load sexcute chaque demande dune page, que ce soit une
premire demande ou une publication.

tant donn que lvnement Page_Load sexcute chaque demande dune page, tout le
code quil contient sexcute chaque fois que la page est demande.
Toutefois, lorsque vous utilisez des vnements de publication, vous ne souhaitez peut-tre
pas que tout le code sexcute de nouveau. Si tel est le cas, vous pouvez avoir recours la
proprit Page.IsPostBack pour contrler le code qui sexcute uniquement lors de la
premire demande de la page, comme illustr dans le code suivant :

public void Page_Load(...){

if(Page.IsPostBack == false){ // ou if( !IsPostBack ){

//code sexcute uniquement lors du premier chargement de la page
}
//ce code sexcute chaque demande de la page
}

2/6 Mr ID MANSOUR
TP2 Programmation de sites web dynamiques ISTA NTIC SYBA

Atelier 1 :Le contrle DropDownList et le PostBack

1. Crer une page Default.aspx contenant le formulaire suivant :

2. Ajoutez le code suivant dans le code behind afin de remplir la liste droulante
(DropDownList) lors du premier accs la page (Dans Page_Load) :

DropDownList1.Items.Add("Dveloppeur VB.NET") ;
DropDownList1.Items.Add("Dveloppeur C#") ;
DropDownList1.Items.Add("Dveloppeur J2EE") ;
DropDownList1.Items.Add("Dveloppeur VB.NET") ;
DropDownList1.Items.Add("Dveloppeur PHP") ;
DropDownList1.Items.Add("Autre dveloppeur") ;

3. Ajouter le code suivant qui affiche les donnes saisies dans un Label aprs clic sur le
bouton Envoyer :

Label1.Text = "Bonjour " + TextBox1.Text ;

Label1.Text += " Profil choisi : " + DropDownList1.Text ;

4. Excuter la page Default.aspx

5. Remplir et soumettre le formulaire. Quest-ce que vous remarquez ?

6. Corriger le rsultat obtenu

7. Crer une deuxime page traitement.aspx contenant un Label et y ajouter le code

suivant (Dans Page_Load):

Label1.Text = "Page de Traitement" ;

8. Donner la valeur traitement.aspx la proprit PostBackUrl du bouton

Envoyer de la page Default.aspx
9. Excuter et tester la page Default.aspx

3/6 Mr ID MANSOUR
TP2 Programmation de sites web dynamiques ISTA NTIC SYBA

Nous allons essayer de faire en sorte que lorsque lutilisateur slectionne un profil, un Label
soit mis jour avec le contenu de la liste.
1. Modifier la proprit AutoPostBack de la DropDownList1 en la positionnant
True . De cette manire, lvnement SelectedIndexChanged est dclench
ct serveur lorsque lutilisateur choisie une valeur dans la liste
2. Double cliquer sur la DropDownList et ajoutez le code suivant :

Label1.Text = "Profil choisi : " + DropDownList1.Text ;

3. Tester le fonctionnement du formulaire.

4. Remarquer que si on dsactive la proprit AutoPostBack, le Label ne prend pas la

valeur de llment slectionn.

Exercice : Calendriers des matches dun championnat

Lobjectif de cet exercice est de raliser une page web qui permet la consultation et la
modification des dates des matchs dun championnat en utilisant un calendrier.

1) Crer la page web suivante qui contient un contrle DropDownList listMatch pr-remplie
avec une liste des matchs, un contrle Calendar calDate et un contrle Label lblMatchs pour
afficher la date du match slectionn :

4/6 Mr ID MANSOUR
TP2 Programmation de sites web dynamiques ISTA NTIC SYBA

Lorsque lutilisateur slectionne un match sa date sera slectionne dans le calendrier et sera
affich dans le Label.

Note : Le calendrier sera cach si aucun match nest slectionn.

Un exemple des dates des 10 premiers matchs de la Ligue des champions 2016 :

16/02/2016: PSG Chelsea

16/02/2016: Benfica Znith Saint-Ptersbourg

17/02/2016: La Gantoise Wolfsburg

17/02/2016: AS Rome Real Madrid

23/02/2016: Arsenal Barcelone

23/02/2016: Juventus Bayern Munich

24/02/2016: PSV Eindhoven Atletico Madrid

24/02/2016: Dynamo Kiev Manchester City

08/03/2016: Wolfsburg La Gantoise

08/03/2016: Real Madrid AS Rome

2) Modifier linterface pour permettre aussi laffichage de tous les matchs programms dans
la mme date quon slectionne dans le calendrier. Laffichage sera effectu dans un Label et
devra prvoir le cas o aucun match nest programm :

5/6 Mr ID MANSOUR
TP2 Programmation de sites web dynamiques ISTA NTIC SYBA

Amliorations :

Permettre la modification de la date du match slectionn

Afficher les drapeaux des quipes slectionnes

6/6 Mr ID MANSOUR