Scribd
Importer
689 vues140 pages

ASP

Transféré par

Assiya Ql
Copyright
© Attribution Non-Commercial (BY-NC)
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
689 vues140 pages

ASP

Transféré par

Assiya Ql
Copyright
© Attribution Non-Commercial (BY-NC)
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Université Ibno Tofail

Faculté des Sciences


Master Qualité logiciel
Cours : Internet & Multimédia

Pr. Abdelalim SADIQ


[Link]@[Link]
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 [Link] 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 [Link] 3
2010/2011 [Link] 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 [Link] 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 [Link] 6
Les langages
Les langages

• 27 langages supportés pour le moment …

• C#, VC++, [Link], 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 [Link].

• 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 [Link] et sa CLR.

2010/2011 [Link] 7
ASP . NET
Qu’est ce qu’[Link] ?

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

• [Link] fait partie intégrante du FrameWork et bénéficie de toutes ses


fonctionnalités (classes de base).

• Les Pages [Link] 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 [Link] 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 [Link] 9
[Link]
<%@ Page Language="c#" %>
<HTML> <BODY>
<H1>Table des factorielles</H1>
<%
int i,fact;
for ( i=1,fact=1 ; i<4 ; i++, fact*=i ) {
[Link]( i + "! =" + fact + "<BR>" );
}
%>
</BODY> </HTML

invocation

exécution
côté serveur

2010/2011 [Link] 10
[Link]
<%@ 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 ) {
[Link]( 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 [Link] 11
[Link]
Philosophie [Link]

• 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
 .[Link] , .[Link] , …
• fichier dit codebehind
• classe contenant les traitements

2010/2011 [Link] 12
Contrôles
Les contrôles
Composants graphiques pour l’écriture de pages [Link]
• 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 [Link] 13
TP1

CRÉER UN PREMIER
FORMULAIRE DYNAMIQUE

2010/2011 [Link] 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 [Link] 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 [Link] 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 [Link] dans votre répertoire de projet.
3. Saisissez le contenu statique de la page suivante:

<html>
<head>
<title>Page de recherche</title>
<link href="[Link]" 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 [Link] 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 [Link] 17
TP1 : étape 1
rendre la page un formulaire interactif

<html>
<head>
<title>Page de recherche</title>
</head>
<body>
<form method="post" action="[Link]">
<div class="recherche">
…
</div>
<div class="resultat">
…
</div>
</form>
</body>
</html>

2010/2011 [Link] 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 [Link] 19
TP1 : étape4
ajouter un traitement à la page
 Ajouter un traitement à la page qui sera pris en charge côté serveur par
[Link] 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 <% %>
 [Link] 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>

 [Link] 2.0 propose de coder avec un langage compilé, C# ou [Link] 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 [Link] 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="[Link]">


<form method="post" action="[Link]" 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 [Link] 21
TP1 : étape4
ajouter un traitement à la page
 L’attribut runat="server" est fondamental car il indique au moteur [Link] 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 [Link] 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 [Link] 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 [Link].

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

2010/2011 [Link] 23
TP1 : étape4
ajouter un traitement à la page
 Indiquer le langage de votre choix

 Code [Link]
<%@ Page Language="VB" %>
<html>
…
</html>

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

2010/2011 [Link] 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 [Link] 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 [Link]

<%
If Not [Link] = "" Then
[Link] = "Résultat de la recherche pour le " & [Link]
End If
%>

Code C#
<%
if ([Link] != "")
{
[Link] = "Résultat de la recherche pour le " + [Link];
}
%>

2010/2011 [Link] 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 [Link] 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 [Link]
<%
[Link] = [Link]()
%>
Code C#
<%
[Link] = [Link]() ;
%>

 La propriété [Link] du Framework 2.0 donne la date du jour


que l’on formate avec ToShortDateString().

2010/2011 [Link] 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 [Link]
<%
If Not [Link] = "" Then
[Link] = "Résultat de la recherche des annonces dans la région " _
& [Link]([Link]).Text & " pour le " + [Link]
End If
%>

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

 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 [Link] 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 [Link] 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="[Link]" 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 [Link] 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 [Link] = 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
[Link](New LiteralControl("gege@[Link]"))
'Ajouter la cellule à la collection de cellules de la ligne
[Link](celluleEmail)
'Recommencer pour afficher la ville et le code postal de l‟annonce
Dim celluleVille As HtmlTableCell = New HtmlTableCell()
[Link](New LiteralControl("Paris"))
[Link](celluleVille)
Dim celluleCodePostal As HtmlTableCell = New HtmlTableCell()
[Link](New LiteralControl("75000"))
[Link](celluleCodePostal)
'Ajouter la ligne à la collection de lignes du tableau
[Link](ligne)
End If
2010/2011 %> [Link] 31
TP1 : étape 5
Utiliser les contrôles Html Serveur
Code C#
<%
/*…*/
if ([Link] == 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
[Link](new LiteralControl(“MASTER@[Link]"));
//Ajouter la cellule à la collection de cellules de la ligne
[Link](celluleEmail);
//Recommencer pour afficher la ville et le code postal de l‟annonce
HtmlTableCell celluleVille = new HtmlTableCell();
[Link](new LiteralControl(“KENITRA"));
[Link](celluleVille);
HtmlTableCell celluleCodePostal = new HtmlTableCell();
[Link](new LiteralControl("75000"));
[Link](celluleCodePostal);
//Ajouter la ligne à la collection de lignes du tableau
[Link](ligne);
}
%>

2010/2011 [Link] 32
TP2

COMPRENDRE LA
PROBLÉMATIQUE DE
GESTION D‟ÉTAT
2010/2011 [Link] 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é[Link].

2010/2011 [Link] 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 [Link] 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
[Link] 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 [Link] 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 [Link]
<script runat="server" >
Protected Sub Page_Load()
If [Link] = 2 Then
…
End If
End Sub
</script>
Code C#
<script runat="server" >
public void Page_Load()
{
if ([Link] == 2) {…}
}
</script>

2010/2011 [Link] 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 [Link]
<script runat="server" >
Protected Sub Page_Load()
Using sr As [Link] = _
[Link]("C:\Votre chemin de projet\Liste des ré[Link]")
Dim s As String = ""
Dim index As Integer = 0
s = [Link]()
Do Until s = ""
[Link](New ListItem(s, [Link]()))
index += 1
s = [Link]()

End Using
If [Link] = 2 Then
…
End If
End Sub
</script>
2010/2011 [Link] 37
Tp2 :
lecture de la liste déroulante
Code C#

<script runat="server" >


public void Page_Load()
{
using ([Link] sr = [Link](@"C:\chemin\ré[Link]"))
{
string s = "";
int index = 0;
while ((s = [Link]()) != null)
{
[Link](new ListItem(s, [Link]()));
index++;
}
}
if ([Link] == 2) {…}
}
</script>

2010/2011 [Link] 38
Tp2 :
lecture de la liste déroulante
 On utilise l’espace de nom [Link] 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 [Link] 39
Tp2 :
garder l‟état de la liste
 Nous voyons que la liste s’incrémente une nouvelle fois avec les régions !!
Pourquoi?
 [Link] 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’[Link]


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 [Link] 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 [Link] 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 [Link] 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, [Link] 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 [Link] 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 [Link]
<script runat="server" >
Protected Sub Page_Load()
If Not [Link] Then
Using sr As [Link] = _
[Link]("C:\Votre chemin de projet\Liste des ré[Link]")
Dim s As String = ""
Dim index As Integer = 0
s = [Link]()
Do Until s = ""
[Link](New ListItem(s, [Link]()))
index += 1
s = [Link]()

End Using
End If
If [Link] = 2 Then
…
End If
End Sub
</script>
2010/2011 [Link] 43
Tp2 :
garder l‟état de la liste
Code C#
<script runat="server" >
public void Page_Load()
{
If ( ![Link]) {
using ([Link] sr = [Link](@"C:\Votre chemin
de projet\Liste des ré[Link]"))
{
string s = "";
int index = 0;
while ((s = [Link]()) != null)
{
[Link](new ListItem(s, [Link]()));
index++;
}
}
}
if ([Link] == 2) {…}
}
</script>

2010/2011 [Link] 44
TP3

UTILISER LE MODÈLE
ÉVÈNEMENTIEL

2010/2011 [Link] 45
TP 3 :
Utiliser le modèle évènementiel
Objectif
 Comprendre l’approche évènementielle de la programmation avec [Link] 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 [Link] 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 [Link] 47
TP 3 :
Utiliser le modèle évènementiel
Protected Sub Page_Load()
If Not [Link] Then
Using sr As [Link] = _
[Link]("C:\Labs PHP-ASP\VB\Lab 1\Solution\Liste des
ré[Link]")
Dim s As String = ""
Dim index As Integer = 0
s = [Link]()
Do Until s = ""
[Link](New ListItem(s, [Link]()))
index += 1
s = [Link]()

End Using
End If
End Sub
Protected Sub butGo_ServerClick(ByVal sender As Object, ByVal e As
[Link])
If [Link] = 2 Then
..
End If
End Sub
</script>
2010/2011 [Link] 48
TP 3 :
Utiliser le modèle évènementiel
public void Page_Load()
{
If ( ![Link]) {
using ([Link] sr = [Link](@"C:\chemin\ré[Link]"))
{
string s = "";
int index = 0;
while ((s = [Link]()) != null)
{
[Link](new ListItem(s, [Link]()));
index++;
}
}
}
}
protected void btnGo_ServerClick(object sender, EventArgs e)
{
if ([Link] == 2)
{
….
}
}
</script>
2010/2011 [Link] 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 [Link] 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 [Link] 51
TP 3 :
Utiliser le modèle évènementiel
Code [Link]
<script runat="server" >
Protected Sub Page_Load()
…
End Sub
Protected Sub butGo_ServerClick(ByVal sender As Object, ByVal e As [Link])
End Sub
Protected Sub ddlRegion_ServerChange(ByVal sender As Object, ByVal e As
[Link])
If [Link] = 2 Then

End If
End Sub
</script>

2010/2011 [Link] 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 ([Link] == 2)
{
....
}
}
</script>

2010/2011 [Link] 53
TP4

COMPRENDRE L‟APPROCHE
COMPOSANT

2010/2011 [Link] 54
TP 4 :
Comprendre l‟approche composant
Objectif

 Mettre en œuvre les contrôles serveur d’[Link] 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 [Link] 55
TP 4 :
Comprendre l‟approche composant
Principe
o
 Avec l’approche composant, [Link] 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
[Link]. Donc pour la plupart, ils sont associés à une représentation graphique
basée sur des contrôles html standard, qu’[Link] 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 [Link] 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 [Link] 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 [Link] 58
TP 4 :
Chargement automatique de la date
 Un contrôle serveur [Link] 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 [Link]
<script runat="server" >
Protected Sub Calendar1_SelectionChanged(ByVal sender As Object,_ByVal e As [Link])
End Sub
</script>
Code C#
<script runat="server" >
protected void Calendar1_SelectionChanged(object sender, EventArgs e) {}
</script>

2010/2011 [Link] 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 [Link]
<script runat="server" >
Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As [Link])
[Link] = [Link]()
End Sub
</script>

Code C#
<script runat="server" >
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
[Link] = [Link]();
}
</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 [Link] 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 [Link] 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 [Link]
<script runat="server" >
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As [Link])
[Link] = Not [Link]
End Sub
</script>

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

2010/2011 [Link] 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 [Link]
<script runat="server" >
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As [Link])
[Link] = Not [Link]
If Not [Link]([Link]) Then
Dim dateCourante As DateTime = [Link]([Link])
[Link] = dateCourante
[Link] = dateCourante
End If
End Sub
</script>
Code C#
<script runat="server" >
protected void Button1_Click(object sender, EventArgs e)
{
[Link] = ![Link] ;
if ([Link] & ![Link]([Link]))
[Link] = [Link] = [Link]([Link]);
}
</script>

2010/2011 [Link] 63
TP5

UTILISER VISUAL WEB


DEVELOPER

2010/2011 [Link] 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’[Link] 2.0

2010/2011 [Link] 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 [Link] 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 [Link] 67
TP 5 :
Utiliser Visual Web Developer

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


web serveur [Link] 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 [Link] 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 [Link] 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 [Link] 70
TP 5 :
Utiliser Visual Web Developer
 La validation a lieu côté client par un script généré par le contrôle [Link]
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 [Link] 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 [Link] 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 [Link].
 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 [Link] 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 [Link] 74
TP6

ACCÉDER À DES DONNÉES

2010/2011 [Link] 75
TP6 :
Accéder à des données
Objectif

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

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


nouveau contrôle GridView d’[Link].

 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 [Link] 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 [Link]> 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 [Link] 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 [Link] 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 [Link] 79
TP6 :
Afficher des données
 Ouvrez la page [Link] 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 [Link] 80
TP6 :
Afficher des données
 Ouvrez la page [Link] 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 [Link] 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 [Link] 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 [Link] 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 [Link] 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 [Link] 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 [Link] 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 <[Link]#resultat>.
 Affichez la balise active du contrôle GridView. Cochez les options
Activer la pagination, Activer le tri, Activer la sélection.

2010/2011 [Link] 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 [Link] 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 [Link] 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 [Link] 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é[Link]
 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 [Link] 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 [Link] 91
TP7

MASTER PAGE

2010/2011 [Link] 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 [Link] 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 [Link] 93
TP 7:
Master Page
Atelier 1

 Une page maître est un fichier [Link] 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 [Link].
 Placer là où vous souhaitez que le contenu soit modifiable

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


</asp:ContentPlaceHolder>

2010/2011 [Link] 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 [Link] 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 :


[Link].

 Cliquez sur Ajouter

 Ajoutez un autre ContentPlaceHolder et choisir Un id

2010/2011 [Link] 96
TP 7:
Création d'une master page

2010/2011 [Link] 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 [Link] :
 Ajoutez l’attribut MasterPageFile et pointez sur l’url de la page Maître.

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


Inherits= " MasterPage" MasterPageFile="~/[Link]" 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 [Link] 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 [Link] 99
TP 7:
Créer une nouvelle page de contenu Webform

2010/2011 [Link] 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="~/[Link]" %>

2010/2011 [Link] 101


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

 Dans [Link] :
 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 [Link];}
set { [Link]=value; }

2010/2011 [Link] 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 [Link] 103


<%@ Page Title="Page d'accueil" Language="C#"
MasterPageFile="~/[Link]" AutoEventWireup="true"
CodeFile="[Link]" Inherits="_Default" %>
<%@ MasterType VirtualPath="~/[Link]" %>

<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 [Link] 104


TP 7 :
Accéder aux objets de la page maître depuis la page
enfant
 Dans le code Bhind de notre page [Link]
 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
[Link] = [Link] ;
}

2010/2011 [Link] 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 [Link]

 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
[Link] = "je change la valeur de label
de la page maitre ";
}

2010/2011 [Link] 106


TP7 :
Exécuter

2010/2011 [Link] 107


TP7 :
Après Clic sur Get

2010/2011 [Link] 108


TP 7 :
Après Clic sur Set

2010/2011 [Link] 109


TP8

LES CONTRÔLES SERVEUR


DATA-BOUND

2010/2011 [Link] 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 [Link] 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 [Link] 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 [Link] n’hérite pas de page
master

2010/2011 [Link] 113


TP8 :
Les contrôles serveur Data-Bound

2010/2011 [Link] 114


TP8 :
Les contrôles serveur Data-Bound
 Faites un glisser déplacer de la table Client dans le <div > de la
page [Link]
 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 [Link] 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 [Link] 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 [Link] 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 [Link] 118


TP 8:
La Propriété DefaultMode:

Insert Edit Read Only

2010/2011 [Link] 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 [Link]

 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 [Link] 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 [Link]

2010/2011 [Link] 121


TP8 :
d‟avoir l‟affichage dans une page et l‟insertion dans
une autre
 Dans le code la page [Link] ajouter la méthode suivante

protected void DetailsView1_InsertMql(object sender, DetailsViewInsertedEventArgs e)


{
if ([Link] == 1)
{
[Link]("~/[Link]");
}
}

 Ajouter dans Source du Control DetailsVeiw de la page ClientInsert

 OnItemInserted="DetailsView1_InsertMql"

2010/2011 [Link] 122


TP8 :
d‟avoir l‟affichage dans une page et l‟insertion dans
une autre
 Dans le code la page [Link] ajouter la méthode suivante

protected void DetailsView1_CancelMql(object sender, DetailsViewCommandEventArgs e)


{
if ([Link]=="Cancel")
{
[Link]("~/[Link]");
}
}

 Ajouter dans Source du Control DetailsVeiw de la page ClientInsert

 OnItemCommand="DetailsView1_CancelMql "

2010/2011 [Link] 123


TP9

DÉFINITION DES MENUS

2010/2011 [Link] 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 [Link] 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 [Link] 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 [Link] 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 [Link] 128


TP 9 :
Source de données

Double cliquez sur [Link] 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 [Link] 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 [Link] 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 [Link] 131


TP 9 :
Le contrôle TreeView
 Double clique sur la page [Link] 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 [Link] 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 [Link] 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 [Link] 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 [Link] 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 [Link] 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 [Link] 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 ([Link]).

 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 [Link] 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 [Link] 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 [Link] 139


A suivre …

Vous aimerez peut-être aussi