ASP NET Sous

Visual Studio

Version 1.0
Janvier 2014
Programmation Web [Link] avec Visual Studio

SOMMAIRE
1. Généralités .......................................................................................................................... 3
2. Création d’un projet ........................................................................................................... 4
2.1. La page [Link] ................................................................................................... 5
2.2. Les fichiers [Link] et [Link] ............................................. 9
3. Gestion des données d’une page ...................................................................................... 10
3.1. Les événements d’une page ....................................................................................... 10
3.1.1. Demande initiale d’une page ASPX : GET ........................................................ 13
3.1.2. Traitement d’un événement produit sur la page affichée par le navigateur :
POST 13
3.1.3. Le VIEWSTATE ................................................................................................ 15
3.2. Valeurs postées .......................................................................................................... 18
3.3. Données de portée Application.................................................................................. 21
3.4. Données de portée Session ........................................................................................ 27
4. Gestion de la Page ............................................................................................................ 31
4.1. Get / Post dans le chargement d’une page ................................................................. 31
4.2. Forward d’une page vers une autre ............................................................................ 34
4.3. Redirection d’une page vers une autre ...................................................................... 37
5. Création d’application avec page Maître.......................................................................... 40
5.1. Création de la page Maître......................................................................................... 41
5.2. Création des pages Esclave........................................................................................ 45
5.3. Création de composant Menu .................................................................................... 46
5.4. Affinement des pages esclave.................................................................................... 50
6. L’accès aux bases de données .......................................................................................... 52
6.1. La base de données .................................................................................................... 52
6.2. Connexion à la base de données ................................................................................ 53
6.3. Accès aux données..................................................................................................... 56
7. Projet ................................................................................................................................ 59

Professeur : ASSALE Adjé Louis 2/59 INP-HB

Programmation Web [Link] avec Visual Studio

[Link] sous Visual Studio avec C#

1. Généralités

Les premiers sites Web étaient constitués d’un ensemble de fichiers textes
simples mise en forme en HTML. Les informations affichées étaient statiques, il
fallait modifier manuellement le contenu des fichiers pour l’adapter.

ASP (Active Server Pages) est une technologie Microsoft qui permet de générer
dynamiquement le contenu des pages Web. Il est constitué de codes qui
s’insèrent dans un fichier HTML et s’exécutent sur un serveur Web.

Le code ASP est traité sur le serveur. Aucun code côté serveur n’est envoyé vers
le navigateur de l’utilisateur qui ne voit que des fichiers HTML et le script côté
client éventuellement intégré à la page.
Les étapes de traitement d’un fichier ASP sont schématisées par :

Professeur : ASSALE Adjé Louis 3/59 INP-HB

Programmation Web [Link] avec Visual Studio

2. Création d’un projet

Pour créer un projet : lancer Visual Studio ; choisir projet web sous C# et
application web [Link] vide. On donne un nom à notre application ASPNET.
Un dossier sera créé pour le projet avec ce nom.
On choisit l’emplacement c’est-à-dire le dossier parent du dossier de notre
projet.

Une fois le projet créé, l’explorateur de solution affiche ceci :

 [Link] est le fichier de configuration du projet [Link]

 References 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

Professeur : ASSALE Adjé Louis 4/59 INP-HB

Programmation Web [Link] avec Visual Studio

On peut afficher la liste des Dll mise par défaut dans les références du projet. La
plupart sont inutiles.

Si le projet doit utiliser une Dll non listée, celle-ci peut être ajoutée par :

2.1. La page [Link]

On crée notre première page en faisant menu Projet/ Ajouter un nouvel

élément :

Professeur : ASSALE Adjé Louis 5/59 INP-HB

Programmation Web [Link] avec Visual Studio

On choisit Web Form et on donne un nom à notre élément ici [Link] :

La page [Link] 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 [Link].

De nouveaux fichiers sont créés :

[Link] contient le code de gestion des événements provoqués par

l’utilisateur sur la page [Link] affichée dans son navigateur.

Professeur : ASSALE Adjé Louis 6/59 INP-HB

Programmation Web [Link] avec Visual Studio

[Link] contient la liste des composants [Link] de la page

[Link]. Chaque composant [Link] déposé sur la page [Link]
donne naissance à la déclaration de ce composant dans
[Link].

La page [Link] est vide, elle peut être construite visuellement (onglet
Design) ou à l’aide balises (onglet Source).

En mode Design, on construit la page Default en y déposant des composants

que l’on trouve dans la boite à outils.

Le mode Source donne accès au code source de la page :

La 1ère ligne est une directive [Link] qui liste certaines propriétés de la page :

Professeur : ASSALE Adjé Louis 7/59 INP-HB

Programmation Web [Link] avec Visual Studio

- la directive Page s’applique à une page web. Il y a d’autres directives

telles que Application, WebService, … qui s’applique à d’autres objets
[Link]
- 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 [Link] et son gestionnaire dans [Link] se
fait par le nom de l’événement. Ainsi l’événement Load sur la page
[Link] sera traité par la méthode Page_Load de la classe
[Link] définie par l’attribut Inherits

A partir de la troisième ligne, la page [Link] est décrite à l’aide de

balises :
- Html classiques telles que la balise <body> ou <div>
- [Link]. ce sont les balises qui ont l’attribut runat="server". Les
balises [Link] 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 [Link].

On peut modifier directement la page [Link] à partir de son code source.

C’est parfois plus simple que de passer par le mode Design.
Nous allons donner un titre à notre page grâce à la balise Html <title> « Essai en
[Link] » et introduire un texte dans le corps (balise <body>) « Gestion des
étudiants ».

Professeur : ASSALE Adjé Louis 8/59 INP-HB

Programmation Web [Link] avec Visual Studio

Si on exécute le projet par Ctrl+F5, la page [Link] s’affiche dans un

navigateur :

Visual Studio a un serveur web intégré qui est lancé lorsqu’on exécute un projet
web. Ce serveur web écoute sur un port aléatoire ici 9926 ; mais le port
d’écoute habituel d’un serveur web est 80.

2.2. Les fichiers [Link] et [Link]

Le fichier [Link] déclare les composants de la page

[Link] :

On trouve dans ce fichier la liste des composants de la page [Link] ayant

un identifiant. Ils correspondent aux balises de [Link] ayant l’attribut
runat="server" et l’attribut id. Ainsi le composant de la dernière ligne
‘HtmlForm’ correspond à la balise <form id="form1" runat="server"> de
[Link].

Le développeur interagit peu avec le fichier [Link].

Néanmoins ce fichier est utile pour connaître la classe d’un composant
particulier. Ainsi on a remarqué que le composant form1 est de type
HtmlForm. Le développeur peut alors explorer cette classe pour en connaitre
les propriétés et méthodes. Les composants de la page [Link] sont
utilisés par la classe du fichier [Link] :

Professeur : ASSALE Adjé Louis 9/59 INP-HB

Programmation Web [Link] avec Visual Studio

On note que la classe Default définie dans les fichiers [Link] et

[Link] est la même à cause du mot clé partial qui rend
possible d’étendre la déclaration d’une classe sur plusieurs fichiers, ici deux.

On voit dans le fichier que la classe Default étend la classe Page 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. C’est la méthode Page_Load qui gère
l’événement Load de la page. C’est souvent ici qu’on initialise la page avant son
affichage dans le navigateur du client.

La classe associée à une page web, ici la classe [Link], 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.

3. Gestion des données d’une page

3.1. Les événements d’une page

Modifions notre page [Link] en y ajoutant des composants. On peut le

faire en modifiant directement le code source de la page ou en dessinant la page
en mode design.

Professeur : ASSALE Adjé Louis 10/59 INP-HB

Programmation Web [Link] avec Visual Studio

Le fichier [Link] devient :

On y trouve tous les composants [Link] de la page [Link] ayant un

identifiant.

On va modifier le fichier [Link] de sorte à afficher les événements

effectués lors de l’initialisation, chargement et validation de la page :

namespace ASPNET
{
public partial class Default : [Link]
{
protected void Page_Init(object sender, EventArgs e)
{
// on note l'evenement
[Link](0, [Link]("{0} : Page_Init",
[Link]("hh:mm:ss")));

Professeur : ASSALE Adjé Louis 11/59 INP-HB

Programmation Web [Link] avec Visual Studio

}
protected void Page_Load(object sender, EventArgs e)
{
// on note l'evenement
[Link](0, [Link]("{0} : Page_Load",
[Link]("hh:mm:ss")));

}
protected void ButtonValider_click(object sender, EventArgs e)
{
// on note l'evenement
[Link](0, [Link]("{0} : ButtonValider",
[Link]("hh:mm:ss")));

}
}
}

La classe Default traite 3 événements :

 l’événement Init qui se produit lorsque la page est initialisée
 l’événement Load 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 Button Valider qui se produit lorsque
l’utilisateur clique sur le bouton Valider.

Ici, on a géré chacun de ces 3 événements en ajoutant 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.

L’exécution donne la page suivante :

On remarque les événements Page_Init et Page_Load se sont produits dans cet

ordre.

Professeur : ASSALE Adjé Louis 12/59 INP-HB

Programmation Web [Link] avec Visual Studio

Lorsque le navigateur demande la page [Link] directement par son url, 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 Valider. Les
événements provoqués par l’utilisateur une fois la page chargée dans le
navigateur déclenchent une requête à la page [Link] mais cette fois-ci
avec une commande HTTP appelée POST.

3.1.1. Demande initiale d’une page ASPX : GET

Le chargement initial d’une page P dans un navigateur est fait par une opération
HTTP GET.

 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.

3.1.2. Traitement d’un événement produit sur la page affichée

par le navigateur : POST

Une fois qu’une page P est chargée, les événements qui se produisent ensuite sur
cette page produisent à chaque fois une nouvelle requête vers la même page
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.

Navigateur Serveur Web

1

HTML Page ASPX

2

Professeur : ASSALE Adjé Louis 13/59 INP-HB

Programmation Web [Link] avec Visual Studio

 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 ou redirection de page.

Comparons les résultats envoyés par un GET et un POST

Sur la figure de gauche, la page a été obtenue par un GET, on voit les deux
événements qui se sont produits lors de ce GET.
Une fois que l’utilisateur va cliquer sur le bouton Valider, la page [Link]
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
[Link] : les quatre TextBox (TextBoxMat, TextBoxNom, TextBoxPre et
TextBoxSex), le bouton ButtonValider, la liste ListBoxEvts. Pour chaque type
de composants les valeurs postées est les suivantes :
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 de figure de droite. C’est de nouveau la

page [Link], c’est le comportement normal, à moins qu’il y ait transfert ou
redirection de page par le gestionnaire d’événements de la page. On peut
remarquer que deux nouveaux événements se sont produits :

Professeur : ASSALE Adjé Louis 14/59 INP-HB

Programmation Web [Link] avec Visual Studio

 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 Valider

On remarque 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 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
 A l’issue du POST, la page [Link] a été renvoyée au client avec
les modifications apportées par les gestionnaires d’événements. C’est
toujours ainsi que cela se passe, à moins que le dernier gestionnaire
d’événement exécuté ne transfert le flux d’exécution à une autre page
ou la redirige le navigateur client vers une autre page.
 Ici c’est l’événement ButtonValider_Click qui s’est produit après
l’événement Page_Load dont c’est lui qui peut prendre la décision de
transférer ou de rediriger.

3.1.3. Le VIEWSTATE

La liste des événements dans la page renvoyée avec le POST a gardé les deux
événements affichés lors du chargement initial GET de la page [Link].
Cela peut paraitre surprenant d’autant plus que la page [Link] a été
recréée lors du POST (on ne devrait avoir que deux événements au lieu de
quatre). C’est le mécanisme du VIEWSTATE qui rend cela possible. Lors du
GET initial, le serveur web envoie la page [Link] avec une balise HTML
<input type ="hidenn"…> appelé champ caché.

<!DOCTYPE html>

<html xmlns="[Link]
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/><title>
Essai en [Link]
</title></head>
<body>
<h3>Gestion des etudiants </h3>
<form method="post" action="[Link]" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
value="nWWUvcXzeUMcSURRPkp57MjGOWVJVp7Bpzvgf00yOcK4kYtQRVoKyjERxj+4hBqpHQYM
XGK0kGFVs7XA2sD2mprNpKYeM+Rs/sMUNzK3ZK+okit5lFRDNo5s3ImgtnWbDkG6vZB9i7VFYbm
2aAOJMm0NWmXS+Cp4mCjHEFH+0DPfix6otM1tUVvHpbQEIfPN6YGPboInWYHK8MlzltqbERqYzt
ZJWBAbJFoeUdLW+JDii7291QF3T5QKB0E6EPvHI1X1S7SudBfgzx1RIpAko+2ChUJtjKid23v2F

Professeur : ASSALE Adjé Louis 15/59 INP-HB

Programmation Web [Link] avec Visual Studio

LefijEL7L3Are4pW/+Ngd7SD4Kvoryzj+RHOZRqEVYortza4j5gxyneuaOf3Lhx+7F8eZVsZsTa
llMv6K/sGcSlVKt5" />
</div>

<div class="aspNetHidden">

Dans le champ 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. La valeur d’un "_VIEWSTATE" est envoyée au
serveur lors d’un POST.
Les composants ont pour valeur après un POST :
 Soit la valeur postée, c.-à-d. la valeur que le composant avait dans le
formulaire lorsque celui-ci a été posté au serveur
 Soit une valeur donnée par l’un des gestionnaires d’événements
Dans notre cas,
 les quatre composants TextBox retrouveront leur valeur postée car les
gestionnaires d’événements n’y touchent pas
 le ListBox retrouve sa valeur postée, c.-à-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 ListBoxEvts : on clique droit sur le
composant et on choisit propriétés puis on met la propriété à false

Professeur : ASSALE Adjé Louis 16/59 INP-HB

Programmation Web [Link] avec Visual Studio

Exécutons à nouveau notre page [Link], on obtient ceci :

On note les deux événements renvoyés après le GET initial (figure de gauche).
On saisit des valeurs dans les champs Matricule et Nom puis on clique sur le
bouton Valider. Un POST vers la page [Link] va être fait. Le résultat
renvoyé est (figure de droite):
 le mécanisme du VIEWSTATE activé explique que les TextBox
aient gardé leur valeur postée
 le mécanisme du VIEWSTATE inhibé explique que le composant
ListBoxEvts n’ait pas gardé son contenu initial.

Par défaut, tous les éléments d’une page ASPX ont leur propriété
EnableViewState à True. A chaque fois que la page ASPX est envoyée au
navigateur client, elle contient le champ caché _VIEWSTATE qui a pour valeur
une chaine de caractères codant l’ensemble des valeurs des composants ayant
leur propriété EnableViewState à True. Pour minimiser la taille de cette chaine,
on peut chercher à réduire le nombre de composants ayant leur propriété
EnableViewState à True.

Les composants d’une page ASPX obtiennent leurs valeurs à l’issue d’un POST
de la manière suivante :
1. la page ASPX est instanciée. Les composants sont initialisés avec leurs
valeurs de conception
2. la valeur _VIEWSTATE postée par le navigateur est utilisée pour donner
aux composants la valeur qu’ils avaient lorsque la page ASPX a été
envoyée au navigateur la fois précédente
3. les valeurs postées par le navigateur sont affectées aux composants
4. les gestionnaires d’événements sont exécutés. Ils peuvent modifier la
valeur de certains composants

Professeur : ASSALE Adjé Louis 17/59 INP-HB

Programmation Web [Link] avec Visual Studio

3.2. Valeurs postées

Ici on s’intéressera aux valeurs postées ; modifions la page [Link] de la

manière suivante : en ajoutant un Label pour afficher les valeurs des TextBox
postées

On modifie l’événement Click du bouton valider de la manière suivante :

protected void ButtonValider_Click(object sender, EventArgs e)

{
// on note l'evenement
[Link](0, [Link]("{0} : ButtonValider_Click",
[Link]("hh:mm:ss")));
// on affiche le Matricule et le Nom
[Link] = [Link]("Matricule={0}, Nom={1}",
[Link](), [Link]());

}
Le composant Label [LabelPost] va afficher à travers sa propriété Text le
contenu des champs TextBoxMat et TextBoxNom. La méthode Trim() élimine
les espaces qui peuvent précéder ou suivre une chaine de caractères.

On lance l’application et on saisit des valeurs dans les Champs Matricule et

Nom ; ce qui nous donne la figure de gauche. Ensuite on clique sur le bouton
valider, on obtient le résultat du POST dans la figure de droite

Professeur : ASSALE Adjé Louis 18/59 INP-HB

Programmation Web [Link] avec Visual Studio

- Validation de données

Nous allons mettre des composants sur notre page pour vérifier la validité des
données postées ; c’est composants sont appelés validateurs. La 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 l’envoi.
Côté serveur, le développeur doit donc toujours vérifier des données
postées.

Plaçons les composants validateurs sur les champs Matricule, Nom et Age de la
manière suivante :
Pour tous ces champs, on place des contrôles validateur
« RequieredFieldValidator » qui impose de saisir quelque chose dans le champ.
Pour le champ Age on place en plus un contrôle « RangeValidator » qui spécifie
un intervalle de valeurs.
Pour chaque contrôle « RequieredFieldValidator » on renseigne les propriétés
ErrorMessage par ‘Données obligatoires’ et ControlToValide par le nom du
champ à valider.
Pour le contrôle « RangeValidator » on renseigne les propriétés ErrorMessage
par ‘Tapez un nombre entre 1 et 120’, Type par integer , MinimumValue par 1,
MaximumValue par 120 et ControlToValidate par le nom du champ.

Professeur : ASSALE Adjé Louis 19/59 INP-HB

Programmation Web [Link] avec Visual Studio

Il faut configurer le composant qui provoque le POST ici le Bouton Valider à

travers sa propriétés CausesValidation.
Cette propriété fixe le mode automatique ou non des validations côté serveur. Sa
valeur par défaut est ‘true’ si elle n’est pas explicitement mentionnée. Dans ce
cas,
 côté client, les validateurs ayant EnableClientScript à True sont
exécutés. Le POST n’a lieu que si tous les validateurs côté client
réussissent
 côté serveur, tous les validateurs présents sur la page sont
automatiquement exécutés avant le traitement de l’événement qui a
provoqué le POST. Ici, la validation sera exécutée avant
l’exécution de la méthode ButtonValider_Click. Si la propriété
[Link] est ‘true’ alors toutes les validations de la page ont
réussi. Dans le cas où une n’a pas réussi, on peut arrêter le
traitement de l’événement qui a provoqué le POST. La page postée
est renvoyée telle qu’elle a été saisie. Les validateurs ayant échoué
affiche alors leur message d’erreur (attribut ErreurMessage).
Si CausesValidation a la valeur ‘false’, alors
 côté client, aucun validateur n’est exécuté
 côté serveur, c’est au développeur de demander lui-même
l’exécution des validations de la page. Il le fait avec la méthode
[Link](). Selon le résultat des validations, cette méthode
positionne la propriété [Link] à ‘true’ ou ‘false’

Le code de traitement du bouton Valider peut évoluer comme suit :

protected void ButtonValider_Click(object sender, EventArgs e)

{
// on note l'evenement
[Link](0, [Link]("{0} : ButtonValider_Click",
[Link]("hh:mm:ss")));
// on affiche le Matricule et le Nom

Professeur : ASSALE Adjé Louis 20/59 INP-HB

Programmation Web [Link] avec Visual Studio

[Link] = [Link]("Matricule={0}, Nom={1}",

[Link](), [Link]());

// test de la validation de la page

[Link]();
if (![Link])
{
// message d'erreur global
[Link] = "Veuillez corriger les erreurs de saisie
...";
[Link] = true;
return;
}
// on cache le message d'erreur
[Link] = false;
// on affiche les informations valides
[Link] = [Link]("Matricule={0}, Nom={1}, Age={2}",
[Link](),[Link](),[Link]());

3.3. Données de portée Application

La classe de la page ASPX est instanciée au début de la requête du client et

détruite à la fin de celle-ci. Aussi elle ne peut servir à mémoriser des données
entre deux requêtes. On peut vouloir mémoriser deux types de données :
 des données partagées par tous les utilisateurs de l’application web. Ce
sont en général des données en lecture seule. Trois fichiers sont utilisés
pour mettre en œuvre ce partage de données :
o [Link] : le fichier de configuration de l’application
o [Link], [Link] : permettent de définir une classe,
appelée classe globale d’application, dont la durée de vie est celle

Professeur : ASSALE Adjé Louis 21/59 INP-HB

Programmation Web [Link] avec Visual Studio

de l’application, ainsi que des gestionnaires pour certains

événements de cette même application.
La classe globale d’application permet de définir des données qui seront
disponibles pour toutes les requêtes de tous les utilisateurs.
 des données partagées par les requêtes d’un même client. Ces données
sont mémorisées dans un objet appelé Session. On parle alors de session
client pour désigner la mémoire du client. Toutes les requêtes d’un client
ont accès à cette session. Elles peuvent y stocker et y lire des
informations.
Navigateur Serveur Web
Mémoire
1 Application

HTML Page ASPX Mémoire

Session
2

Ci-dessus, nous avons :

 la mémoire de l’application qui contient la plupart du temps des données
en lecture seule et qui est accessible à tous les utilisateurs.
 la mémoire d’un utilisateur particulier, ou session, qui contient des
données en lecture/écriture et qui est accessible aux requêtes successives
d’un même utilisateur.
 non représentée ci-dessus, il existe une mémoire de requête, ou contexte
de requête. La requête d’un utilisateur peut être traitée par plusieurs pages
ASPX successives. Le contexte de la requête permet à une page 1 de
transmettre de l’information à une page 2.

Pour gérer les données d’application, on crée la classe globale de l’application

comme suit :

- on clique sur Projet/Nouvel élément et on choisit classe d’application

globale – on garde le nom par défaut [Link]

Professeur : ASSALE Adjé Louis 22/59 INP-HB

Programmation Web [Link] avec Visual Studio

- on clique sur le bouton Ajouter – deux nouveaux fichiers ont été ajoutés
au projet

- quand on affiche le balisage de [Link], on obtient ceci :

<%@ Application Codebehind="[Link]" Inherits="[Link]" Language="C#" %>

- la balise Application remplace la balise Page qu’on avait pour

[Link]. elle identifie la classe d’application
- Codebehind : définit le fichier dans lequel est définie la classe
d’application globale
- Inherits : définit le nom de cette classe

La classe Global générée est la suivante

using System;
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];

namespace ASPNET
{
public class Global : [Link]
{

protected void Application_Start(object sender, EventArgs e)

{

protected void Session_Start(object sender, EventArgs e)

{

protected void Application_BeginRequest(object sender, EventArgs e)

{

Professeur : ASSALE Adjé Louis 23/59 INP-HB

Programmation Web [Link] avec Visual Studio

protected void Application_AuthenticateRequest(object sender, EventArgs e)

{

protected void Application_Error(object sender, EventArgs e)

{

protected void Session_End(object sender, EventArgs e)

{

protected void Application_End(object sender, EventArgs e)

{

}
}
}

La classe est générée avec des squelettes de gestionnaires d’événements de

l’application :

 Application_Start démarre l’application et Application_End fin de

l’application lorsque le serveur web s’arrête ou lorsque l’administrateur
décharge l’application
 Session_Start démarre une nouvelle session client à l’arrivée d’un
nouveau client ou à l’expiration d’une session existante et Session_End
fin d’une session client soit explicitement par programmation soit
implicitement par dépassement de la durée autorisée pour une session
 Application_Error : apparition d’une exception non gérée par le code de
l’application et remontée jusqu’au serveur
 Application_BeginRequest gère l’arrivée d’une nouvelle requête
 Application_AuthenticateRequest se produit lorsqu’un utilisateur s’est
authentifié

La méthode Application_Start est souvent utilisée pour initialiser l’application à

partir d’informations contenues dans [Link]. Celui généré à la création
initiale d’un projet a l’allure suivante :
<?xml version="1.0" encoding="utf-8"?>

<!--
Pour plus d'informations sur la configuration de votre application [Link],
consultez
[Link]
-->

Professeur : ASSALE Adjé Louis 24/59 INP-HB

Programmation Web [Link] avec Visual Studio

<configuration>
<[Link]>
<compilation debug="true" targetFramework="4.5" />
<httpRuntime targetFramework="4.5" />
</[Link]>

</configuration>

On va faire évoluer ce fichier de la manière suivante:

<?xml version="1.0" encoding="utf-8"?>

<!--
Pour plus d'informations sur la configuration de votre application [Link],
consultez
[Link]
-->

<configuration>
<[Link]>
<compilation debug="true" targetFramework="4.5" />
<httpRuntime targetFramework="4.5" />
</[Link]>
<appSettings>
<add key="cle1" value="valeur1"/>
<add key="cle2" value="valeur2"/>
</appSettings>
<connectionStrings>
<add connectionString="connexion1" name="conn1"/>
</connectionStrings>
</configuration>

- On a ajouté la balise <appSettings> qui permet de définir un dictionnaire

d’information
- et la balise <connectionStrings> qui permet de définir des chaines de
connexion à des bases de données

Ces éléments peuvent être exploités par la classe globale d’application

[Link] de la manière suivante :

using [Link];
using [Link];
using [Link];
using [Link];

namespace ASPNET
{
public class Global : [Link]
{
public static string Param1 { get; set; }
public static string Param2 { get; set; }
public static string ConnString1 {get;set;}
public static string Erreur { get; set; }

protected void Application_Start(object sender, EventArgs e)

{
try

Professeur : ASSALE Adjé Louis 25/59 INP-HB

Programmation Web [Link] avec Visual Studio

{
Param1 = [Link]["cle1"];
Param2 = [Link]["cle2"];
ConnString1 =
[Link]["conn1"].ConnectionString;
}
catch (Exception ex)
{
Erreur = [Link]("Erreur de configuration : {0}", [Link]);
}

protected void Session_Start(object sender, EventArgs e)

{

On a défini 4 propriétés statiques dans la classe Global, pour accéder à chaque

propriété P on utilise la syntaxe Global.P.
Le fichier [Link] est accessible via la classe
[Link] et on récupère les éléments de la
balise <appSettings> via l’attribut key et ceux de la balise <connectionStrings>
via l’attribut name.

Les attributs statiques de la classe Global étant accessibles de n’importe quel

gestionnaire d’événement des pages ASPX chargées, nous les utilisons dans le
gestionnaire Page_Load de la page [Link].
On va placer un label pour afficher les éléments de la Classe Global :

Dans le gestionnaire Page_load, on ajoutera le code nécessaire comme ceci :

protected void Page_Load(object sender, EventArgs e)
{
// on note l'evenement
[Link](0, [Link]("{0} : Page_Load",
[Link]("hh:mm:ss")));
//on recupere les informations de la classe globale d'application

Professeur : ASSALE Adjé Louis 26/59 INP-HB

Programmation Web [Link] avec Visual Studio

[Link] = [Link]("Param1={0}, Param2={1}, ConnString1={2},

Erreur={3}", Global.Param1, Global.Param2, Global.ConnString1, [Link]);
}

Au lancement de l’application on obtient ceci :

On note que les paramètres de [Link] ont été correctement récupérés. La

classe globale d’application est l’endroit idéal pour stocker des informations
partagées par tous les utilisateurs.

3.4. Données de portée Session

On s’intéresse ici à la façon de mémoriser des informations au fil des requêtes

d’un utilisateur donné :
Navigateur Serveur Web Mémoire
Application
1
Mémoire
HTML Page ASPX Utilisateur1
2 Mémoire
Utilisateur2

Chaque utilisateur a sa propre mémoire qu’on appelle sa session.

La classe d’application globale dispose de deux gestionnaires pour gérer les

événements :
- Session_Start : début d’une session
- Session_End : fin d’une session

Professeur : ASSALE Adjé Louis 27/59 INP-HB

Programmation Web [Link] avec Visual Studio

Le mécanisme de la session est mis en œuvre de la façon suivante :

 Lors de la première requête d’un utilisateur, le serveur web crée un jeton
de session qu’il attribue à l’utilisateur. Ce jeton est une suite de caractères
unique pour chaque utilisateur. Il est envoyé par le serveur dans la
réponse faite à la première requête de l’utilisateur.
 Lors des requêtes suivantes, l’utilisateur (le navigateur web) inclut dans sa
requête le jeton de session qu’on lui a attribué, aussi le serveur web est-il
capable de le reconnaitre.
 Une session a une durée de vie. Lorsque le serveur web reçoit une requête
d’un utilisateur, il calcule le temps qui s’est écoulé depuis la requête
précédente. Si ce temps dépasse la durée de vie de la session, une
nouvelle session est créée pour l’utilisateur. Les données de la précédente
session sont perdues. Avec le serveur IIS (Internet Information Server) de
Microsoft, les sessions ont par défaut une durée de vie de 20 mn. Cette
valeur peut être changée par l’administrateur du serveur web.
 Le serveur web sait qu’il a affaire à la première requête d’un utilisateur
parce que cette requête ne comporte pas de jeton de session, c’est la seule.

Toute page [Link] a accès à la session de l’utilisateur via la propriété Session

de la page, de type [Link]. Voici les
propriétés P et Méthodes M de la classe HttpSessionState :

Nom type Rôle

Item[String clé] P La session peut être construite comme un dictionnaire.
Item[clé] est l’élément de la session identifié par clé.
Au lieu d’écrire [Link][clé], on peut
également écrire HttpSessionState.[clé].
Clear M Vide le dictionnaire de la session
Abandon M Termine la session. La session n’est alors plus valide.
Une nouvelle session démarrera avec la prochaine
requête de l’utilisateur

Nous allons dans l’exemple suivant compter le nombre de fois qu’un utilisateur
clique sur le bouton Valider.
On fait évoluer la page [Link] de la manière suivante :

Professeur : ASSALE Adjé Louis 28/59 INP-HB

Programmation Web [Link] avec Visual Studio

On modifie la classe globale d’application en utilisant la session d’utilisateur

pour y stocker un compteur de requêtes identifié par la clé "nbRequetes"

public class Global : [Link]

{
public static string Param1 { get; set; }
public static string Param2 { get; set; }
public static string ConnString1 {get;set;}
public static string Erreur { get; set; }

protected void Application_Start(object sender, EventArgs e)

{
try
{
Param1 = [Link]["cle1"];
Param2 = [Link]["cle2"];
ConnString1 =
[Link]["conn1"].ConnectionString;
}
catch (Exception ex)
{
Erreur = [Link]("Erreur de configuration : {0}", [Link]);
}

protected void Session_Start(object sender, EventArgs e)

{
//compteur de requetes
Session["nbRequetes"] = 0;
}

Ce compteur est mise à jour par le gestionnaire ButtonValider_Click de la page

[Link] :

protected void ButtonValider_Click(object sender, EventArgs e)

{
// on note l'evenement

Professeur : ASSALE Adjé Louis 29/59 INP-HB

Programmation Web [Link] avec Visual Studio

[Link](0, [Link]("{0} : ButtonValider_Click",

[Link]("hh:mm:ss")));
// on affiche le Matricule et le Nom
[Link] = [Link]("Matricule={0}, Nom={1}",
[Link](), [Link]());
// nombre de requetes
Session["nbRequetes"] = (int)Session["nbRequetes"] + 1;
[Link] = Session["nbRequetes"].ToString();
// test de la validation de la page
[Link]();
if (![Link])
{
// message d'erreur global
[Link] = "Veuillez corriger les erreurs de saisie
...";
[Link] = true;
return;
}
// on cache le message d'erreur
[Link] = false;
// on affiche les informations valides
[Link] = [Link]("Matricule={0}, Nom={1}, Age={2}",
[Link](),[Link](),[Link]());

On incrémente le compteur de requêtes et ensuite on l’affiche dans la page. Ce

qui donne :

On lance une fois encore l’application pour définir une session pour un nouvel
utilisateur et ensuite on clique sur le bouton Valider:

Professeur : ASSALE Adjé Louis 30/59 INP-HB

Programmation Web [Link] avec Visual Studio

4. Gestion de la Page

4.1. Get / Post dans le chargement d’une page

On sait que la méthode Page_Load est exécuté que ce soit sur une demande
GET ou une demande POST. Lors du GET, cette méthode est habituellement
utilisée pour initialiser la page envoyée au navigateur client. Ensuite, par le
mécanisme du VIEWSTATE, la page reste initialisée et n’est modifiée que par
les gestionnaires des événements qui provoquent les POST. Il n y a pas lieu de
réinitialiser la page dans Page_Load. D’où le besoin pour cette méthode de
savoir si la requête du client est un GET (la première requête) ou un POST (les
suivantes).

Ajoutons une liste déroulante à notre page [Link]. Le contenu de cette

liste sera défini dans le gestionnaire Page_Load de la requête GET.

Professeur : ASSALE Adjé Louis 31/59 INP-HB

Programmation Web [Link] avec Visual Studio

La liste déroulante est déclarée dans [Link] de la manière

suivante :
protected global::[Link] DropDownListSexes;

On utilisera les méthodes M et propriétés P suivantes de la classe

DropDownList :

Nom Type Rôle

Items P La collection de type ListItemCollection de éléments
de type ListItem de la liste déroulante
SelectedIndex P L’index, partant de 0, de l’élément sélectionné dans la
liste déroulante lorsque le formulaire est posté
SelectedItem P L’élément de type ListItem sélectionné dans la liste
déroulante lorsque le formulaire est posté
SelectedValue P La valeur de type string de l’élément de type ListItem
sélectionné dans la liste déroulante lorsque le
formulaire est posté.

La classe ListItem des éléments d’une liste déroulante sert à générer les balises
<option> de la balise Html <select> :

<select ….>
<option value="val1"> texte1</option>
<option value="val2">texte2</option>
….
</select>

Dans la balise <option>

 texti est le texte affiché dans la liste déroulante
 vali est la valeur postée par le navigateur si textei est le texte sélectionné
dans la liste déroulante

Chaque option peut être générée par un objet ListItem construit à l’aide du
constructeur ListItem(string texte, string value).

On fait évoluer le code du gestionnaire Page_Load dans [Link] de la

manière suivante :
protected void Page_Load(object sender, EventArgs e)
{
// on note l'evenement
[Link](0, [Link]("{0} : Page_Load",
[Link]("hh:mm:ss")));
//on recupere les informations de la classe globale d'application

Professeur : ASSALE Adjé Louis 32/59 INP-HB

Programmation Web [Link] avec Visual Studio

[Link] = [Link]("Param1={0}, Param2={1}, ConnString1={2},

Erreur={3}", Global.Param1, Global.Param2, Global.ConnString1, [Link]);
// initialisatiom du combo des sexes uniquement lors du GET initial
if (![Link])
{
[Link](new ListItem("Masculin","M"));
[Link](new ListItem("Feminin", "F"));
[Link](new ListItem("Indefini", "I"));

}
}

Ici on a utilisé l’attribut IsPostBack de type booléen de la classe Page qui

renvoie vrai si la requête de l’utilisateur est un POST. On ajoute à la liste
DropDownListSexes, un élément de type ListItem(string texte, string value). Le
texte affiché est Masculin la valeur postée est M – texte affiché Féminin valeur
postée F – texte affiché Indéfini valeur postée I.

On modifie le gestionnaire ButtonValider_Click pour afficher la valeur postée

par la liste déroulante :

protected void ButtonValider_Click(object sender, EventArgs e)

{
// on note l'evenement
[Link](0, [Link]("{0} : ButtonValider_Click",
[Link]("hh:mm:ss")));
// on affiche le Matricule, le Nom et le Sexe
[Link] = [Link]("Matricule={0}, Nom={1}, Sexe={2}",
[Link](), [Link](),
[Link]);

La valeur postée pour la liste DropDownListSexes est obtenue avec la propriété

SelectedValue de la liste. Voici un exemple d’exécution :

Professeur : ASSALE Adjé Louis 33/59 INP-HB

Programmation Web [Link] avec Visual Studio

4.2. Forward d’une page vers une autre

Jusqu’ici, les opérations GET et POST retournaient toujours la même page

[Link]. On va étudier le cas où une requête est traitée par deux pages
ASPX successives, [Link] et [Link] et où c’est cette dernière qui est
retournée au client. De même, on verra comment la page [Link] peut
transmettre des informations à la page [Link] via une mémoire qu’on
appelle mémoire de requête.

Navigateur Serveur Web

1
[Link] [Link]
HTML
Mémoire de la requête
2

Ajoutons une page nommée [Link] à notre projet. La page contiendra un

label qui servira à afficher une information transmise par la page [Link] ;
un lien Html vers la page [Link]. Lorsque l’utilisateur cliquera sur ce lien,
le navigateur demandera la page [Link] avec une opération GET. La page
[Link] sera alors chargée comme si l’utilisateur avait tapé directement son
Url dans son navigateur (propriété NavigateUrl).

Le code source de [Link] est le suivant :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="[Link]"
Inherits="ASPNET.Page1" %>

<!DOCTYPE html>

<html xmlns="[Link]

Professeur : ASSALE Adjé Louis 34/59 INP-HB

Programmation Web [Link] avec Visual Studio

<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.auto-style1 {
font-size: xx-large;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>

<span class="auto-style1"><strong>Page 1</strong></span></div>

<asp:Label ID="Label1" runat="server"></asp:Label>
<p>
<asp:HyperLink ID="HyperLink1" runat="server"
NavigateUrl="~/[Link]">Retour vers page Default</asp:HyperLink>
</p>
</form>
</body>
</html>

On va ajouter un composant de type LinkButton qui a pour Id

LinkButtonToPage1 à notre page [Link]:

Le code source du nouveau composant est :

<asp:LinkButton ID="LinkButtonToPage1" runat="server" CausesValidation="False"

EnableViewState="False" OnClientClick="LinkButtonToPage1_Click">Forward vers
Page1</asp:LinkButton>

 CausesValidation="false" : le clic sur le lien va provoquer un POST vers

[Link]. Le composant LinkButton se comporte comme le
composant Button. Ici, on ne désire pas que le clic sur le lien déclenche
l’exécution des validateurs

Professeur : ASSALE Adjé Louis 35/59 INP-HB

Programmation Web [Link] avec Visual Studio

 EnableViewState="false" : il n’y a pas lieu de conserver l’état du lien au

fil des requêtes. Il garde ses valeurs de conception.
 OnClientClick="LinkButtonToPage1_Click" : nom de la méthode qui,
dans [Link], gère l’événement Click sur le composant
LinkButtonToPage1.

Le code du gestionnaire LinkButtonToPage1_Click est le suivant :

protected void LinkButtonToPage1_Click(object sender, EventArgs e)

{
// on met des infos dans le contexte
[Link]["msg1"] = "Message de [Link] pour Page1";
// on passe la requete a Page1
[Link]("[Link]",true);
}

La requête est passée à la page [Link] au moyen de la méthode

[Link]. Le deuxième paramètre de la méthode qui est à true indique
qu’il faut passer à [Link] toute l’information qui a été envoyée à
[Link] lors du POST. Cela permet par exemple à [Link] d’avoir accès
aux valeurs postées via une collection appelée [Link]. On accède au
contexte de la requête via la propriété Context de la classe Page. Ce contexte
peut servir de mémoire entre les différentes pages qui traitent la même requête,
ici [Link] et [Link]. On utilise pour cela le dictionnaire Items.

Lorsque [Link] est chargée par l’opération [Link]("[Link]",

true), tout se passe comme si [Link] avait été appelée par un GET d’un
navigateur. Le gestionnaire Page_Load de [Link] est exécuté
normalement. On l’utilisera pour afficher le message mis par [Link] dans
le contexte de la requête :

using System;
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];

namespace ASPNET
{
public partial class Page1 : [Link]
{
protected void Page_Load(object sender, EventArgs e)
{
[Link]= [Link]["msg1"] as string;
}
}
}

Professeur : ASSALE Adjé Louis 36/59 INP-HB

Programmation Web [Link] avec Visual Studio

Le message mis par [Link] dans le contexte de la requête, est affiché dans
Label1.

Dans la page [Link], on clique sur le lien qui nous mène vers la Page1 ; la
page Page1 est affichée ; le message créé dans [Link] est affiché par
[Link]. L’Url affichée dans le navigateur est celle de la page [Link].

4.3. Redirection d’une page vers une autre

Ici, on présentera une autre technique fonctionnellement proche de la

précédente : lorsque l’utilisateur demande la page Default,aspx par un POST, il
reçoit en réponse une autre page [Link]. Dans la méthode précédente, la
requête de l’utilisateur était traitée successivement par deux pages :
[Link] et [Link]. Dans la méthode de la redirection de page qu’on
présente maintenant, il y a deux requêtes distinctes du navigateur :

Navigateur Serveur Web

1
[Link]
HTML
Session
Utilisateur
2
[Link]
HTML

Professeur : ASSALE Adjé Louis 37/59 INP-HB

Programmation Web [Link] avec Visual Studio

 en 1, le navigateur fait une requête POST à la page [Link]. Celle-ci

traite la requête et envoie une réponse dite de redirection au navigateur.
Cette réponse est un simple flux HTTP (des lignes de texte) demandant
au navigateur de se rediriger vers une autre Url [Link]., [Link]
n’envoie pas de flux Html dans cette première réponse.
 en 2, le navigateur fait une requête GET à la page [Link]. Celle-ci est
alors envoyée en réponse au navigateur.
 si la page [Link] souhaite transmettre des informations à la page
[Link], elle peut le faire via la session de l’utilisateur. Contrairement
à la méthode précédente, le contexte de la requête n’est pas utilisable ici,
car il y a ici deux requêtes distinctes donc deux contextes distincts. Il faut
alors utiliser la session de l’utilisateur pour faire communiquer les pages
ensemble.

Ajoutons une page [Link] à notre projet :

On a ajouté un composant LinkButton à la page [Link] qui va rediriger

l’utilisateur vers [Link].
Le code source de [Link] est analogue à celui de [Link] :
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="[Link]"
Inherits="ASPNET.Page2" %>

<!DOCTYPE html>

<html xmlns="[Link]
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.auto-style1 {
font-size: xx-large;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="auto-style1">

Professeur : ASSALE Adjé Louis 38/59 INP-HB

Programmation Web [Link] avec Visual Studio

Page 2</div>
<br />
<asp:Label ID="Label1" runat="server"></asp:Label>
<p>
<asp:HyperLink ID="HyperLink1" runat="server"
NavigateUrl="~/[Link]">Retour vers page Default</asp:HyperLink>
</p>
</form>
</body>
</html>

Dans [Link], l’ajout du composant LinkButton a généré le code source

suivant :
<asp:LinkButton ID="LinkButtonToPage2" runat="server"
OnClientClick="LinkButtonToPage2_Click">Redirection vers Page2</asp:LinkButton>

C’est le gestionnaire LinkButtonToPage2_Click qui assure la redirection vers

[Link]. Son code dans [Link] est :

protected void LinkButtonToPage2_Click(object sender, EventArgs e)

{
// on met un message dans la session
Session["msg2"] = "Message de [Link] pour [Link]";
// on redirige le client vers [Link]
[Link]("[Link]");
}

 on met un message dans la session de l’utilisateur

 l’objet Response est une propriété de toute page ASPX. Elle représente la
réponse faite au client. Elle possède une méthode Redirect qui fait que la
réponse faite au client va être un ordre HTTP de redirection.

Lorsque le navigateur va recevoir l’ordre de redirection vers [Link], il va

faire un GET sur cette page. Dans celle-ci, la méthode Page_Load va s’exécuter.
On l’utilisera pour récupérer le message mis par [Link] dans la session et
afficher celui-ci. Le code [Link] est le suivant :

using [Link];

namespace ASPNET
{
public partial class Page2 : [Link]
{
protected void Page_Load(object sender, EventArgs e)
{
// on affiche le message mis dans la session par [Link]
[Link] = Session["msg2"] as string;
}
}
}

A l’exécution, on obtient ceci :

Professeur : ASSALE Adjé Louis 39/59 INP-HB

Programmation Web [Link] avec Visual Studio

1 requètes
2 requètes

 on clique sur le lien de redirection de [Link]. Un POST est fait vers

la page [Link]
 le navigateur a été redirigé vers [Link]. Cela se voit à l’Url affichée
par le navigateur. Dans la méthode précédente, cette Url était celle de
[Link] car l’unique requête faite par le navigateur l’était vers cette
Url. Ici il y a un premier POST vers [Link], puis à l’insu de
l’utilisateur un second GET vers [Link].
 on voit que [Link] a correctement récupéré le message mis par
[Link] dans la session.

5. Création d’application avec page Maître

On crée un nouveau projet Web [Link] vide

Professeur : ASSALE Adjé Louis 40/59 INP-HB

Programmation Web [Link] avec Visual Studio

5.1. Création de la page Maître

On ajoute un élément Page Maître à notre projet :

3 fichiers ont été créés :

 [Link] est la page maître qu’on peut construire comme les pages
ASPX normales.
 [Link] contient le code C# de traitement des événements de la
page maître
 [Link] contient la déclaration des composants ASP
utilisés par la page maître

La page maître générée est la suivante (mode design)

Le code source est :

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="[Link]"

Inherits="ASPNET2.Site1" %>

<!DOCTYPE html>

<html xmlns="[Link]
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>

Professeur : ASSALE Adjé Louis 41/59 INP-HB

Programmation Web [Link] avec Visual Studio

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

 La directive Master signale qu’on a affaire à une page maître

 La balise <asp:ContentPlaceHolder> sert à délimiter un conteneur. Ce
sont les pages ASPX utilisant cette page maître qui indique quoi mettre
dans ces conteneurs. Ici, la page ASPX pourra y mettre des balises Html
compatibles avec la balise englobante <head> ou <body>

On construit la page maître en éliminant les conteneurs et en donnant un titre à

la page :

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="[Link]"

Inherits="ASPNET2.Site1" %>

<!DOCTYPE html>

<html xmlns="[Link]
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Page Maitre</title>
</head>
<body>
<form id="form1" runat="server">

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

On insère une table Html à 3 lignes et 3 colonnes à l’aide de la balise <table>, le

code source devient :
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="[Link]"
Inherits="ASPNET2.Site1" %>

<!DOCTYPE html>

<html xmlns="[Link]
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Page Maitre</title>
</head>
<body>
<form id="form1" runat="server">
<table style="width: 100%;">
<tr>
<td>
&nbsp;
</td>
<td>
&nbsp;
</td>
<td>
&nbsp;
</td>

Professeur : ASSALE Adjé Louis 42/59 INP-HB

Programmation Web [Link] avec Visual Studio

</tr>
<tr>
<td>
&nbsp;
</td>
<td>
&nbsp;
</td>
<td>
&nbsp;
</td>
</tr>
<tr>
<td>
&nbsp;
</td>
<td>
&nbsp;
</td>
<td>
&nbsp;
</td>
</tr>
</table>
</form>
</body>
</html>

On passe ensuite en mode design :

On a bien un tableau à 3 lignes et 3 colonnes. On construit à partir de là un

tableau à 3 lignes 2 colonnes comme suit :

 On supprime une colonne : clic droit sur la colonne puis /Supprimer /

supprimer les colonnes
 On fusionne les cellules de la 1ère puis de la 3ème ligne : sélection des
cellules à fusionner puis clic droit puis /Modifier / Fusionner les cellules
 On augmente la largeur de la cellule (2,1) Menu

Professeur : ASSALE Adjé Louis 43/59 INP-HB

Programmation Web [Link] avec Visual Studio

 On donne à chaque cellule, une couleur de fond pour les différencier :

propriété style catégorie Arrière-plan

Les pages ASPX esclave utilisant cette page maître s’afficheront dans la cellule
(2,2). Pour cela, il faut mettre dans cette cellule un conteneur : on sélectionne la
cellule puis /boîte à outils / Standard / ContentPlaceHolder. La page devient :

La source est :

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="[Link]"

Inherits="ASPNET2.Site1" %>

<!DOCTYPE html>

<html xmlns="[Link]
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Page Maitre</title>
<style type="text/css">
.auto-style1 {}
.auto-style2 {
font-size: xx-large;
}
.auto-style3 {
font-size: x-large;
}
.auto-style5 {
width: 324px;
height: 307px;
}
.auto-style6 {
width: 295px;
height: 307px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table style="width: 69%;">
<tr>
<td class="auto-style1" colspan="2" style="background-color: #0000FF" >
&nbsp;
&nbsp;
<span class="auto-style2" >Bandeau haut de la page maitre</span></td>

Professeur : ASSALE Adjé Louis 44/59 INP-HB

Programmation Web [Link] avec Visual Studio

</tr>
<tr>
<td class="auto-style6" style="background-color: #FFFF00">
&nbsp;<span class="auto-style3" style="background-color: #FFFF00">
Menu</span></td>
<td class="auto-style5" style="background-color: #808000">
&nbsp;
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
<tr>
<td class="auto-style1" colspan="2" style="background-color: #00FFFF">
&nbsp;
&nbsp;<span class="auto-style2" style="background-color: #00FFFF">
Bandeau bas de la page maitre</span></td>
</tr>
</table>
</form>
</body>
</html>

5.2. Création des pages Esclave

On va construire maintenant notre première page ASPX esclave qui va utiliser

notre page maître :

On fait /Projet/Nouvel élément on choisit Web Form avec page maître, on

donne un nom à la page ([Link]) et on choisit la page maître associée.

Le code source généré pour la page [Link] est :

<%@ Page Title="" Language="C#" MasterPageFile="~/[Link]" AutoEventWireup="true"

CodeBehind="[Link]" Inherits="ASPNET2.Page1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>

 L’attribut MasterPageFile indique que la page [Link] s’insère dans

la page maître [Link]. le signe ~ désigne le dossier de la page
[Link]

Professeur : ASSALE Adjé Louis 45/59 INP-HB

Programmation Web [Link] avec Visual Studio

La balise <asp:Content> sert à insérer du code ASP/Html dans un des

conteneurs de la page maître. Celui-ci est désigné par l’attribut
ContentPlaceHolderID. La valeur de cet attribut doit être l’ID d’un des
conteneurs de la page maître. Si on regarde le code de celui-ci :

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>

On note que l’ID du conteneur est bien ContentPlaceHolder1.

En mode design, la page [Link] est la suivante :

On ne peut déposer des composants que dans le conteneur

ContentPlaceHolder1.

On crée de même les pages [Link] et [Link] pour le conteneur

ContentPlaceHolder1.

5.3. Création de composant Menu

Afin de pouvoir naviguer entre nos pages [Link], [Link] et

[Link], on va ajouter un composant Menu dans la cellule (2,1) de la page
maître. Le composant Menu s’obtient par boîtes à Outils / Navigation / Menu :

Professeur : ASSALE Adjé Louis 46/59 INP-HB

Programmation Web [Link] avec Visual Studio

Ce menu peut être alimenté par une source de donnée statique ou dynamique.
On va créer une source statique pour naviguer entre les trois pages :
Dans la propriété DataSourceId du composant Menu on choisit <Nouvelle
source de données> :

On choisit le type de source de données ici plan de site

On obtient sur la page un nouveau composant de type SiteMapDataSource.

Professeur : ASSALE Adjé Louis 47/59 INP-HB

Programmation Web [Link] avec Visual Studio

Ce composant est un intermédiaire entre le menu et un fichier Xml qui liste les
options de menu. On va créer maintenant le fichier Xml qui va décrire la
structure du menu. C’est un fichier [Link]

Le fichier [Link] est un fichier Xml :

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="[Link] >
<siteMapNode url="" title="" description="">
<siteMapNode url="" title="" description="" />
<siteMapNode url="" title="" description="" />
</siteMapNode>
</siteMap>

La balise <siteMapNode> va servir à définir une option du menu. L’imbrication

des balises sera reflétée par une imbrication des options de menu. La balise
<siteMapNode> a deux attributs obligatoires :
 titre : libellé de l’option de menu
 url : url de la page vers laquelle on doit naviguer lorsque l’option est
cliquée
On modifie le fichier [Link] de la manière suivante :
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="[Link] >
<siteMapNode url="[Link]" title="Accueil" description="">
<siteMapNode url="[Link]" title="Page 1" description="" />
<siteMapNode url="[Link]" title="Page 2" description="" />
</siteMapNode>
</siteMap>

On définit ensuite la propriété StartingNodeUrl de notre composant menu avec

la page de démarrage ici [Link]

Professeur : ASSALE Adjé Louis 48/59 INP-HB

Programmation Web [Link] avec Visual Studio

Ce qui donne à l’exécution :

Le composant Menu peut être mis en forme, on dispose de plusieurs options de

mise en forme :

Professeur : ASSALE Adjé Louis 49/59 INP-HB

Programmation Web [Link] avec Visual Studio

5.4. Affinement des pages esclave

Chaque page insérée dans la page maître peut être aussi complexe que la page
étudiée au début du cours.

Ajoutons des liens de navigation dans les pages [Link] et [Link].

Pour Page 1 :

Le code source pour la page 1 est :

<%@ Page Title="" Language="C#" MasterPageFile="~/[Link]" AutoEventWireup="true"

CodeBehind="[Link]" Inherits="ASPNET2.Page1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<p class="auto-style2">
Page 1</p>
<p class="auto-style2">
<asp:Label ID="LabelMessage" runat="server" style="font-size: large"
EnableViewState="False"></asp:Label>
</p>
<p class="auto-style2">
&nbsp;<asp:LinkButton ID="LinkButton1" runat="server"
OnClick="LinkButton1_Click" style="font-size: large">Server Transfer vers Page
2</asp:LinkButton>
</p>
<p class="auto-style2">
&nbsp;</p>
<p class="auto-style2">
&nbsp;</p>
</asp:Content>

Le code de contrôle de la page est :

namespace ASPNET2
{
public partial class Page1 : [Link]
{
protected void Page_Load(object sender, EventArgs e)
{
// on recupere un eventuel message dans la session
string message = Session["message"] as string;
if (message == null)

Professeur : ASSALE Adjé Louis 50/59 INP-HB

Programmation Web [Link] avec Visual Studio

message = "";
// on l'affiche
[Link] = message;

protected void LinkButton1_Click(object sender, EventArgs e)

{
// on cree un message pour Page 2
[Link]["message"] = "Message de Page 1 pour Page 2";
// transfert vers Page 2
[Link]("[Link]",true);

}
}
}

Pour Page 2 :

Le code source correspondant est :

<%@ Page Title="" Language="C#" MasterPageFile="~/[Link]" AutoEventWireup="true"

CodeBehind="[Link]" Inherits="ASPNET2.Page2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<p class="auto-style2">
Page 2</p>
<p class="auto-style2">
<asp:Label ID="LabelMessage" runat="server" EnableViewState="False"
style="font-size: large"></asp:Label>
</p>
<p class="auto-style2">
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click"
style="font-size: large">Redirection vers Page 1</asp:LinkButton>
</p>
<p class="auto-style2">
&nbsp;</p>
</asp:Content>

Le code de contrôle est :

namespace ASPNET2
{
public partial class Page2 : [Link]
{
protected void Page_Load(object sender, EventArgs e)

Professeur : ASSALE Adjé Louis 51/59 INP-HB

Programmation Web [Link] avec Visual Studio

{
// on recupere un eventuel message dans la session
string message = [Link]["message"] as string;
if (message == null)
message = "";
// on l'affiche
[Link] = message;

protected void LinkButton1_Click(object sender, EventArgs e)

{
// on cree un message pour Page 1
Session["message"] = "Message de Page 2 pour Page 1";
// on redirige le client vers [Link]
[Link]("[Link]");

}
}
}

6. L’accès aux bases de données

Nous allons créer une application qui va accéder à une base de données.

6.1. La base de données

C’est une base de données MySql nommée ‘mabase’. Cette base de données
contient en autre les quatre tables suivantes : Classe(Code_cl, Intitulé, Effectif)
– Etudiant(Matricule, Nom Prénoms, Sexe, Code_cl#) – Livre(Code_liv, titre,
auteur, Genre, Prix) et Emprunt(Matricule#, Code_liv#, Sortie, Retour) qui
découlent du diagramme suivant :

Professeur : ASSALE Adjé Louis 52/59 INP-HB

Programmation Web [Link] avec Visual Studio

6.2. Connexion à la base de données

Définissons une application Web ASP vide :

Ajoutons une référence à la Dll de MySql :

Ajoutons une page [Link] de connexion à la base de données :

Professeur : ASSALE Adjé Louis 53/59 INP-HB

Programmation Web [Link] avec Visual Studio

En cliquant sur le bouton Connexion, il va se passer deux choses :

 Soient les informations de connexion saisies sont valides, dans ce cas on
est redirigé vers une autre page ici Gest_biblio.aspx
 Sinon un message d’erreur s’affiche pour informer que la connexion n’est
pas réussie

Le code source pour [Link] est :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="[Link]"

Inherits="ASP_MySql.Default" %>

<!DOCTYPE html>

<html xmlns="[Link]
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.auto-style1 {
font-size: xx-large;
}
.auto-style2 {
font-size: large;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>

<span class="auto-style1">GESTION DE BIBLIOTHEQUE</span><br />

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="auto-style2">&nbsp;Connexion a la base de
donnees</span><br />
<br />
Nom Utilisateur :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<asp:TextBox ID="TextBoxNom" runat="server"></asp:TextBox>
<br />
<br />
Mot de Passe :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<asp:TextBox ID="TextBoxPass" TextMode="Password"
runat="server"></asp:TextBox>
<br />
<br />
Serveur
:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&
nbsp;&nbsp;
<asp:TextBox ID="TextBoxServ" runat="server"></asp:TextBox>
<br />
<br />
Base de donnees :&nbsp;&nbsp;
<asp:TextBox ID="TextBoxBase" runat="server"></asp:TextBox>

</div>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;

Professeur : ASSALE Adjé Louis 54/59 INP-HB

Programmation Web [Link] avec Visual Studio

<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<asp:Button ID="Connexion" runat="server" Text="Connexion"
OnClick="Connexion_Click" />
<br />
<br />
<asp:Label ID="LabelMessage" runat="server"
EnableViewState="False"></asp:Label>
</form>
</body>
</html>

Le code de contrôle est :

using [Link];

namespace ASP_MySql
{
public partial class Default : [Link]
{
protected void Page_Load(object sender, EventArgs e)
{

protected void Connexion_Click(object sender, EventArgs e)

{
// message pour la page Gestion bibliotheque
Session["msg"] = [Link] + " : soit la bienvenue sur le site" as
string;
// definition de la chaine de connexion
string lachaine = "server=" + [Link] + "; database=" +
[Link] +
";uid=" + [Link] + ";pwd=" + [Link];
// connexion
try
{
MySqlConnection laconnexion = new MySqlConnection();
[Link] = lachaine;
[Link]();
Session["Password"] = [Link];
Session["Nom"] = [Link];
Session["Lachaine"] = lachaine;
[Link] = "Connexion reussie";
// on redirige le client vers la page gestion de bibliotheque
[Link]("Gest_biblio.aspx");
}
catch (Exception ex)
{
[Link] = "Connexion non reussie: " + [Link];
}

}
}
}

La page Gest_biblio.aspx se présente comme suit :

Professeur : ASSALE Adjé Louis 55/59 INP-HB

Programmation Web [Link] avec Visual Studio

Le code de chargement de la page Gest_biblio.aspx est :

namespace ASP_MySql
{
public partial class Gest_biblio : [Link]
{
protected void Page_Load(object sender, EventArgs e)
{
// on affiche le message mis dans la session par la page [Link]
[Link] = Session["msg"] as string;
}
}
}

A l’exécution de [Link] on a :

6.3. Accès aux données

En cliquant par exemple sur le lien Gestion des classes, la page Gest_clas que
voici doit s’afficher :

Professeur : ASSALE Adjé Louis 56/59 INP-HB

Programmation Web [Link] avec Visual Studio

Les codes de contrôle pour les boutons Rechercher et Ajouter sont :

public partial class Gest_clas : [Link]

{
protected void Page_Load(object sender, EventArgs e)
{
[Link] = Session["Nom"] + " : soit la bienvenue dans la gestion
des classes" as string;
}

protected void But_Rech_Click(object sender, EventArgs e)

{
if (TextBoxCode_cl.Text == "")
[Link] = "Veuillez entrer un code classe";
else
{
MySqlConnection lacon = new
MySqlConnection(Session["Lachaine"].ToString());
string larequete = "select * from classe where code_cl='" +
TextBoxCode_cl.Text + "'";
try
{
[Link]();
MySqlCommand lacomd = new MySqlCommand(larequete, lacon);
MySqlDataReader ledata = [Link]();
if ([Link]())
{
TextBoxCode_cl.Text = [Link](0);
[Link] = [Link](1);
[Link] = ledata.GetUInt32(2).ToString();
[Link] = "Donnees trouvees";
}
else
[Link] = "Donnees non trouvees";

}
catch (Exception ex)
{

Professeur : ASSALE Adjé Louis 57/59 INP-HB

Programmation Web [Link] avec Visual Studio

[Link] = " erreur : " + [Link];

}

}
}

protected void But_Ajout_Click(object sender, EventArgs e)

{
MySqlConnection lacon = new
MySqlConnection(Session["Lachaine"].ToString());
string larequete = "insert into classe values('" + TextBoxCode_cl.Text
+ "','"+ [Link] +
"',"+ [Link]([Link]) +")";
try
{
[Link]();
MySqlCommand lacomd = new MySqlCommand(larequete, lacon);
int nbre = [Link]();
[Link] = "Donnees inserees";
}
catch (Exception ex)
{
[Link] = "Donnees non inserees : " + [Link];

}
}

Affichons la page Gest_etud.aspx pour la gestion des étudiants avec les codes
classe dans une liste déroulante. La page se présente comme suit :

Voici les codes pour remplir les deux listes déroulantes lors du chargement de la
page :

protected void Page_Load(object sender, EventArgs e)

{
if (![Link])
{

Professeur : ASSALE Adjé Louis 58/59 INP-HB

Programmation Web [Link] avec Visual Studio

// on insere les sexes

[Link](new ListItem("M","M"));
[Link](new ListItem("F", "F"));

//on se connecte a la base

MySqlConnection lacon = new
MySqlConnection(Session["Lachaine"].ToString());
string larequete = "select code_cl from classe";
try
{
[Link]();
MySqlCommand lacomd = new MySqlCommand(larequete, lacon);
MySqlDataReader ledata = [Link]();
while ([Link]())
{
[Link](new ListItem([Link](0),
[Link](0)));
}

}
catch (Exception ex)
{ [Link] = "Erreur : " + [Link]; }
}
}

7. Projet

Reprendre le projet gestion de la bibliothèque en y ajoutant les fonctionnalités

que vous souhaitez.

Professeur : ASSALE Adjé Louis 59/59 INP-HB