Vous êtes sur la page 1sur 140

Université Ibno Tofail

Faculté des Sciences


Master Qualité logiciel
Cours : Internet & Multimédia

Pr. Abdelalim SADIQ


Sadiq.alim@gmail.com
Qu’est ce que .NET ?
Qu’est ce que .NET ?

• Un label marketing sur tous les nouveaux produits.

• Une plate-forme de développement unifié.

• Un environnement d’exécution sécurisé.

• Le remplaçant de l’architecture 3-tiers DNA (Distribued interNet Architecture ).

Objectifs

• Prendre une place prépondérante sur le Web avec la location de services.

• Proposer une interopérabilité entres les services Web à travers Internet.

• Pouvoir consommer l’Internet sur plusieurs types de support (PC, PDA,


téléphone).

• Être la plate-forme de référence pour la création de Services Web XML.

2010/2011 ASP.NET 2
Qu’est ce que .NET ?
Caractéristiques

• Support 27 langages de programmation.

• L’objet est prépondérant.

• Un ensemble complet de classes de base.

• Orienté pour le développement d’applications Web.

• Basé sur des standards d’Internet : XML et SOAP.

• Pas de code natif : utilisation d’un langage intermédiaire le MSIL (MicroSoft


Intermediate Language).

• L’exécution des programmes est contrôlée par la CLR (Common Language


Runtime).

• Une architecture complète : le Framework.

2010/2011 ASP.NET 3
2010/2011 ASP.NET 4
Framework .net
Le Framework

• Environnement d’exécution de .net.

• Application et mémoire « managées » par la CLR.

• Indépendant des syntaxes.

Vie d’une application .net

• Compilation des sources vers le MSIL (MicroSoft Intermediate Language).

• Compilation du code MSIL vers le code natif machine : JIT Compiler (Just In
Time), Pré JIT possible.

• Exécution du code en Binaire.

2010/2011 ASP.NET 5
Support des standards
Support des standards

• Standards issus d’organismes indépendants.

•XML (eXtended Markup Language) pour les données.

• XSD (Schema Definition Language) pour définir la grammaire et le type de


données d’un langage.

• HTTP (Hyper Text Transfert Protocol), natif dans .NET.

• SOAP (Simple Access Object Protocol), permet la communication des objets


de manière transparente pour le développeur.

• WDSL (Web Services Description Language), format XML utilisé pour décrire
les services d’un réseau.

• UDDI (Universal Description, Discovery and Integration), annuaire des Web


Services.

2010/2011 ASP.NET 6
Les langages
Les langages

• 27 langages supportés pour le moment …

• C#, VC++, VB.net, Jscript, Perl, Small Talk, Cobol, Fortan, Delphi…

• Les langages doivent répondre aux contraintes du MSIL.

• Une classe en C# peut-être utilisée dans un programme écrit en VB.net.

• 27 syntaxes différentes plutôt que 27 langages ?

Le C#

• A mi-chemin entre C++ et Java.

• Réponse de Microsoft à Java : syntaxe et fonctionnalités similaires.

• Bénéficie du Framework.net et sa CLR.

2010/2011 ASP.NET 7
ASP . NET
Qu’est ce qu’ASP.net ?

• Version .NET d’ASP. : utilisé pour la création de site Web dynamique

• 3 types de pages : ASPx, ASMx (assembly) pour les Web services, ASCx
(control) pour les contrôles utilisateurs.

• ASP.net fait partie intégrante du FrameWork et bénéficie de toutes ses


fonctionnalités (classes de base).

• Les Pages ASP.net sont compilés et exécuté par la CLR : code managé,
possibilité de « tracing » et de « debugging ».

• Le code peut-être séparé totalement de la partie présentation.

• Apparition des contrôles serveurs.

• Comparable à J2EE + RMI

• S’appuie toujours sur IIS 5, mais multi-processus au lieu de multi-thread.

2010/2011 ASP.NET 8
ASP . NET
Les contrôles serveurs

• 45 contrôles disponibles (Listbox, treeview, calendar, adrotator, …)

• Exécutés sur le serveur.

• Renvoie du code HMTL au client en fonction du navigateur utilisé


(compatible HMTL 3.2).

• Masque au développeur la communication client / serveur.

• Peut agir sans rechargement de la page.

• Chaque contrôle est une classe du Framework.

2010/2011 ASP.NET 9
Asp.net
<%@ Page Language="c#" %>
<HTML> <BODY>
<H1>Table des factorielles</H1>
<%
int i,fact;
for ( i=1,fact=1 ; i<4 ; i++, fact*=i ) {
Response.Write( i + "! =" + fact + "<BR>" );
}
%>
</BODY> </HTML

invocation

exécution
côté serveur

2010/2011 ASP.NET 10
Asp.net
<%@ Page Language="c#" %>
<HTML> <BODY>
du code C#
<H1>Table des factorielles</H1>
<%
int i,fact;
for ( i=1,fact=1 ; i<4 ; i++, fact*=i ) {
Response.Write( i + "! =" + fact + "<BR>" ); résultat = HTML
} généré via l'objet
%> prédéfini Response
</BODY> </HTML

ce qui est <HTML> <BODY>


renvoyé <H1>Table des factorielles</H1>
au client 1! = 1<BR>
2! = 2<BR>
3! = 6<BR>
</BODY> </HTML>

2010/2011 ASP.NET 11
Asp.net
Philosophie ASP.NET

• Séparer
 rendu graphique
 traitement

• 2 fichiers
 .aspx
• le code de présentation et celui des contrôles
• fichier XTHML (HTML 4.0 formulé en XML)
• Web form
 .aspx.cs , .aspx.vb , …
• fichier dit codebehind
• classe contenant les traitements

2010/2011 ASP.NET 12
Contrôles
Les contrôles
Composants graphiques pour l’écriture de pages ASP.NET
• Pour agir avec l'utilisateur : lui présenter de l'information
• Pour réagir aux actions de l'utilisateur : déclencher des traitements
• Utilisation en drag-and-drop dans VS pour la conception page web
 Analogue atelier conception IHM en client lourd

Classe / Objet

• Propriétés : les caractéristiques d'affichage (ex. Text pour un TextBox)


• Événements : réactions (clic, frappe, changement, …)

autant d'objets par page que de contrôles "déposés" sur la page


• interaction avec la page ≡ interaction avec les objets
• rendu HTML de la page à partir de l'état des objets

2010/2011 ASP.NET 13
TP1

CRÉER UN PREMIER
FORMULAIRE DYNAMIQUE

2010/2011 ASP.NET 14
TP1 : Créer un premier formulaire dynamique
Objectif

 Construire une page aspx à partir d’un formulaire HTML standard et de mettre en
évidence le principe du post back (aller retour ) avec ASP.NET 2.0.

Contexte fonctionnel

 construire un formulaire de recherche des petites annonces à partir de deux


critères : la région de publication (une liste déroulante) et la date (une zone de
texte).

 Dans un premier temps le résultat de la recherche consiste en l’affichage d’un


texte résumant les critères choisis.

 Dans un deuxième temps construire un tableau html avec plusieurs annonces


issues de la recherche

2010/2011 ASP.NET 15
TP1 : étape 1
Partir d‟une page html standard
1. Créez un répertoire sur le disque pour stocker la solution que vous allez
développer.
2. Ouvrez Microsoft Visual Studio et enregistrez le nouveau document vide
sous le nom Default.aspx dans votre répertoire de projet.
3. Saisissez le contenu statique de la page suivante:

<html>
<head>
<title>Page de recherche</title>
<link href="Default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="recherche">
<div class="region">
<h3>Région: </h3>
</div>
<div class="date">
<h3>Date: </h3>
</div>
</div>
<div class="resultat">
Résultat de la recherche...
</div>
</body>
</html>

2010/2011 ASP.NET 16
TP1 : étape2
rendre la page un formulaire interactif
 Ajoutez une balise <form> à la page

 La balise <form> délimite la zone dynamique proprement dite du formulaire,

 Elle contient les zones de saisie de l’utilisateur dont les données devront être
envoyées sur le serveur.

 Elle possède des attributs obligatoires :


 method pour indiquer de quelle manière sont envoyées les données sur le
serveur : soit codées dans l’url de la requête pour la méthode « GET » soit
stockées dans le corps de la requête pour la méthode « POST ».

Par défaut, une page aspx utilise la méthode POST.

 action pour indiquer l’url à laquelle sont envoyées les informations. Il faut savoir
qu’une page aspx poste ses données sur elle-même c’est-à-dire que l’url d’envoi
est celle de la page elle-même tout simplement !

2010/2011 ASP.NET 17
TP1 : étape 1
rendre la page un formulaire interactif

<html>
<head>
<title>Page de recherche</title>
</head>
<body>
<form method="post" action="Default.aspx">
<div class="recherche">

</div>
<div class="resultat">

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

2010/2011 ASP.NET 18
TP1 : étape3
rendre la page un formulaire interactif
 Ajoutez maintenant les contrôles de sélection/saisie et un bouton de soumission

Contrôle de sélection
<div class="region"> Contrôle de saisie et bouton de
<h3>Région: </h3> soumission
<SELECT name="ddlRegion">
<OPTION VALUE="1"> Rabat </OPTION> <div class="date">
<OPTION VALUE="2"> Casa </OPTION> <h3>Date: </h3>
<OPTION VALUE="3"> Kenitra </OPTION> <input name="txtDate” type="text"/>
<OPTION VALUE="4"> Sale </OPTION> <input name="btnGo” type="submit”
<OPTION VALUE="5"> Ouajda </OPTION> value="Go" />
<OPTION VALUE="6"> Fés </OPTION> </div>
<OPTION VALUE="7"> Meknes </OPTION>
<OPTION VALUE="8"> Nadour </OPTION>
<OPTION VALUE="9"> Tetouane </OPTION>
<OPTION VALUE="10"> Errachidia </OPTION>
<OPTION VALUE="11"> Ouarzazate </OPTION>
<OPTION VALUE="12"> Zagoura </OPTION>
<OPTION VALUE="13"> Essaouira </OPTION>
<OPTION VALUE="14"> Safé </OPTION>
<OPTION VALUE="15"> Agadir </OPTION>
<OPTION VALUE="16"> Marrakeche </OPTION>
<OPTION VALUE="17"> Taroudante </OPTION>
<OPTION VALUE="18"> Tantan </OPTION>
<OPTION VALUE="19"> Tata </OPTION>
<OPTION VALUE="20"> Laayoune </OPTION>
</SELECT>
</div>
2010/2011 ASP.NET 19
TP1 : étape4
ajouter un traitement à la page
 Ajouter un traitement à la page qui sera pris en charge côté serveur par
ASP.NET 2.0.
 La page est postée sur elle-même, donc ce traitement est directement
programmé dans la page elle-même
 Le mécanisme le plus simple est d’inclure les instructions de la page qui doivent
être exécutées sur le serveur à l’intérieur d’une balise server <% %>
 ASP.NET repère le code de traitement server à exécuter via cette balise.

 Nous allons simplifier le traitement de recherche des annonces et nous contenter


d’afficher dans la zone de résultat délimitée par la balise <div class=resultat>

 ASP.NET 2.0 propose de coder avec un langage compilé, C# ou VB.Net entre


autres, en utilisant un modèle de « contrôles » avec des propriétés, des
méthodes et des évènements pour manipuler les différents éléments html de la
page.

2010/2011 ASP.NET 20
TP1 : étape4
ajouter un traitement à la page
 Ajoutez l’attribut runat avec la valeur server aux éléments html <SELECT>,
<INPUT> de type « text » et à la balise <DIV> de résultat et donnez-leur à chacun
un identifiant unique (via l’attribut id).

 Ajoutez également runat="server" sur le formulaire délimité par <FORM>.

<form method="post" action="Default.aspx">


<form method="post" action="Default.aspx" runat="server">

<SELECT name="ddlRegion">
<SELECT name="ddlRegion" runat="server" id="ddlRegion">

<input name="txtDate” type="text"/>


<input name="txtDate" type="text" runat="server" id="txtDate"/>

<div class="resultat">
<div class="resultat" runat="server" id="resultat">

2010/2011 ASP.NET 21
TP1 : étape4
ajouter un traitement à la page
 L’attribut runat="server" est fondamental car il indique au moteur ASP.NET qui traite
la requête sur le serveur que les balises HTML vont pouvoir être considérées comme
des contrôles accessibles par programmation via leur id unique.

 Lorsque le server démarre le traitement de la page, un objet Page est chargé en


mémoire et réalise une succession d’étapes dont la toute première est de créer une
instance de tous les contrôles marqués avec runat="server". Ces instances
s’appuient sur des classes définies dans le Framework 2.0.

 Pour chaque balise html marquée, on obtient donc un objet :


 basé sur une classe du Framework,

 ayant une représentation graphique,

 doté de propriétés qui le caractérisent et le définissent,

 doté de méthodes qui permettent de jouer sur son comportement,

 et doté d’évènements qui sont déclenchés en général par des actions de l’utilisateur sur le
contrôle

2010/2011 ASP.NET 22
TP1 : étape4
ajouter un traitement à la page
 Un contrôle <INPUT> de type « submit » tel que le bouton Go, est chargé en mémoire
par ASP.NET sur la base d’une classe nommée HtmlButton.

 Cet objet est alors accessible par programmation et comprend entre autres :
 une représentation graphique qui est celle d’une balise INPUT de type « submit »,

 une propriété InnerText qui permet d’inscrire un texte sur le bouton,

 une méthode Focus(), qui permet de positionner le focus sur le contrôle,

 un évènement ServerClick qui est déclenché lorsque l’utilisateur clique sur le bouton.

 Le formulaire doit être également runat="server" et est alors vu comme un contrôle de


type HtmlForm

 Avant de programmer le traitement serveur, il reste à indiquer le langage de choix dans


ce qu’on appelle une « directive » de page. Celle-ci est écrite au tout début de la page
et est lue côté serveur par ASP.NET.

 Dans le cas présent, nous allons indiquer au serveur le langage de votre choix, en
utilisant l’attribut Language :

2010/2011 ASP.NET 23
TP1 : étape4
ajouter un traitement à la page
 Indiquer le langage de votre choix

 Code VB.NET
<%@ Page Language="VB" %>
<html>

</html>

 Code C#
<%@ Page Language="C#" %>
<html>

</html>

2010/2011 ASP.NET 24
TP1 : étape4
ajouter un traitement à la page
 Puisque vous avez accès aux éléments <SELECT>, <INPUT> et <DIV> via
les contrôles server chargés en mémoire par ASP.NET 2.0, il ne vous reste
plus qu’à programmer la lecture de la date dans la zone de texte et l’écriture
du texte final dans la zone de résultat

Code VB.NET

<%
If Not txtDate.Value = "" Then
resultat.InnerHtml = "Résultat de la recherche pour le " & txtDate.Value
End If
%>

Code C#
<%
if (txtDate.Value != "")
{
resultat.InnerHtml = "Résultat de la recherche pour le " + txtDate.Value;
}
%>

2010/2011 ASP.NET 25
TP1 : étape4
ajouter un traitement à la page
 Ces lignes d’instruction utilisent :
 la propriété Value du contrôle txtDate de type HtmlInputText pour lire
la valeur de la date saisie dans la zone de texte et envoyée au serveur
lors d’un post back.

 la propriété InnerHtml pour modifier le contenu html du contrôle


resultat de type HtmlGenericControl qui représente la balise <DIV>
d’id résultat.

2010/2011 ASP.NET 26
TP1 : étape4
ajouter un traitement à la page
 Autre exemple de traitement serveur : on pourrait par exemple écrire
dans la zone de texte pour l’initialiser au chargement de la page avec
la date du jour.

Code VB.NET
<%
txtDate.Value = DateTime.Now.ToShortDateString()
%>
Code C#
<%
txtDate.Value = DateTime.Now.ToShortDateString() ;
%>

 La propriété DateTime.Now du Framework 2.0 donne la date du jour


que l’on formate avec ToShortDateString().

2010/2011 ASP.NET 27
TP1 : étape4
ajouter un traitement à la page
 Ajoutez à la page, en suivant la même logique, la lecture de la sélection dans
la liste déroulante de façon à compléter le texte de résultat comme ceci :
Code VB.NET
<%
If Not txtDate.Value = "" Then
resultat.InnerHtml = "Résultat de la recherche des annonces dans la région " _
& ddlRegion.Items(ddlRegion.SelectedIndex).Text & " pour le " + txtDate.Value
End If
%>

Code C#
<%
if (txtDate.Value != "")
{
resultat.InnerHtml = "Résultat de la recherche des annonces dans la région "
+ ddlRegion.Items[ddlRegion.SelectedIndex].Text + " pour le " + txtDate.Value;
}
%>

 ddlRegion est un contrôle de type HtmlSelect et contient une collection d’options appelée Items.
Chacune des options est accessible via un index, l’élément sélectionné en cours étant positionné à
l’index donné par la propriété SelectedIndex du contrôle.

2010/2011 ASP.NET 28
TP1 : étape 5
Utiliser les contrôles Html Serveur
 Tous les contrôles Html standards sont représentés dans le Framework 2.0
par des classes du type HtmlForm, HtmlInputText, HtmlInputButton, ou
plus générique comme HtmlGenericControl .

 Ces classes nous permettent d’avoir accès aux éléments Html très facilement
dans un traitement côté serveur. La seule condition pour les utiliser est de
donner un id à vos balises et de les configurer avec runat="server".

2010/2011 ASP.NET 29
TP1 : étape 5
Utiliser les contrôles Html Serveur
 On va construire un tableau html avec plusieurs annonces issues de la
recherche. Toujours avec cette même approche de contrôles serveur, cette
opération peut se faire très simplement grâce à la classe HtmlTable qui
représente le tableau html standard et qui contient des éléments de type
HtmlTableRow (ligne) eux-mêmes constitués de HtmlTableCell (cellule).

 Ajoutez un tableau vide dans la zone de résultat de la page à la place du


texte initial

<form method="post" action="Default.aspx" runat="server"> Ne pas oublier l’attribut runat



<div class="resultat" runat="server" id="resultat">
<table id="tblResultat" class="gridcontent" runat="server">
</table>
</div> Format défini dans la feuille de style
</form>

2010/2011 ASP.NET 30
TP1 : étape 5
Utiliser les contrôles Html Serveur
 Mettez en commentaire le code de l’étape précédent dans la balise <%%>.
 Ajoutez le code suivant affichant une seule annonce (codée en dur pour simplifier) dans
le tableau de résultat lorsque la région sélectionnée est Kenitra (indexe = 2)
<%
„..‟
If ddlRegion.SelectedIndex = 2 Then

' Créer une nouvelle ligne de tableau


Dim ligne As HtmlTableRow = New HtmlTableRow()
' Créer une nouvelle cellule de tableau pour afficher l‟email
Dim celluleEmail As HtmlTableCell = New HtmlTableCell()
' Afficher dans la cellule un texte littéral en utilisant le control LiteralControl
celluleEmail.Controls.Add(New LiteralControl("gege@hotmail.fr"))
'Ajouter la cellule à la collection de cellules de la ligne
ligne.Cells.Add(celluleEmail)
'Recommencer pour afficher la ville et le code postal de l‟annonce
Dim celluleVille As HtmlTableCell = New HtmlTableCell()
celluleVille.Controls.Add(New LiteralControl("Paris"))
ligne.Cells.Add(celluleVille)
Dim celluleCodePostal As HtmlTableCell = New HtmlTableCell()
celluleCodePostal.Controls.Add(New LiteralControl("75000"))
ligne.Cells.Add(celluleCodePostal)
'Ajouter la ligne à la collection de lignes du tableau
tblResultat.Rows.Add(ligne)
End If
2010/2011 %> ASP.NET 31
TP1 : étape 5
Utiliser les contrôles Html Serveur
Code C#
<%
/*…*/
if (ddlRegion.SelectedIndex == 2)
{
// Créer une nouvelle ligne de tableau
HtmlTableRow ligne = new HtmlTableRow();
// Créer une nouvelle cellule de tableau pour afficher l‟email
HtmlTableCell celluleEmail = new HtmlTableCell();
// Afficher dans la cellule un texte littéral en utilisant le control LiteralControl
celluleEmail.Controls.Add(new LiteralControl(“MASTER@hotmail.fr"));
//Ajouter la cellule à la collection de cellules de la ligne
ligne.Cells.Add(celluleEmail);
//Recommencer pour afficher la ville et le code postal de l‟annonce
HtmlTableCell celluleVille = new HtmlTableCell();
celluleVille.Controls.Add(new LiteralControl(“KENITRA"));
ligne.Cells.Add(celluleVille);
HtmlTableCell celluleCodePostal = new HtmlTableCell();
celluleCodePostal.Controls.Add(new LiteralControl("75000"));
ligne.Cells.Add(celluleCodePostal);
//Ajouter la ligne à la collection de lignes du tableau
tblResultat.Rows.Add(ligne);
}
%>

2010/2011 ASP.NET 32
TP2

COMPRENDRE LA
PROBLÉMATIQUE DE
GESTION D‟ÉTAT
2010/2011 ASP.NET 33
TP 2 : Comprendre la problématique de
gestion d‟état
Objectif

 Mettre en évidence la problématique de gestion d’état dans une application


web.
Contexte fonctionnel

 Le contexte fonctionnel reste identique à l’exercice

précédent à ceci près que vous allez maintenant charger

la liste déroulante de manière dynamique à partir du fichier

texte régions.txt.

2010/2011 ASP.NET 34
TP2 : Comprendre la problématique de
gestion d‟état
 Dans le TP1, le code est inscrit à l’intérieur d’une balise <% %>, et est évalué avec
l’exécution de la page. Cette écriture est limitée en ASP.NET 2.0 dans la mesure où
vous ne pouvez pas déclarer dans un tel bloc une fonction ou toute autre instruction
qu’un code de rendu.

 Nous allons maintenant remplacer la balise <% %> par une balise de script <script>
munie du fameux attribut runat="server" pour indiquer au serveur que ce code doit
être exécuté côté serveur.

 Dans ce bloc de déclaration de code, les lignes vont être compilées avec une approche
orientée objet c’est-à-dire dans le contexte d’une classe générée dynamiquement par
ASP.NET et associée à la page web, c’est la classe page.

 Aussi nous allons incorporer les lignes de code dans la procédure de réponse à
l’évènement de chargement de la page en mémoire, appelé Page_Load

2010/2011 ASP.NET 35
TP 2 :
Utiliser la balise script
 Remplacez la balise <% %> par une balise <script> et ajoutez la
procédure Page_Load autour de code
 Insérer le code après la balise </head>

Code VB.NET
<script runat="server" >
Protected Sub Page_Load()
If ddlRegion.SelectedIndex = 2 Then

End If
End Sub
</script>
Code C#
<script runat="server" >
public void Page_Load()
{
if (ddlRegion.SelectedIndex == 2) {…}
}
</script>

2010/2011 ASP.NET 36
Tp2 :
lecture de la liste déroulante
 Programmez le chargement dynamique de la liste déroulante :
 Commencez par supprimer les options de l’élément SELECT
<SELECT name="ddlRegion" runat="server" id="ddlRegion">
</SELECT>
 Ajoutez le code de lecture du fichier texte et de chargement de la liste déroulante
Code VB.NET
<script runat="server" >
Protected Sub Page_Load()
Using sr As System.IO.StreamReader = _
System.IO.File.OpenText("C:\Votre chemin de projet\Liste des régions.txt")
Dim s As String = ""
Dim index As Integer = 0
s = sr.ReadLine()
Do Until s = ""
ddlRegion.Items.Add(New ListItem(s, index.ToString()))
index += 1
s = sr.ReadLine()

End Using
If ddlRegion.SelectedIndex = 2 Then

End If
End Sub
</script>
2010/2011 ASP.NET 37
Tp2 :
lecture de la liste déroulante
Code C#

<script runat="server" >


public void Page_Load()
{
using (System.IO.StreamReader sr = System.IO.File.OpenText(@"C:\chemin\régions.txt"))
{
string s = "";
int index = 0;
while ((s = sr.ReadLine()) != null)
{
ddlRegion.Items.Add(new ListItem(s, index.ToString()));
index++;
}
}
if (ddlRegion.SelectedIndex == 2) {…}
}
</script>

2010/2011 ASP.NET 38
Tp2 :
lecture de la liste déroulante
 On utilise l’espace de nom System.IO du Framework 2.0 qui fournit des
classes pour lire et écrire dans des fichiers, telle que StreamReader.

 Une liste déroulante de type HtmlSelect contient une collection d’éléments


de type ListItem, appelée Items.

 Il suffit d’utiliser la méthode Add pour insérer un nouveau élément en


indiquant le texte (lu dans le fichier et donné par s) et la valeur (incrémentale
donnée par index) de l’option.

2010/2011 ASP.NET 39
Tp2 :
garder l‟état de la liste
 Nous voyons que la liste s’incrémente une nouvelle fois avec les régions !!
Pourquoi?
 ASP.NET s’occupe pour préserver l’état des informations des contrôles de la page
entre deux aller-retour sur le serveur par la technique dite du View State

 View State consiste en un champ caché appelé __VIEWSTATE qu’ASP.NET


insère dans la page et utilise pour écrire et lire les informations à préserver

 Ce champ est transporté entre le navigateur et le serveur web d’un post back à
l’autre

 Vérifier ce champ dans la source de la page html

2010/2011 ASP.NET 40
Tp2 :
garder l‟état de la liste
 lorsque la page est postée sur le serveur en cliquant sur Go :
 les informations contenues dans les contrôles sont écrites dans le champ caché
__VIEWSTATE,
 Le serveur ASP.NET construit une nouvelle instance de la classe Page
 Le serveur instancie les contrôles marqués avec l’attribut runat=server et les
initialise avec l’état lu dans le View State.
 La liste déroulante inscrit son contenu dans le champ caché, le serveur charge
en mémoire un contrôle de type HtmlSelect avec toutes les régions écrites au
premier chargement de la page.
 Le serveur réalise les traitements demandés, tel que le chargement de la liste et
écrit donc une deuxième fois les régions dans le contrôle HtmlSelect
 Une fois le traitement terminé, le serveur écrit dans le View State l’état des
contrôles résultant et demande à chacun d‘eux leur représentation html standard
de façon à construire la page de réponse à renvoyer au navigateur
 Désactivons maintenant l’utilisation du View State par ajouter :

<SELECT name="ddlRegion" runat="server" id="ddlRegion" enableviewstate="false">


</SELECT>
La page de réponse affiche toujours la première région de la liste

2010/2011 ASP.NET 41
Tp2 :
garder l‟état de la liste
 Nous avons besoin de « sauvegarder l’état de la liste » au moment du post
back de façon à retrouver la même sélection

 Pour éviter le chargement intempestif de la liste lors d’un post back et


préserve l’état des contrôles, ASP.NET sait vous indiquer si vous êtes au
premier chargement de la page ou pas. Pour cela il fournit la propriété
IsPostBack sur la classe Page qui a la valeur FAUX au premier chargement
de la page et la valeur VRAI ensuite à chaque aller retour.

 Repositionnez l’attribut enableViewState avec la valeur true de l’élément


<Select>

2010/2011 ASP.NET 42
Tp2 :
garder l‟état de la liste
 Rajoutez le test du post back dans la procédure Page_Load de façon à ne
charger la liste qu’une seule fois au premier chargement de la page
Code VB.NET
<script runat="server" >
Protected Sub Page_Load()
If Not Page.IsPostBack Then
Using sr As System.IO.StreamReader = _
System.IO.File.OpenText("C:\Votre chemin de projet\Liste des régions.txt")
Dim s As String = ""
Dim index As Integer = 0
s = sr.ReadLine()
Do Until s = ""
ddlRegion.Items.Add(New ListItem(s, index.ToString()))
index += 1
s = sr.ReadLine()

End Using
End If
If ddlRegion.SelectedIndex = 2 Then

End If
End Sub
</script>
2010/2011 ASP.NET 43
Tp2 :
garder l‟état de la liste
Code C#
<script runat="server" >
public void Page_Load()
{
If ( !Page.IsPostBack) {
using (System.IO.StreamReader sr = System.IO.File.OpenText(@"C:\Votre chemin
de projet\Liste des régions.txt"))
{
string s = "";
int index = 0;
while ((s = sr.ReadLine()) != null)
{
ddlRegion.Items.Add(new ListItem(s, index.ToString()));
index++;
}
}
}
if (ddlRegion.SelectedIndex == 2) {…}
}
</script>

2010/2011 ASP.NET 44
TP3

UTILISER LE MODÈLE
ÉVÈNEMENTIEL

2010/2011 ASP.NET 45
TP 3 :
Utiliser le modèle évènementiel
Objectif
 Comprendre l’approche évènementielle de la programmation avec ASP.NET 2.0.
Contexte fonctionnel

 Le contexte fonctionnel reste identique à l’exercice précédent à ceci près qu’au lieu de
construire un tableau de résultat de la recherche sur la procédure Page_Load comme
précédemment, nous allons associer le traitement directement à l’évènement clic de
l’utilisateur sur le bouton Go.
 Nous verrons finalement comment associer le traitement à l’évènement de
changement de sélection dans la liste déroulante.
Principe
 L’idée est de fournir un modèle de développement similaire à celui dont vous disposez
dans du script client pour programmer des procédures en réponse à des évènements
dans la page. La différence est que si l’évènement est bien déclenché côté client le
traitement en réponse à celui-ci est en revanche effectué sur le serveur : ce procédé
est évidemment plus lourd
 Les évènements sont associés à des contrôles, mais également à la page elle-même

2010/2011 ASP.NET 46
TP 3 :
Traiter des évènements
 Branchez l’évènement de clic sur le contrôle html du bouton Go :
 Modifiez la déclaration du contrôle en ajoutant l’attribut onserverclick et en
lui donnant le nom de la procédure de réponse à l’évènement, par exemple
btnGo_ServerClick:


<input name="btnGo" type="submit" value="Go" onserverclick="btnGo_ServerClick" runat="server" />

 Liez l’évènement ServerClick à la procédure de réponse appelée


btnGo_ServerClick.  Ajoutez la procédure btnGo_ServerClick à
l’intérieur de la balise de script

2010/2011 ASP.NET 47
TP 3 :
Utiliser le modèle évènementiel
Protected Sub Page_Load()
If Not Page.IsPostBack Then
Using sr As System.IO.StreamReader = _
System.IO.File.OpenText("C:\Labs PHP-ASP\VB\Lab 1\Solution\Liste des
régions.txt")
Dim s As String = ""
Dim index As Integer = 0
s = sr.ReadLine()
Do Until s = ""
ddlRegion.Items.Add(New ListItem(s, index.ToString()))
index += 1
s = sr.ReadLine()

End Using
End If
End Sub
Protected Sub butGo_ServerClick(ByVal sender As Object, ByVal e As
System.EventArgs)
If ddlRegion.SelectedIndex = 2 Then
..
End If
End Sub
</script>
2010/2011 ASP.NET 48
TP 3 :
Utiliser le modèle évènementiel
public void Page_Load()
{
If ( !Page.IsPostBack) {
using (System.IO.StreamReader sr = System.IO.File.OpenText(@"C:\chemin\régions.txt"))
{
string s = "";
int index = 0;
while ((s = sr.ReadLine()) != null)
{
ddlRegion.Items.Add(new ListItem(s, index.ToString()));
index++;
}
}
}
}
protected void btnGo_ServerClick(object sender, EventArgs e)
{
if (ddlRegion.SelectedIndex == 2)
{
….
}
}
</script>
2010/2011 ASP.NET 49
TP 3 :
Utiliser le modèle évènementiel
 Vous constatez que la procédure de réponse à un évènement doit respecter
un certain formalisme.

 Elle contient deux arguments, l’un de type EventArgs donnant des


informations spécifiques à l’évènement, et l’autre de type object indiquant
l’objet déclencheur de l’évènement.

 Ce type de signature est commun aux évènements sauf à ceux associés au


cycle de vie de la page web, tel que l’évènement Load, qui n’ont pas
d’arguments.

2010/2011 ASP.NET 50
TP 3 :
Utiliser le modèle évènementiel
 Branchez l’évènement de changement de la sélection sur le contrôle html
ddlRegion :
 Modifiez la déclaration du contrôle en ajoutant l’attribut onserverchange et en lui
donnant le nom de la procédure de réponse à l’évènement, par exemple
ddlRegion_ServerChange

<SELECT name="ddlRegion" runat="server" id="ddlRegion" enableviewstate="true"
onserverchange="ddlRegion_ServerChange"></SELECT>

 Créez la procédure ddlRegion_ServerChange de traitement de
l’évènement côté serveur :
 Ajoutez la procédure à l’intérieur de la balise de script et transférez-y le code de
création du tableau de résultat précédemment placé dans la procédure
btnGo_ServerClick

2010/2011 ASP.NET 51
TP 3 :
Utiliser le modèle évènementiel
Code VB.NET
<script runat="server" >
Protected Sub Page_Load()

End Sub
Protected Sub butGo_ServerClick(ByVal sender As Object, ByVal e As System.EventArgs)
End Sub
Protected Sub ddlRegion_ServerChange(ByVal sender As Object, ByVal e As
System.EventArgs)
If ddlRegion.SelectedIndex = 2 Then

End If
End Sub
</script>

2010/2011 ASP.NET 52
TP 3 :
Utiliser le modèle évènementiel
Code C#
public void Page_Load() {…}
protected void btnGo_ServerClick(object sender, EventArgs e) { }

protected void ddlRegion_ServerChange(object sender, EventArgs e)


{
if (ddlRegion.SelectedIndex == 2)
{
....
}
}
</script>

2010/2011 ASP.NET 53
TP4

COMPRENDRE L‟APPROCHE
COMPOSANT

2010/2011 ASP.NET 54
TP 4 :
Comprendre l‟approche composant
Objectif

 Mettre en œuvre les contrôles serveur d’ASP.NET 2.0 et de comprendre


l’intérêt de l’approche basée sur l’utilisation de ces composants.

Contexte fonctionnel
 Si vous voulez ajouter un calendrier à la page pour faciliter la saisie de la
date par l’utilisateur. Le calendrier est invisible au chargement de la page et
apparaît si l’utilisateur le sollicite par un bouton . Grâce au calendrier
l’utilisateur peut rapidement sélectionner une date et la zone de texte est
automatiquement chargée avec celle-ci.

2010/2011 ASP.NET 55
TP 4 :
Comprendre l‟approche composant
Principe
o
 Avec l’approche composant, ASP.NET permet le contrôle côté serveur du
comportement de certains éléments lors d’un post pack, mais cette fois en
construisant directement vos pages côté serveur avec des contrôles élaborés.
 Ces contrôles sont représentés par des balises qui ne sont connues que du moteur
ASP.NET. Donc pour la plupart, ils sont associés à une représentation graphique
basée sur des contrôles html standard, qu’ASP.NET construit dynamiquement à la fin
de l’exécution de la page juste avant de renvoyer la page de réponse au navigateur.
 Chaque contrôle est d’ailleurs capable d’adapter son rendu en fonction du navigateur
cible.
 Certains contrôles n’ont même pas de représentation graphique. L’objectif est de
fournir un ensemble de composants qui encapsulent tout un comportement dynamique
que le développeur peut facilement contrôler via des propriétés, des méthodes et des
évènements.
 Par exemple, vous avez des contrôles pour vous aider à configurer une connexion sur
une base de données

2010/2011 ASP.NET 56
TP 4 :
Ajouter composant calendrier
 Ajoutez un contrôle serveur web de type Calendar à la page :
 Ajoutez une balise <div> de classe date à la suite dans la zone de recherche
<div class="recherche">
<div class="region">…</div>
<div class="date">…</div>
<div class="date">
</div>
</div>
 Ajoutez un contrôle <asp:Calendar> suivi d’un saut de ligne (br):
<div class="date">
<asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
<br />
</div>
 La balise préfixée par « asp: » n’est pas connue des navigateurs, c’est pourquoi le flux
de la page, tel qu’il est visible dans votre éditeur, n’est qu’un flux « intermédiaire ». Il
vous sert à dynamiser la page en exploitant le côté serveur mais n’est pas transmis tel
quel dans la réponse au navigateur.

2010/2011 ASP.NET 57
TP 4 :
Exploitons les capacités du contrôle
 Configurez les propriétés de style pour améliorer le format du
contrôle
<div class="date">
<asp:Calendar ID="Calendar1" runat="server"
BackColor="White" BorderColor="#3366CC" BorderWidth="1px"
CellPadding="1" DayNameFormat="Shortest"
Font-Names="Verdana" Font-Size="8pt" ForeColor="#003399"
Height="200px" Width="220px" >
<SelectedDayStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
<TodayDayStyle BackColor="#99CCCC" ForeColor="White" />
<SelectorStyle BackColor="#99CCCC" ForeColor="#336666" />
<WeekendDayStyle BackColor="#CCCCFF" />
<OtherMonthDayStyle ForeColor="#999999" />
<NextPrevStyle Font-Size="8pt" ForeColor="#CCCCFF" />
<DayHeaderStyle BackColor="#99CCCC" ForeColor="#336666" Height="1px" />
<TitleStyle BackColor="#003399" BorderColor="#3366CC"
BorderWidth="1px" Font-Bold="True"
Font-Size="10pt" ForeColor="#CCCCFF" Height="25px" />
</asp:Calendar>
<br />
</div>

2010/2011 ASP.NET 58
TP 4 :
Chargement automatique de la date
 Un contrôle serveur ASP.NET contient toute une batterie de propriétés qui permettent de
contrôler non seulement son style mais également son comportement.
 Modifiez la déclaration du contrôle en ajoutant l’attribut OnSectionChanged et en lui donnant le
nom de la procédure de réponse à l’évènement, par exemple Calendar1_SelectionChanged:

<asp:Calendar ID="Calendar1" runat="server"


OnSelectionChanged="Calendar1_SelectionChanged“ >
</asp:Calendar>
 Ajoutez la procédure Calendar1_SelectionChanged à l’intérieur de la balise de script
:
Code VB.NET
<script runat="server" >
Protected Sub Calendar1_SelectionChanged(ByVal sender As Object,_ByVal e As System.EventArgs)
End Sub
</script>
Code C#
<script runat="server" >
protected void Calendar1_SelectionChanged(object sender, EventArgs e) {}
</script>

2010/2011 ASP.NET 59
TP 4 :
Chargement automatique de la date
 Le chargement de la zone de texte avec la date sélectionnée est fournie par le
contrôle grâce à sa propriété SelectedDate :

Code VB.NET
<script runat="server" >
Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs)
txtDate.Value = Calendar1.SelectedDate.ToShortDateString()
End Sub
</script>

Code C#
<script runat="server" >
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
txtDate.Value = Calendar1.SelectedDate.ToShortDateString();
}
</script>
 La propriété SelectedDate retourne un objet de type DateTime .
 la méthode ToShortDateString() de la classe DateTime permet de récupérer la
date sous forme de chaîne de caractères.

2010/2011 ASP.NET 60
TP 4 :
Combiner plusieurs contrôles
 Pour afficher/cacher le calendrier en fonction des besoins de l’utilisateur.
Nous utilisons le contrôle serveur <asp:Button>
 Ajoutez un contrôle serveur web de type Button à la page

<div class="date">
<h3>Date: </h3>
<input name="txtDate" type="text" runat="server" id="txtDate" />
<asp:Button ID="Button1" runat="server" Text=“..." />
<input name="btnGo" type="submit" value="Go" runat="server" onserverclick="btnGo_ServerClick"/>
</div>

 Ajoutez l’évènement click sur le bouton


 Modifiez la déclaration du contrôle en ajoutant l’attribut OnClick et en lui donnant
le nom de la procédure de réponse à l’évènement, par exemple Button1_Click

<asp:Button ID="Button1" runat="server" Text=“Calendrier" OnClick="Button1_Click" />

2010/2011 ASP.NET 61
TP 4 :
Combiner plusieurs contrôles
 Ajoutez la procédure Button1_Click à l’intérieur de la balise de script et
Inversez la visibilité du contrôle en utilisant la propriété Visible du contrôle
Calendar:
Code VB.NET
<script runat="server" >
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Calendar1.Visible = Not Calendar1.Visible
End Sub
</script>

Code C#
<script runat="server" >
protected void Button1_Click(object sender, EventArgs e)
{
Calendar1.Visible = !Calendar1.Visible ;
}
</script>

2010/2011 ASP.NET 62
TP 4 :
Combiner plusieurs contrôles
 Notez que dans le cas où l’utilisateur saisit manuellement une date dans la zone de
texte, il serait peut-être opportun d’initialiser le contrôle Calendar en correspondance

Code VB.NET
<script runat="server" >
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Calendar1.Visible = Not Calendar1.Visible
If Not String.IsNullOrEmpty(txtDate.Text) Then
Dim dateCourante As DateTime = Convert.ToDateTime(txtDate.Value)
Calendar1.VisibleDate = dateCourante
Calendar1.SelectedDate = dateCourante
End If
End Sub
</script>
Code C#
<script runat="server" >
protected void Button1_Click(object sender, EventArgs e)
{
Calendar1.Visible = !Calendar1.Visible ;
if (Calendar1.Visible & !String.IsNullOrEmpty(txtDate.Value))
Calendar1.VisibleDate = Calendar1.SelectedDate = Convert.ToDateTime(txtDate.Value);
}
</script>

2010/2011 ASP.NET 63
TP5

UTILISER VISUAL WEB


DEVELOPER

2010/2011 ASP.NET 64
TP 5 :
Utiliser Visual Web Developer
Objectif
 Montrer tout l’intérêt d’un environnement de développement tel que Visual
Studio.
 En mode Source, supposons que vous voulez ajouter des attribut à l’une
des balises par exemple <body> : positionnez le curseur à droite de la
lettre y et cliquez la barre d’espace du clavier pour écrire le nom de
l’attribut. IntelliSense se déclenche et vous propose une liste d’attributs
pour la balise.
 L’IntelliSense est également disponible au niveau du code inline dans des
balises <script runat=server>.

 La Boîte à outils pour remplacer tous les contrôles html standards par les
contrôles serveur web d’ASP.NET 2.0

2010/2011 ASP.NET 65
TP 5 :
Utiliser Visual Web Developer
 Basculez en mode Design.
 Supprimez le contrôle de zone de saisie de la date.
 Si la boîte à outils n’est pas visible, cliquez le menu Affichage -> Boîte à
outils.
 Faites un glisser déplacer du contrôle TextBox dans la catégorie Standard à
l’emplacement de l’ancien contrôle html de saisie.

 Sélectionnez le contrôle et cliquez F4 pour afficher la fenêtre de propriétés de


Visual Web Developer.
 Renommez le contrôle en txtDate (ID = txtDate)
 Le système détecte un problème vient de la procédure SelectionChanged qui
charge la zone de texte avec la date sélectionnée dans le calendrier. Changez
la propriété Value par Text.

2010/2011 ASP.NET 66
TP 5 :
Utiliser Visual Web Developer
 En mode Design. Double cliquez sur le contrôle html. Visuel Web Developer vous
emmène automatiquement sur la procédure de réponse à l’évènement par défaut
associé à ce type de contrôle, Si la procédure n’existe pas encore, VWD vous créer la
procédure avec la signature correspondante, sans oublier d’ajouter l’attribut
OnServerClick dans la déclaration du contrôle lui-même.
 Supprimez le bouton Go et remplacez le par un contrôle Button en faisant un glisser
déplacer du contrôle depuis la boîte à outils (ou en double cliquant sur le contrôle).
 Renommez l’ID (butnGo) du contrôle et son titre via la propriété Text (Go).
 Double cliquez sur le contrôle pour générer la procédure de réponse à l’évènement
click
 Remplacez le contrôle Select de la même façon, par un contrôle DropDownList dans
la catégorie Standard.
 Renommez l’ID en ddlRegion.
 Double cliquez sur le contrôle en mode Design pour générer la procédure de réponse à
l’évènement par défaut SelectedIndexChanged.
 Déplacez le code anciennement dans la procédure ddlRegion_ServerChange dans la
nouvelle procédure. Supprimez l’ancienne procédure.

2010/2011 ASP.NET 67
TP 5 :
Utiliser Visual Web Developer

 Contrairement au contrôle html Select et comme certains autres contrôles


web serveur ASP.NET 2.0, le contrôle DropDownList peut provoquer un
post back et déclencher l’évènement SelectedIndexChanged directement.
Pour cela, il faut configurer la propriété AutoPostBack de la DropDownList.
 Ajoutez l’attribut AutoPostBack avec la valeur true dans la déclaration de la
DropDownList de façon à activer le post back automatique.

 Sauvegardez et exécutez la page par un clic droit sur la page en mode source ->
Afficher dans le navigateur.

2010/2011 ASP.NET 68
TP 5 :
Utiliser Visual Web Developer
 Utiliser un contrôle de validation pour contrôler la saisie de la date dans la
zone de saisie :
 Basculez en mode Design.
 Faites un glisser déplacer du contrôle RangeValidator depuis la catégorie
Validation de la boîte à outils juste à droite de la zone de texte de la date.
 Configurez les propriétés du contrôle :
 ControlToValidate : txtDate (contrôle TextBox de la date)
 ErrorMessage : La date n’est pas valide
 Type : Date
 MinimumValue : 01/01/2011
 MaximumValue : 01/07/2011
 Text : *
 La propriété Text donne le message affiché à l’emplacement du contrôle de
validation. Le message dans ErrorMessage est utilisé par le contrôle
ValidationSummary pour afficher le message d’erreur détaillé.

2010/2011 ASP.NET 69
TP 5 :
Utiliser Visual Web Developer
 Faites de-même avec un contrôle RequiredFieldValidator pour éviter que le
formulaire soit publié sans que l’utilisateur ait saisi une date.
 Configurez les propriétés du contrôle :
 ControlToValidate : txtDate (contrôle TextBox de la date)
 ErrorMessage : La date est obligatoire
 Text : *
 Faites un glisser déplacer du contrôle ValidationSummary depuis la
catégorie Validation de la boîte à outils au sommet de la page (par exemple).
 Sauvegardez et exécutez la page
 Entrez une date incorrecte manuellement dans la zone de texte.
 Cliquez sur Go.
 Testez la vérification du champ obligatoire si vous ne saisissez aucune date

2010/2011 ASP.NET 70
TP 5 :
Utiliser Visual Web Developer
 La validation a lieu côté client par un script généré par le contrôle ASP.NET
Vous pouvez également désactiver la validation côté client pour qu’elle ait
lieu côté serveur via la propriété EnableClientScript.
 Configurez la propriété EnableClientScript à False sur les deux contrôles de
validation de la TextBox txtDate.

 Configurez la propriété CausesValidation à False sur le contrôle Button1 pour


désactiver la validation côté serveur de façon à autoriser l’affichage du calendrier.

 Avec cette configuration, le postback de la page lors du clic sur le bouton ne


sera pas bloqué par les validations de la date. Par contre, la validation a lieu
côté serveur sur le clic du bouton Go

 Le calendrier s’affiche maintenant correctement, le serveur n’effectuant plus


de contrôle sur le clic du bouton Calendrier

2010/2011 ASP.NET 71
TP5 :
en tant que Compilateur
 Lancez l’exécution de l’application :
 Menu Déboguer > Exécutez sans débogage ou CTRL+F5
 dans le coin bas gauche de Visual Web Developer, il est indiqué « début de la
génération… » puis « la génération a réussi ». Il y a donc bien eu une phase de
COMPILATION de projet.
 dans la zone de notification de la barre de tâches de Windows XP, vous
constatez que Visual Web Developer a lancé une instance du serveur de test
pour vous permettre de tester l’application.

Attention :
 ce mini serveur web comporte quelques limitations et n’est proposé que pour
vous donner les moyens de développer et tester vos applications sans IIS
dans un premier temps. Par exemple, il ne supporte pas la métabase, il n’a
pas la capacité d’envoyer des emails ou il utilise l’identité de l’utilisateur
connecté au lieu du compte ASPNET(IIS5) ou NETWORK SERVICE(IIS6)
pour s’exécuter

2010/2011 ASP.NET 72
TP5 :
en tant que Compilateur
 Pour observer la compilation dynamique dans la suite de l’exercice : ne
fermez pas le navigateur et gardez la fenêtre ainsi affichée.
 Vous allez maintenant redéplacer le code de réponse au changement de
sélection dans la liste déroulante, dans la procédure de réponse au clic sur
le bouton Go :
 Afficher la page en mode Source
 Déplacez le code de ddlRegion_SelectedIndexChanged dans ButGo_Click
 Sauvegardez la page. Très important ici !!!
 Basculez sur le navigateur encore ouvert sur la page Default.aspx.
 Entrez une date, sélectionnez la région N°2 dans la liste et cliquez sur le bouton
Go.

 le serveur web de test a constaté que vous aviez sauvé la page et en a donc
déduit qu’il fallait redemander une compilation de celle-ci avant de la ré-
exécuter. C’est le principe dit de la compilation dynamique.

2010/2011 ASP.NET 73
TP5 :
en tant que Débogueur
 Pour indiquer au runtime où vous souhaitez faire des pauses dans l’exécution
du code, positionnez des points d’arrêt dans les procédures de code
correspondantes :
 Positionnez le curseur sur la première ligne de la procédue Page_Load et cliquez
F9 ou directement dans la marge
 Faites de même pour Calendar1_SelectionChanged et ButGo_Click.
 Lancez l’application en mode débogage :
 menu Déboguer > Démarrer le débogage ou F5
 Utilisez les boutons de la barre d‟outils Déboguer de Visual Web Developer
pour avancer le pointeur d’exécution pas à pas.
 Avancez pas à pas avec F10 jusqu’au premier passage dans la boucle d’exécution
 Positionnez la souris sur la variable s et vous obtenez sa valeur dans une bulle
d’information
 Faites de même sur le contrôle ddlRegion et cliquez sur le signe + pour avoir le
détail de cet objet d’un type un peu plus complexe qu’une simple String.
 Cliquez F5. La fenêtre s’affiche dans le navigateur.

2010/2011 ASP.NET 74
TP6

ACCÉDER À DES DONNÉES

2010/2011 ASP.NET 75
TP6 :
Accéder à des données
Objectif

 Introduire les principes de base de l’accès aux données dans une page
ASP.NET.
Contexte fonctionnel

 Remplacer la table html de résultat par une grille de données en utilisant le


nouveau contrôle GridView d’ASP.NET.

 Brancher sur le clic du bouton Go une véritable recherche sur une base de
données SQL Server Express via une procédure stockée. La recherche doit
s’effectuer à partir de la région sélectionnée et de la date qui sont les
paramètres de la procédure stockée utilisée.

 Vous allez travailler avec une base de données existante de type SQL Server,
appelée AffairesSansRisque

2010/2011 ASP.NET 76
TP6 :
Se connecter à une source de données
 Ajoutez un nouveau dossier dans votre application web appelé App_Data :
 Faites un clic droit sur la racine du projet dans l’Explorateur de solutions > Ajouter le
dossier ASP.NET> App_Data.
 Récupérez la base de données existante dans
le dossier projet
 Faites un glisser déplacer des fichiers
AffairesSansRisque_Data.mdf et
AffairesSansRisque_Data_log.ldf vers le dossier
App_Data.
 Utilisez l’Explorateur de bases de données de Visual
Web Developer :
 Double cliquez sur le fichier AffairesSansRisque_Data.mdf
dans l’Explorateur de Solutions pour basculer
automatiquement dans l’Explorateur de bases
de données de VWD.
 Consultez les différents objets de la base de données via leur menu contextuel.

2010/2011 ASP.NET 77
TP6 :
Se connecter à une source de données
 La base contient entre autres :
 une table Annonces avec la liste des annonces publiées sur le site.
 et une procédure stockée nommée RechercherAnnonce permettant de retrouver
toutes les annonces d’une région donnée au-delà d’une certaine date. Pour tester la
procédure stockée, faites un clic droit sur la procédure > Exécuter.

2010/2011 ASP.NET 78
TP6 :
Se connecter à une source de données
 Vous pouvez créer d’autres connexions à des sources de données
quelconques, indépendamment de votre projet, en faisant un clic droit à la
racine de l’explorateur > Ajouter une connexion.

 Faites un clic droit sur la table Annonces > Afficher les données de la table
pour vérifier que la source de données contient déjà des annonces publiées.

2010/2011 ASP.NET 79
TP6 :
Afficher des données
 Ouvrez la page Default.aspx en mode Source.
 Supprimez la table html d’id tblResultat et le code de la procédure
ButGo_Click.
 Basculez en mode Design.
 Configurez une source de données vers la table Annonces de la base
AffairesSansRisque :
 Faites un glisser déplacer à l’intérieur de la balise <div class=resultat> de la Boîte
à outils > rubrique Données > SqlDataSource.

Aidez-vous du mini navigateur pour être bien


positionné

2010/2011 ASP.NET 80
TP6 :
Afficher des données
 Ouvrez la page Default.aspx en mode Source.
 Supprimez la table html d’id tblResultat et le code de la procédure
ButGo_Click.
 Basculez en mode Design.
 Configurez une source de données vers la table Annonces de la base
AffairesSansRisque :
 Faites un glisser déplacer à l’intérieur de la balise <div class=resultat> de la Boîte
à outils > rubrique Données > SqlDataSource.
 Faites un clic droit sur le contrôle > Propriétés et renommez le contrôle :
dsAnnonces.
 Sélectionnez le contrôle pour faire apparaître sa balise active (ou clic droit sur le
contrôle > Afficher la balise active).
 Cliquez Configurer la source de données

2010/2011 ASP.NET 81
TP6 :
Afficher des données
 Dans la fenêtre Choisir votre connexion de données, cliquez la liste déroulante
et retrouvez la connexion définie à l’exercice précédent :
AffairesSansRisque_Data.mdf.
 Cliquez sur Chaîne de connexion pour
observer la chaîne de connexion associée :
 Vous voyez que la Source est le moteur SQL Server
Express Edition .\SQLEXPRESS car SQL Express
s’installe par défaut comme une instance nommée sur
la machine
 Cliquez sur Suivant.

2010/2011 ASP.NET 82
TP6 :
Afficher des données
 Dans la fenêtre Enregistrer la chaîne de
connexion dans le fichier de configuration de
l‟application, cliquez Oui, enregistrer cette
connexion en tant que et renommez la chaîne :
csAffairesSansRisque
 Cliquez sur Suivant.

 Dans la fenêtre Configurer l‟instruction Select,


cliquez Spécifiez une instruction SQL
personnalisée ou une procédure stockée.
 Cliquez sur Suivant.

2010/2011 ASP.NET 83
TP6 :
Afficher des données
 Dans la fenêtre suivante, sélectionnez Procédure Stockée et choisissez la
procédure nommée RechercherAnnonce.
 Cliquez sur Suivant.

2010/2011 ASP.NET 84
TP6 :
Afficher des données
 configurez successivement les deux paramètres attendus par la procédure
stockée, correspondant à l’ID de la région et la date sur lesquels porte la
recherche. Pour cela, sélectionnez une source de type Control et indiquez
l’ID de la liste déroulante ddlRegion pour le paramètre pRegion et l’ID de
la textbox txtDate pour le second paramètre pDate.
 Cliquez sur Suivant.

2010/2011 ASP.NET 85
TP6 :
Afficher des données
 Dans la fenêtre Tester la requête, cliquez le bouton Tester la requête
pour la valider. Saisissez par exemple 19 comme ID de région
correspondant à la région Ile de France, et 01/01/2006 dans le paramètre
date. Cliquez OK pour lancer le test d’exécution de la procédure stockée.
 Cliquez sur Terminer.

2010/2011 ASP.NET 86
TP6 :
Afficher des données
 Dessinez maintenant une grille pour afficher la liste des annonces :
 Faites un glisser déplacer de la boîte à outils > rubrique Données > contrôle
GridView à l’intérieur de la balise <div.resultat#resultat>.
 Affichez la balise active du contrôle GridView. Cochez les options
Activer la pagination, Activer le tri, Activer la sélection.

2010/2011 ASP.NET 87
TP6 :
Afficher des données
 Dans la balise active du contrôle GridView, cliquez Modifier les
colonnes…
 Dans la fenêtre Champs, supprimez tous les champs SAUF Ville, Code
Postal, Email et le champ Sélectionner.
 Les champs Ville, Code Postal et Email sont de type BoundField, c’est-à-dire
que ce sont des colonnes directement liées à des champs dans la base de
données. La liaison se fait à partir de l’attribut DataField qui donne le nom du
champ de la table Annonces dans la base de données
 Sauvegardez la page Default.aspx et exécutez-la (clic droit > afficher dans
le navigateur).
 Cliquez sur la région Rhône-Alpes, entrez la date 01/01/2006 puis cliquez sur
Go.

2010/2011 ASP.NET 88
TP6 :
Afficher des données

Notez les types de


champs disponibles.
Renommez les en-
têtes de chaque
colonne.

Changez l’ordre des


colonnes avec les
boutons.
Bouton pour supprimer
les colonnes
sélectionnées.

2010/2011 ASP.NET 89
TP6 :
Afficher des données
 Vous pourriez même charger la liste déroulante à partir de la table
Regions de la base de données AffairesSansRisque au lieu de la charger
à partir du fichier texte Liste des régions.txt
 ajouter un autre contrôle SqlDataSource sur la page, qui pointe
toujours sur la même chaîne de connexion que précédemment, c’est-à-
dire csAffairesSansRisque.
 Configurez le contrôle pour qu’il rapatrie toutes les régions de la base
via une requête SELECT.
 Terminez l’assistant en effectuant un test si besoin.
 Nommez-le dsRegions en utilisant la fenêtre de propriétés (F4) du
contrôle SqlDataSource.
 Liez le contrôle DropDownList1 sur cette source de données
dsRegions en utilisant le menu Choisir la source de données de la
balise active du contrôle.

2010/2011 ASP.NET 90
TP6 :
Afficher des données
 Paramétrez l’affichage de la liste déroulante sur le champ Reg_Nom et
indiquer Reg_Id comme étant la donnée à prendre en compte pour la
liaison avec la source de données.
 Mettez en commentaire le chargement de la liste à partir du fichier texte
dans la procédure Page_Load.
 Enregistrez, exécutez puis testez la page.

2010/2011 ASP.NET 91
TP7

MASTER PAGE

2010/2011 ASP.NET 92
TP 7:
Master page
Objectif

 Créer une page maître qui servira de modèle aux pages de contenu du site.
 Créer des pages de contenu qui héritent de la page modèle.

Contexte fonctionnel

 Les pages maîtres ASP.NET vous permettent de créer une disposition


cohérente des pages de votre application. Une page maître unique définit
l'apparence et le comportement standard que vous souhaitez pour toutes les
pages (ou groupe de pages) de votre application. Vous pouvez ensuite créer
des pages de contenu individuelles comportant les éléments que vous
souhaitez afficher. Lorsque les utilisateurs demandent les pages de contenu,
ils fusionnent avec la page maître pour produire une sortie qui associe la
présentation de la page maître au contenu de la page de contenu.

2010/2011 ASP.NET 93
TP 7:
Master Page
Atelier 1

 Une page maître est un fichier ASP.NET possédant l'extension .master (*)
 La page maître est identifiée par une directive @ Master

<%@ Master Language="C#" %>

ContentPlaceHolder
 Définit relative une région pour le contenu dans une page maître ASP.NET.
 Placer là où vous souhaitez que le contenu soit modifiable

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


</asp:ContentPlaceHolder>

2010/2011 ASP.NET 94
TP 7:
Création de page Maitre

Diviser la page en zones de contenu

Plan du site | Contactez-nous | Ajouter aux favoris

Logo Panneau publicitaire

Chemin de navigation

Espace membre

Menu privé
Zone dynamique modifiable par les pages enfants
Services

Menu des services

Pied de page

2010/2011 ASP.NET 95
TP 7:
Création d'une master page

 Créez un nouveau site web : Fichier -> nouveau -> Site Web

 Dans l'explorateur de solution, cliquez avec le bouton droit puis


choisissez « Ajoutez un nouvel élément »

 Sélectionnez page Maître et gardez le nom par défaut :


MasterPage.master.

 Cliquez sur Ajouter

 Ajoutez un autre ContentPlaceHolder et choisir Un id

2010/2011 ASP.NET 96
TP 7:
Création d'une master page

2010/2011 ASP.NET 97
TP 7:
Création d'une page de contenu
 Modifiez la directive @Page pour indiquer au runtime que votre page hérite maintenant de la
page Maître MasterPage.master :
 Ajoutez l’attribut MasterPageFile et pointez sur l’url de la page Maître.

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"


Inherits= " MasterPage" MasterPageFile="~/MaitrePage.Master" Title="Test" %>

 Dans une page enfant, cette zone de contenu dynamique est un contrôle
<asp :Content> qui est relié à un contrôle ContentPlaceHolder parent par
l’attribut ContentPlaceHolderID

 <asp:Content ID="Content1" ContentPlaceHolderID="Body" Runat="Server">


</asp:Content>

2010/2011 ASP.NET 98
TP 7:
Créer une nouvelle page de contenu Webform

Atelier 2

 créer une nouvelle WebForm, et de cocher la case "Select master page ", à
l'étape suivante Visual Studio va vous demander de sélectionner la master
page à utiliser avec cette WebForm

2010/2011 ASP.NET 99
TP 7:
Créer une nouvelle page de contenu Webform

2010/2011 ASP.NET 100


TP7: Accéder aux objets de la page maître depuis
la page enfant

 Pour changer le pied de page défini dans la page maître dynamiquement


depuis la page enfant, il faut d’abord créer dans cette dernière une
référence fortement typée sur la page maître correspondante

 En mode source, ajoutez la directive @MasterType à la page pour indiquer


le type de la page maître dont la page hérite et sa propriété VirtualPath:

 <%@ MasterType VirtualPath="~/MaPageMaitre.Master" %>

2010/2011 ASP.NET 101


TP 7 : Accéder aux objets de la page maître depuis
la page enfant

 Dans MaPageMaitre.Master :
 Ajouter un LableDePageMaitre à l’extérieur des ContentPlaceHolder
<div>
<asp:Label ID="LabelDePageMaitre" runat="server" Text="Label">
</asp:Label>
</div>

 Dans le code Bhind de notre page Master :


 Créez des get et set pour notre Label(en général des fonctions pour
avoir l’accès)

public string GetSetLabelDePageMaitre


{
get { return LabelDePageMaitre.Text;}
set { LabelDePageMaitre.Text=value; }

2010/2011 ASP.NET 102


TP7 : Accéder aux objets de la page maître depuis la
page enfant

 Dans notre page qui hérite de MaPageMaitre


 d’ajouter la directive MasterType

 Ajouter un Bouton nom : Get et au autre nom :Set

2010/2011 ASP.NET 103


<%@ Page Title="Page d'accueil" Language="C#"
MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ MasterType VirtualPath="~/Site.master" %>

<asp:Content ID="HeaderContent" runat="server"


ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server"
ContentPlaceHolderID="MainContent">
<div>

<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>


<asp:Button ID="Button1" runat="server" Text="Get"
onclick="Button1_Get" />
<asp:Button ID="Button2" runat="server" Text="Set"
onclick="Button2_Set" />
</div>
</asp:Content>

2010/2011 ASP.NET 104


TP 7 :
Accéder aux objets de la page maître depuis la page
enfant
 Dans le code Bhind de notre page Default.aspx
 Ajoutez une méthode Button1_Get Pour le bouton Get qui
permit de récupérer la valeur du label de la page maitre

protected void Button1_Get(object sender, EventArgs e)


{
//pour récupérer la valeur du label de la page
//maitre dans Lable1 de La page Default
Label1.Text = Master.GetSetLabelDePageMaitre ;
}

2010/2011 ASP.NET 105


TP 7 :
Accéder aux objets de la page maître depuis la page
enfant
 Toujours dans Dans le code Bhind de notre page Default.aspx

 Ajouter une méthode Button1_Set Pour le bouton Set qui permit de


changer la valeur du label de la page maitre

protected void Button2_Set(object sender, EventArgs e)


{
//pour chnager la valeur du label de la page maitre
Master.GetSetLabelDePageMaitre = "je change la valeur de label
de la page maitre ";
}

2010/2011 ASP.NET 106


TP7 :
Exécuter

2010/2011 ASP.NET 107


TP7 :
Après Clic sur Get

2010/2011 ASP.NET 108


TP 7 :
Après Clic sur Set

2010/2011 ASP.NET 109


TP8

LES CONTRÔLES SERVEUR


DATA-BOUND

2010/2011 ASP.NET 110


TP8 :
Les contrôles serveur Data-Bound

 Les contrôles Data-Bound, sont des contrôles qui ont


nécessairement besoin d’un bind pour fonctionner;

 Ils sont classés en trois catégories : simple, composé et


Hiérarchique
 GridView, DetailsView et FormView
 La Classe CompositeDataBoundControl

2010/2011 ASP.NET 111


TP8 :
DetailsView
 Le contrôle DetailsView vous permet à la fois d’afficher, de
modifier, d‟insérer ou de supprimer un enregistrement unique de
sa source de données associée. Par défaut, le contrôle DetailsView
affiche chaque champ d’un enregistrement sur une ligne distincte

 Le contrôle DetailsView est généralement utilisé pour la mise à


jour et l‟insertion de nouveaux enregistrements et souvent dans un
scénario maître/détail

2010/2011 ASP.NET 112


TP8 :
Les contrôles serveur Data-Bound
Atelier 1

Création dune base données


 Ouvrez l’Explorateur de base de données de Visual Studio

 Ajoutez un nouvel élément au dossier App_Data :<<Base de


données Sql Server >>
 Créez une table Client( id_cli, nom_cli ,mail_cli, ville_cli ) et id
comme clé primaire
 Ajoutez une nouvelle ClientAffiche.aspx n’hérite pas de page
master

2010/2011 ASP.NET 113


TP8 :
Les contrôles serveur Data-Bound

2010/2011 ASP.NET 114


TP8 :
Les contrôles serveur Data-Bound
 Faites un glisser déplacer de la table Client dans le <div > de la
page ClientAffiche.aspx
 Supprimer le GridView ??
 Créez un block div puis faites un glisser déplacer du contrôle
DetailsView
 Choisissez SqlDataSource1 comme source de données
DetailsView
 Exécutez

 Cliquez sur la flèche du control DetailsVeiw Modifier les champs


 Sélectionnez id_client modifiez le hederText avec numClient

2010/2011 ASP.NET 115


TP8 :
Personnalisation de l‟affichage du
contrôle DetailsView
 En mode Création, cliquez avec le bouton droit sur le
contrôle DetailsView, puis cliquez sur Afficher les tâches de
contrôle courantes.
 Dans le menu Tâches courantes du contrôle DetailsView,
cliquez sur Format automatique.
 Dans la boîte de dialogue Format automatique, sélectionnez un
mode dans la liste Sélectionner un mode. L’effet du mode sur
votre contrôle DetailsView est affiché dans la zone Aperçu.

2010/2011 ASP.NET 116


TP8 :
Personnalisation de l‟affichage du
contrôle DetailsView
 Cochez la fonctionnalité souhaitée :

 Permettre la modification
 Activer la suppression
 Activer la insertion
 Activer la pagination

2010/2011 ASP.NET 117


TP 8:
La Propriété DefaultMode:
 Permit d’obtenir ou définit le mode d'entrée par défaut du contrôle
 Il existe 3 modes : Insert ,Edit et ReadOnly

2010/2011 ASP.NET 118


TP 8:
La Propriété DefaultMode:

Insert Edit Read Only

2010/2011 ASP.NET 119


TP8 :
d‟avoir l‟affichage dans une page et l‟insertion dans
une autre
Atelier 2

 Objectif
 Cette fois c’est d’avoir l’affichage dans une page et l’insertion dans une autre

 Crée une nouvelle page ClientInsert.aspx

 Même instructions que l‟Atelier 1

 Dans la fenêtre Propriétés du DetailsVeiw changez DefaultMode de


ReadOnly à Insert

 Activer la insertion

 Exécutez

2010/2011 ASP.NET 120


TP8 :
d‟avoir l‟affichage dans une page et l‟insertion dans
une autre

 Dans la page ClientAffiche

 Faites un glisser déplacer du contrôle HyperLink dans la page

 Dans la fenêtre Propriétés du HyperLink


 changer la valeur de Text avec Ajouter un Client

 NavigateUrl par ClientInsert.aspx

2010/2011 ASP.NET 121


TP8 :
d‟avoir l‟affichage dans une page et l‟insertion dans
une autre
 Dans le code la page ClientInsert.aspx ajouter la méthode suivante

protected void DetailsView1_InsertMql(object sender, DetailsViewInsertedEventArgs e)


{
if (e.AffectedRows == 1)
{
Response.Redirect("~/ClientAffiche.aspx");
}
}

 Ajouter dans Source du Control DetailsVeiw de la page ClientInsert

 OnItemInserted="DetailsView1_InsertMql"

2010/2011 ASP.NET 122


TP8 :
d‟avoir l‟affichage dans une page et l‟insertion dans
une autre
 Dans le code la page ClientInsert.aspx ajouter la méthode suivante

protected void DetailsView1_CancelMql(object sender, DetailsViewCommandEventArgs e)


{
if (e.CommandName=="Cancel")
{
Response.Redirect("~/ClientAffiche.aspx");
}
}

 Ajouter dans Source du Control DetailsVeiw de la page ClientInsert

 OnItemCommand="DetailsView1_CancelMql "

2010/2011 ASP.NET 123


TP9

DÉFINITION DES MENUS

2010/2011 ASP.NET 124


TP 9:
Définition des menus

L’application web fournit trois systèmes de navigation :

 Un menu sur le côté gauche de l’écran qui permet de naviguer dans les
services du site.

 Le même menu dans le pied de page, qui permet d’avoir un lien sur tous les
services à la fin de la lecture d’une page (sans avoir besoin de refaire
défiler la page jusqu’à son sommet pour refaire apparaître le menu gauche).

 Un chemin dans la bannière du site qui permet de savoir à tout moment où


l’on se trouve dans la hiérarchie des pages du site.

2010/2011 ASP.NET 125


TP 9 :
Plan de site

 XmlSiteMapProvider : permet de lier les contrôles serveur de menu (type


TreeView, Menu…) à une source de données au format Xml appelée fichier
de plan de site, contenant l’adresses des différentes pages utilisés dans
notre site.

2010/2011 ASP.NET 126


TP 9 :
Plan de site

 Construire une cartographie du site décrivant l’adresse de toutes les pages du


site ainsi que le titre de menu associé et de le stocker au format Xml dans un
fichier de type Plan de site.

 Un plan de site est un fichier XML qui décrit la collection de nœuds du menu de
votre application.

 Il doit y avoir un nœud principal incluant des sous nœuds pour les sous menus.

2010/2011 ASP.NET 127


TP 9 :
Plan de site
 Faites un clic droit sur la racine de votre projet > Ajouter un
nouvel élément > Plan de site …

2010/2011 ASP.NET 128


TP 9 :
Source de données

Double cliquez sur MasterPage.master l’Explorateur de solutions.

Faites un glisser déplacer de la Boîte à outils > rubrique Données >


contrôle SiteMapDataSource sur la page.

2010/2011 ASP.NET 129


TP 9 :
Site Map DataSource
 Paramétrez à False la propriété ShowStartingNode du contrôle pour
démarrer la lecture du plan au premier niveau des nœuds à l’intérieur du
nœud racine
 Sélectionnez le contrôle SiteMapDataSource > clic droit > Propriétés.
Changez la valeur de ShowStartingNode : False

Le menu racine Accueil n’apparaît pas


car vous avez indiqué au contrôle
source de données
SiteMapDataSource1 que vous ne
souhaitiez pas en tenir compte
(propriété ShowStartingNode à false).

2010/2011 ASP.NET 130


TP 9 :
Définition des menus

1. Le contrôle TreeView:

C’est le contrôle qui va nous permettre d’afficher le menu sur la barre de


navigation à gauche vers l’ensemble des pages du site.

2010/2011 ASP.NET 131


TP 9 :
Le contrôle TreeView
 Double clique sur la page MasterPage.master depuis l’Explorateur
de solutions.
 Ajoutez un contrôle TreeView à la suite du contrôle de source de
données SiteMapDataSource
 Faites un glisser déplacer de la Boîte à outils > rubrique Navigation
> contrôle TreeView sur la page
 Choisissez la source de données siteMapDataSource1.

2010/2011 ASP.NET 132


TP 9 :
Le contrôle TreeView

Propriétés:
 Les attributs ExpandImageUrl et CollapseImageUrl du contrôle TreeView
pour afficher des images de votre choix lorsqu’un menu contient des sous
menus.
 L’attribut NoExpandImageUrl donne l’image affichée pour toutes les options
de menus n’ayant pas de sous niveau.

 L’attribut ExpandDepth permet de contrôler la profondeur de l’affichage des


nœuds dans la hiérarchie au lancement du menu.
Avec la valeur 0, on obtient seulement les menus.
Avec une valeur à 1, même les sous-menu sont déjà ouvertes .

2010/2011 ASP.NET 133


TP 9 :
Le contrôle Menu
 C’est le contrôle qui va nous permettre d’afficher le même menu dans le pied
de notre page.

 Double clique sur la page MasterPage.master depuis l’Explorateur de


solutions.
 Ajoutez un contrôle Menu juste au dessus du contrôle literal ltlPiedDePage
dans la partie « Zone : Pied de page » :

Faites un glisser déplacer de la Boîte à outils => rubrique Navigation


=> contrôle Menu sur la page.

2010/2011 ASP.NET 134


TP 9 :
Le contrôle Menu
Choisissez la source de données :

Chaque menu contient une collection d’Items :


Statiques : c’est-à-dire affichés au lancement du menu.
Dynamiques: c’est-à-dire affichés lorsque l’utilisateur passe la souris
sur le menu parent correspondant.

2010/2011 ASP.NET 135


TP 9 :
Mise en forme de menu
 L’attribut Orientation contrôle l’orientation du menu.

 L’attribut StaticMenuItemStyle, pour définir le style des éléments de menu.

 L’attribut ItemSpacing détermine l’espacement entre les options de menu.

 Vous pourriez utiliser également la mise en forme automatique proposée en


mode Design dans le

Pour choix de
la forme de
menu

2010/2011 ASP.NET 136


TP 9 :
Le contrôle SiteMapPath
 C’est le contrôle qui donne le chemin de la page en cours dans la bannière
des pages. Par exemple ici vous êtes dans la page Acceuil (Default.aspx).

 Lorsque vous cliquez sur l’un des éléments du menu, vous observez le
chemin de la page correspondante donné par le contrôle.

2010/2011 ASP.NET 137


TP 9 :
Le contrôle SiteMapPath
 Ajoutez un contrôle SiteMapPath à l’intérieur de la balise <div> de classe
« nav » :
 Faites un glisser déplacer de la Boîte à outils > rubrique Navigation => contrôle
SiteMapPath sur la page.
 Notez les éléments dérivés de la classe Style, PathSeparatorStyle,
CurrentNodeStyle, NodeStyle et RootNodeStyle, pour définir le style des
différentes parties du contrôle.
 Sélectionnez l’option Modifier les modèles.
 Dans la liste déroulante, positionnez vous sur le modèle correspondant au dessin
du séparateur de menu : PathSeparatorTemplate.

2010/2011 ASP.NET 138


TP 9 :
Mise en forme SiteMapPath
<asp:SiteMapPath runat="server">
<PathSeparatorStyle Font-Bold="True" ForeColor="White" />
<CurrentNodeStyle ForeColor="#003063" />
<NodeStyle Font-Bold="True" ForeColor="White" />
<RootNodeStyle Font-Bold="True" ForeColor="White" />
</asp:SiteMapPath>

 Notez les éléments dérivés de la classe Style, PathSeparatorStyle,


CurrentNodeStyle, NodeStyle et RootNodeStyle, pour définir le style des
différentes parties du contrôle.

2010/2011 ASP.NET 139


A suivre …

Vous aimerez peut-être aussi