Coach Web Dev Atelier 04

Microsoft France Tutorial Dcouverte de ASP.NET 2.
0
< Atelier 4 />
Afficher et manipuler des donnes
Microsoft Afficher et manipuler des donnes Atelier 4
Sommaire
1 INTRODUCTION...........................................................................................................................................................3
2 SE CONNECTER UNE SOURCE DE DONNES..................................................................................................7
3 AFFICHER DES DONNES.......................................................................................................................................12
4 METTRE JOUR DES DONNES...........................................................................................................................34
5 AMLIORER LES PERFORMANCES AVEC LA DPENDANCE DE CACHE...............................................60
6 POUR ALLER PLUS LOIN.....................................................................................................................................66
7 RENDE!VOUS DANS LE PROCHAIN ATELIER............................................................................................67
Automne 2005 Tutorial Dcouverte de ASP.NET 2.0 Page 2 sur 67
1 Introduction
Cet atelier s'inscrit dans le cadre du tutorial de dcouverte de ASP.NET 2.0 dont l'objectif est la construction
d'une application web pas pas.
Les exercices de l'atelier 4 prsentent les nouveaux contrles de donnes de ASP.NET 2.0.
1.1 Contexte fonctionnel
Rappel du contexte fonctionnel du Tutorial de dcouverte de ASP!"T #$
L'objectif du tutorial est de construire pas pas un site web de petites annonces (type bonnes affaires)
proposant des services de :
dpt d'une annonce en ligne.
consultation de toutes les annonces publies.
gestion du compte des utilisateurs du site qui souhaitent slectionner des annonces et
revenir rgulirement sur la consultation de leur slection.
L'adresse de ce site fictif serait http://www.affairessansrisque.fr .
Pour ceux %ui nous re&oindraient maintenant'
.o en tions-nous la fin de l'atelier prcdent ?
L'atelier 3, A&outer la navi(ation, a permis de brancher les lments de navigation de l'application web :
Rcuprez les fichiers de solution de l'atelier prcdent dans le rpertoire )Atelier 4)*marra(e.
+ontexte fonctionnel de l,atelier 4 dans le cadre du Tutorial
L'objectif est de construire des pages de gestion des annonces publies sur notre application web
AffairesSansRisque.
Vous allez travailler avec une base de donnes existante de type SQL Server, appele AffairesSansRis%ue
et dont voici le schma :
ndicateur du
chemin de la
page en cours
dans la
hirarchie du
menu. Menu de type
treevie- avec
exploration
dynamique des
sous niveaux de
menu.
Barre de menu horizontale dans le pied de page
On distingue plusieurs besoins :
1. Consultation des annonces :
Cette fonctionnalit est accessible par tout le monde.
Vous allez mettre en place plusieurs formats de consultation :
Consultation d'une liste des annonces publies par rgion.
Consultation d'une liste des annonces et des publications associes dans les journaux.
Format d'une
annonce.
Choix de la rgion
2. Mise jour des annonces :
Cette fonctionnalit concerne uniquement les administrateurs du site.
Vous allez leur mettre disposition une liste complte des annonces :
et leur donner la possibilit d'diter le dtails d'une annonce dans une fentre spare :
Publications de
l'annonce publie par
Valrie Dupont.
3. Publication d'une nouvelle annonce :
Cette fonctionnalit concerne uniquement les utilisateurs authentifis dans l'application (l'authentification
sera mise en place dans l'atelier suivant).
Vous allez construire un formulaire de saisie d'une nouvelle annonce :
1.2 Contexte technique
ASP.NET 2.0 fournit un nouveau type de contrles d'accs aux donnes qu'on appelle des contrles Source
de donnes, qui permet de relier trs simplement, notamment en mode dclaratif, une source de donnes
des contrles d'affichage graphique avancs.
A la fin de cet atelier, vous saurez comment :
Etablir une connexion sur une source de donnes SQL Server Express avec Visual Web
Developer Express Edition.
Utiliser le nouveau contrle Source de donnes SqlDataSource (le contrle
ObjectDataSource est explicit l'occasion de l'atelier 6 traitant de la gestion des profils
utilisateurs).
Utiliser les nouveaux contrles d'affichage GridView, DetailsView et FormView.
Mettre en ouvre la technique de cache SqlCacheDependency de ASP.NET 2.0.
Cet atelier se base sur l'utilisation de SQL Server 2005 Express Edition. Vous pouvez vous rfrer la
procdure d'installation jointe ce tutorial pour les dtails sur le tlchargement et l'installation du produit.
La solution de cet atelier est disponible dans le rpertoire )Atelier 4)Solution.
Les fichiers utiles, auxquels font rfrence les exercices sont disponibles dans le rpertoire Atelier
4).ichiers utiles.
# Se connecter / une source de donnes
Dans cet exercice, vous allez apprendre :
- Ajouter une base de donnes une application web.
- Utiliser les outils de Visual Web Developer pour se connecter la base de donnes de l'application et
en manipuler la dfinition et le contenu.
Objectif
L'objectif de cet exercice est d'ajouter la base de donnes notre projet web et de crer une connexion vers
cette base de donnes en utilisant l'Explorateur de bases de donnes de Visual Web Developer.
Contexte fonctionnel
La base de donnes, AffairesSansRis%ue, est de type SQL Server et vous est fournie dans le rpertoire
)Atelier 4).ichiers utiles. L'objectif est d'tablir une connexion sur cette base de donner en vue de
l'attacher au moteur SQL Server Express, et de prendre connaissance de son contenu.
Droulement de l'exercice :
1. Ouvrez le projet prcdent ralis lors de l'atelier 3 :
Menu .ichier > 0uvrir le site -e1.
Retrouvez le chemin du rpertoire AffairesSansRis%ue que vous avez utilis lors de
l'atelier 3 ou, si vous n'avez pas fait l'atelier prcdent, rcuprez le projet de solution dans
le rpertoire : )Atelier 4)*marra(e)AffairesSansRis%ue.
2. Crez un nouveau dossier dans votre application web appel App_Data :
Faites un clic droit sur la racine du projet dans l' "xplorateur de solutions > A&outer un
dossier > *ossier App2*ata.
App2*ata est l'un des nouveaux rpertoires spciaux de ASP.NET 2.0 (comme App_Themes vu
l'atelier 2). En effet, il suffit de dposer le fichier de la base de donnes dans ce rpertoire et ASP.NET
s'occupera pour vous d'attacher dynamiquement la base de donnes SQL Server (si elle l'est dj, il se
contente d'utiliser celle en place).
3. Rcuprez la base de donnes existante dans le rpertoire ..Atelier 4\Fichiers utiles :
Faites un copier des fichiers AffairesSansRis%ue2*atamdf et
AffairesSansRis%ue2*ata2lo(ldf depuis le rpertoire Atelier 4).ichiers utiles de
l'explorateur Windows.
Coller les fichiers sous le rpertoire )AffairesSansRis%ue)App2*ata cr au point 2.
4. Affichez l'explorateur de source de donnes de Visual Web Developer :
Menu Afficha(e > "xplorateur de 1ases de donnes.
5. Crez une nouvelle connexion avec les outils de bases de donnes de Visual Web Developer :
Faites un clic droit sur +onnexion de donnes > A&outer une connexion'
Dans la bote A&outer une connexion, slectionner le fournisseur .ichier de 1ase de
donnes 3icrosoft S45 Server 6S%l+lient7. Si ce n'est pas le cas par dfaut, cliquez sur
3odifier puis dans la bote 3odifier la source de donnes8 slectionnez la source .ichier
de 1ase de donnes 3icrosoft S45 Server.
Toujours dans la bote A&outer une connexion, cliquez sur Parcourir et pointez sur le
fichier AffairesSansRis%ue2*atamdf que vous avez copi dans le rpertoire App_Data au
point 3.
Testez la connexion avec le bouton Tester la connexion pour vrifier que la connexion est correcte.
Cliquez sur 09 pour ajouter la connexion au projet.
Cocher cette option pour garder cette slection par dfaut
pour une prochaine connexion.
Changer les paramtres de
connexion au serveur si
besoin selon le mode de
scurit avec lequel vous
travaillez sur votre serveur
SQL.
Observez la connexion ajoute l'"xplorateur de 1ases de donnes de Visual Web Developer. Vous
pouvez consulter tous les lments de la base (tables, vues, etc.), afficher leur description (clic droit >
0uvrir la dfinition de.), consulter les donnes (clic droit > Afficher les donnes de .), en crer de
nouveaux etc.
Juste pour conclure.En fait, depuis l'Explorateur de solutions, si vous aviez double cliqu sur
AffairesSansRis%ue2*atamdf dans le rpertoire App2*ata, Visual Web Developer vous aurait
automatiquement ouvert son "xplorateur de 1ases de donnes et vous aurait crer automatiquement la
connexion vers le fichier. Quand nous vous disions que ce rpertoire App2*ata n'est pas un rpertoire
comme les autres.
Faites un clic droit sur AffairesSansRis%ue2*atamdf > Renommer et renommer la
connexion : AffairesSansRis%ue.
Faites un clic droit sur la table Annonces > Afficher les donnes de la ta1le pour vrifier
que la source de donnes contient dj des annonces publies.
Note :
: Afficher des donnes
- Utiliser le contrle de source de donnes SqlDataSource.
- Afficher les donnes d'une table dans des contrles DropDownList, DataList et GridView.
- Lier les affichages des contrles entre eux.
Objectif
L'objectif de cet exercice est d'afficher des donnes dans des pages web en utilisant le nouveau contrle
source de donnes SqlDataSource et les contrles d'affichage lis. Vous allez voir qu'avec ces nouveaux
contrles, afficher les donnes d'une table dans une page web devient plus simple que jamais.
L'application doit tout d'abord proposer une liste des annonces publies sur le site.
- Pour lui permettre de trouver plus rapidement les annonces le concernant, l'utilisateur slectionne une
rgion (on pourrait imaginer d'autres critres de slection bien sr) et obtient la liste des annonces
correspondantes :
- Pour illustrer une relation du type Commandes/Lignes de commandes , vous allez proposer
galement l'utilisateur une liste des annonces et des publications associes :
Format d'une
annonce.
Publications de
l'annonce publie par
Valrie Dupont.
3.1 Lister les annonces par rgion (DropDownListDataList!
+onstruction de la liste des r(ions
La premire tape consiste dessiner une liste droulante peuple avec la liste des rgions.
1. Ouvrez la page +onsulterAnnoncesParRe(ionaspx en mode *esi(n.
2. Configurez une source de donnes vers la table Re(ions de la base AffairesSansRis%ue :
Faites un glisser dplacer sur le contrle +ontent1 de la ;o<te / outils > rubrique *onnes
> S%l*ataSource.
Faites un clic droit sur le contrle > Proprits et renommez le contrle : dsRe(ions.
Remarquez que le contrle contient une proprit +onnectionStrin( qui va contenir la chane de
connexion la base de donnes et que pour l'instant elle est vide.
Slectionnez le contrle pour faire apparatre sa balise active (ou clic droit sur le contrle >
Afficher la balise active).
Cliquez +onfi(urer la source de donnes'
Dans la fentre +hoisir votre connexion de donnes, cliquez la liste droulante et
retrouvez la connexion dfinie l'exercice 2 prcdent : AffairesSansRis%ue.
Cliquez sur +ha<ne de connexion pour observer la chane de connexion associe :
Regardons d'un peu plus prt cette chane de connexion :
- Vous voyez que la Source est le moteur SQL Server Express Edition. Le nom de celui-ci est
)S45"=PR"SS car SQL Express s'installe par dfaut comme une instance nomme sur la machine
d'o ce format du type <nom de la machine>\<nom de l'instance nomme>.
- Attach*1.ilename contient le chemin complet de la base de donnes attacher au moteur SQL
Server. Tout le problme est que ce chemin peut tre amen changer frquemment, par exemple
lorsque vous dploierez l'application sur un serveur de production. Pour rappel, nous avons plac notre
fichier dans le rpertoire spcial App2*ata de notre application web l'exercice 2 prcdent. l suffit
donc d'indiquer >*ata*irector?><nom du fichier mdf> pour que le runtime ASP.NET 2.0 sache o le
retrouver. En prime, il va s'occuper pour nous d'attacher la base de donnes dynamiquement au moteur
SQL Server Express.
Cliquez sur Suivant.
Dans la fentre "nre(istrer la cha<ne de connexion dans le fichier de confi(uration de
l,application, cliquez 0ui8 enre(istrer cette connexion en tant %ue et renommez la
chane : csAffairesSansRis%ue.
Dans la fentre +onfi(urer l,instruction Select, cliquez Spcifie@ les colonnes d,une
ta1le ou d,une vue et choisissez la table Re(ions dans la liste droulante.
Slectionnez tous les champs de la table :
Dans la fentre Tester la re%uAte, cliquez le bouton Tester la re%uAte pour la valider.
Cliquez sur Terminer.
3. Sauvegardez la page +onsulterAnnoncesParRe(ionaspx.
4. Affichez le fichier Web.config.
Notez qu'une nouvelle cl a t gnre dans la section <connectionStrin(s> pour la chane de
connexion que vous venez de paramtrer. La chane de connexion est donc trs facilement modifiable en
cas de besoin et ce mme (et surtout) par le futur Administrateur de votre application web (qui n'aura pas
ncessairement de connaissances ASP.NET).
5. Ouvrez la page +onsulterAnnoncesParRe(ionaspx en mode Source.
nstruction SELECT
gnre sur la base des
lments slectionns.
Options avances pour
gnrer notamment les
autres requtes CRUD
vers la base de
donnes.
Option pour travailler
avec une procdure
stocke (c'est
videmment mieux) ou
affichez le Gnrateur
de requte de VWD.
Remarquez le chargement dynamique de la chane de connexion partir de la nouvelle cl gnre
dans le fichier de configuration de l'application. La syntaxe est simple :
<BC +onnectionStrin(s D<nom de la cl dans le fichier Ee1confi(> B>.
L'attribut Select+ommand contient les informations pour la requte S"5"+T sur la base de donnes.
6. Basculez la page en mode *esi(n.
7. Dessinez maintenant un contrle pour afficher les rgions dans une liste droulante :
Faites un glisser dplacer sur le contrle +ontent1 de la ;o<te / outils > rubrique Standard
> *rop*o-n5ist.
Slectionnez le contrle et cliquez sur sa balise active > +hoisir une source de donnes.
Dans la fentre +hoisir une source de donnes, slectionnez la source de donnes
dsRe(ions cre prcdemment.
Paramtrez l'affichage de la liste droulante sur le champ Re(2!om et indiquer Re(2Id
comme tant la donne prendre en compte dans la source de donnes.
Cliquez sur 09.
Basculez en mode Source pour voir les attributs du contrle <asp D*rop*o-n5ist> gnr
par l'assistant que vous venez d'utiliser pour configurer la liste.
9. Excutez la page en faisant un clic droit > Afficher dans le navi(ateur.
Juste pour mmo, vous n'avez pas tap une seule ligne de code..
Le contrle S%l*ataSource (sans quivalence graphique sur la page finale) s'est occup pour vous de faire
la requte SELECT sur la base de donnes partir de l'attribut Select+ommand et de faire la liaison avec
le contrle d'affichage *rop*o-n5ist. C'est l'une des grosses nouveauts en matire d'accs aux donnes
de ASP.NET 2.0.
Le rendu (notamment la couleur de la police de caractres) de la liste droulante est li la description
du contrle DropDownList dans le fichier d'apparence de contrles : )App2Themes)*efault)*efaultsFin.
10. l reste une dernire tape trs importante pour activer le dclenchement d'un aller retour sur le
serveur lorsque l'utilisateur slectionne une valeur dans la liste. En effet, vous avez peut-tre
remarqu lors de l'excution de la page au point 9, qu'une slection dans la liste ne provoquait rien.
C'est le comportement par dfaut du contrle.
Revenez sur la page en mode *esi(n.
Slectionnez le contrle DropDownList1 > clic droit > Proprits.
Changez AutoPost;acF : True (l'option est aussi directement disponible dans la balise
active du contrle DropDownList)
Sauvegardez la page puis relancez l'excution. Vous constatez dans la barre de statut
d'nternet Explorer qu'il y a bien un appel du serveur lorsque vous changez de valeur dans
la liste :
+onstruction de la liste des annonces en fonction de la r(ion slectionne
La seconde tape consiste dessiner une liste sous la forme d'une suite d'enregistrement, peuple avec la
liste des annonces correspondant la rgion en cours (slectionne dans la liste droulante).
1. Configurez une source de donnes vers la table Annonces de la base AffairesSansRis%ue :
> S%l*ataSource.
Faites un clic droit sur le contrle > Proprits et renommez le contrle : dsAnnonces.
Dans la fentre +hoisir votre connexion de donnes, cliquez la liste droulante et
slectionner la mme chane de connexion que prcdemment csAffairesSansRis%ue.
ta1le ou d,une vue et choisissez la table Annonces dans la liste droulante.
Slectionnez tous les champs de la table :
Cliquez sur EG"R".
Dans la fentre Ajouter une clause WHERE, slectionnez :
- Colonne : Re(2Id,
- Oprateur : H,
- Source : +ontrol,
- D de contrle : *rop*o-n5ist1.
Vous tes en train de construire une requte SELECT sur la table Annonces pour ne rapatrier que
celles correspondant une rgion particulire c'est--dire une valeur du champ Re(2Id prcise.
L'assistant vous demande donc o est-ce que ASP.NET pourra trouver ce paramtre Reg_d ? Si vous
ouvrez la liste droulante Source, vous constatez que plusieurs possibilits vous sont offertes (Nous en
explorerons d'ailleurs d'autres l'occasion des prochains exercices).
ci, vous lui dites qu'il trouvera la valeur du paramtre Re(2Id de votre requte dans un +ontrol de la page,
prcisment dans le contrle dont l'D est *rop*o-n5ist1.
Cliquez sur A&outer pour ajouter le paramtre la liste des paramtres de la requte.
Cliquez sur 09.
Cliquez sur Suivant dans la fentre +onfi(urer l,instruction Select prcdente.
La requte est maintenant :
Dans la fentre Tester la re%uAte, cliquez le bouton Tester la re%uAte pour la valider avec
Reg_d = 1 par exemple.
Cliquez sur Terminer.
3. Basculez la page +onsulterAnnoncesParRe(ionaspx en mode Source.
Remarquez le chargement dynamique de la chane de connexion partir de la nouvelle cl gnre
dans le fichier de configuration de l'application. L'attribut Select+ommand contient les informations pour la
requte S"5"+T sur la base de donnes.
Par rapport la source de donnes dsRegions, vous avez galement ici une collection de paramtres
<SelectParameters> qui contient un paramtre de type Control <asp D+ontrolParameter> dont les
caractristiques sont prcises dans les attributs : Propert?!ame indique la proprit du contrle
*rop*o-n5ist1 dans laquelle ASP.NET doit rcuprer la valeur du paramtre.
4. Basculez la page en mode *esi(n.
5. Dessinez maintenant le contrle graphique pour afficher les annonces :
> *ata5ist.
Slectionnez le contrle et cliquez sur sa balise active > +hoisir une source de donnes :
dsAnnonces.
Vous constatez que le contrle *ata5ist est intelligent et interprte la source de donnes dont il connat
le schma. l en extrait le nom des champs afficher pour chaque colonne de la table dfinie dans la
requte SELECT.
Du coup, il gnre un modle simple d'affichage des donnes avec les en-ttes correspondantes aux noms
des colonnes de la table. Vous pouvez retravailler cet affichage via les options Inrateur de proprits et
3odifier les modJles. Remarquez les diffrents type de modles proposs lorsque vous cliquez 3odifier
les modJles :
Voil ce que nous souhaiterions obtenir comme format d'enregistrement :
Collection de
paramtres de la
requte SELECT.
Sparateur entre deux
enregistrements affichs.
Chaque enregistrement est
rpt verticalement sur
toute la page selon ce
modle d'affichage.
Modle en mode d'dition
des enregistrements.
Vous pouvez dessinez
diffremment un
enregistrement sur
deux pour mieux les
faire ressortir.
Nous allons en fait remodeler le modle d'affichage directement dans le source de la page.
6. Basculez la page +onsulterAnnoncesParRe(ionaspx en mode Source.
7. Supprimez tout ce qui se trouve l'intrieur de la balise <ItemTemplate> pour supprimer le modle
gnr par dfaut.
8. Commencez par structurer le modle d'enregistrement avec des balises <div> et des classes
associes :
3odifie@ la 1alise <ItemTemplate> D A&oute@ dans la feuille de st?le *efautcss du thJme *efault D
<temTemplate>
<div id="annonce">
<div id="entete">
</div>
<div id="email">
</div>
</div>
</temTemplate>
/* FORMAT D'UNE ANNONCE */
#annonce
{
margin-top: 2.0em;
background-color: #efeff7;
width:450px;
border-bottom: #738294 thin solid;
display:block;
}
#entete
{
float:left;
}
#email
{
text-align:right;
}
9. Repositionnez les contrles serveur lis aux diffrentes colonnes de la table Annonce l'intrieur de
cette structure en balises <div> comme suit :
<asp:DataList D="DataList1" runat="server" DataKeyField="Ann_d" DataSourceD="dsAnnonces">
<temTemplate>
email entete
annonce
Ann_Email
Ann_Ville (Ann_CodePostal)
Ann_Texte
<div id="annonce">
<div id="entete">
<asp:Label D="Ann_VilleLabel" runat="server" Text='<%# Eval("Ann_Ville") %>'
EnableTheming="false">
</asp:Label>
(<asp:Label D="Ann_CodePostalLabel" runat="server" Text='<%# Eval("Ann_CodePostal") %>'
EnableTheming="false">
</asp:Label>)
</div>
<div id="email">
<asp:Label D="Ann_Email" runat="server" Text='<%# Eval("Ann_Email") %>'></asp:Label>
</div>
</div>
<asp:Label D="Ann_TexteLabel" runat="server" Text='<%# Eval("Ann_Texte") %>'
EnableTheming="false"></asp:Label>
</temTemplate>
</asp:DataList>
Vous avez ici un exemple de la syntaxe utiliser pour effectuer une liaison (databinding) entre un
contrle (<asp :DataList>) et sa source de donnes (DataSourceD= dsAnnonces ) :
<prfixe :balise du contrle proprit=,<BK expression de liaison avec une colonne B>, runat= "server"/>
La ligne <aspD5a1el I*HLAnn2Mille5a1elL runatHLserverL TextHN<BK "val6LAnn2MilleL7 B>N> signifie que
le contrle SqlDataSource nomm dsAnnonces va rcuprer la valeur de la colonne Ann2Mille et la lier la
proprit Text du label Ann2Mille5a1el. Si cette valeur change dans la source de donnes, le contrle
refltera ce changement. Voil pourquoi on dit que le contrle est li la source de donnes.
l faut savoir que vous pouvez utiliser des expressions de liaison dans des contextes varis.
Par exemple comme l'expression d'une condition du type :
ForeColor=
'<%# ((bool)Eval(Ann_OutToDate"))?
Syte!"Dra#$n%"Color"&ray'Syte!"Dra#$n%"Color"(la)*%+'
,a valeur -e ForeColor et &ray $ le ).a!/ -e -onn0e Ann_OutToDate )ont$ent la valeur
vra$e1 (la)* $non"
Autre exemple : des liaisons avec des sources de donnes hirarchiques (type XML) sont galement
supportes ( utiliser par exemple avec un contrle Treeview).
Attention, avec la fonction "val67, la liaison est automatique mais unidirectionnelle, dans le sens de la
source de donnes vers le contrle d'affichage. C'est--dire que ce dernier reflte les changements de la
source mais pas l'inverse. Par contre l'inverse est tout fait possible et c'est ce que nous utiliserons dans
l'exercice de mise jour des donnes, avec la fonction ;ind67 de l'ASP.NET 2.0, qui elle, est
bidirectionnelle !
11. Excutez la page en faisant un clic droit > Afficher dans le navi(ateur. Slectionnez la rgion
Rhone Alpes :
La liaison peut se faire sur diffrentes proprits du contrle.
Vous pourriez ajouter des liens hypertextes en dessous de chaque annonce, tels que envoyer cette
annonce un ami , imprimer cette annonce .etc.
Nous verrons dans l'Atelier 6 sur la gestion des profils utilisateurs, l'ajout d'un tel lien pour Ajouter cette
annonce ma slection .
Note :
3.2 Lister les annonces et la liste "es publications correspon"antes
(Data#ri"Data#ri" $ utilisation "%une &ue!
+onstruction de la liste des annonces dans une (rille
La premire tape consiste dessiner une liste sous la forme d'une grille, peuple avec la liste de toutes les
annonces.
1. Ouvrez la page +onsulterAnnoncesOournauxaspx en mode Design.
2. Ouvrez l'"xplorateur de 1ase de donnes de Visual Web Developer.
3. Faites un glisser dplacer de la table Annonces sur le contrle +ontent1 de la page
ConsulterAnnoncesJournaux.aspx.

On ne pourra pas faire plus simple et plus rapide pour gnrer les contrles S%l*ataSource et
IridMie- associes la table Annonces. Remarquez que la liaison des colonnes dans la grille est en
place.
4. Sauvegardez la page.
5. Lancez l'excution de la page (clic droit sur la page > Afficher dans le navigateur)
L'affichage est horrible mais les donnes sont l.c'est dj pas mal, surtout en ne faisant qu'un
glisser dplacer avec la souris !
6. Retravaillons un peu le format de cette grille et de cette source de donnes :
Basculez la page en mode *esi(n.
Renommez le contrle de source de donnes SqlDataSource en dsAnnonces.
Affichez la balise active du contrle GridView. Dans la liste droulante +hoisisse@ une
source de donnes changez SqlDataSource1 et repointez sur le nouveau nom
dsAnnonces.
Votre manipulation a provoqu un changement marquant pour Visual Web Developer qui vous demande
donc si ce changement de source de donnes veut dire qu'il faut re-gnrer toutes les liaisons de champ
dans la grille. Rpondez oui (juste pour voir comment on va procder pour rcuprer la liaison du contrle
IridMie-1 avec la nouvelle source de donnes)
Pour ractualiser la liaison, choisissez Actualiser le schma dans la balise active du contrle IridMie-1.
Rpondez 0ui la proposition de gnration des colonnes de la grille partir du schma de la source de
donnes.
Affichez la balise active du contrle IridMie-. Cochez les options Activer la pa(ination,
Activer le tri, Activer la slection.
Notez l'apparition sur la grille d'un bouton de slection sur chaque ligne (Activer la slection), une zone
de pagination avec le numro et le nombre des pages en bas gauche de la grille (Activer la pagination), et
l'apparition de liens hypertexte sur les en-ttes de colonne pour autoriser le tri (Activer le tri).
Attention, il ne s'agit pas uniquement ici d'impact sur le graphisme de la grille. Le contrle GridView va
effectivement prendre en charge les actions de pagination, de tri et de slection pour vous sans que vous
ayez besoin de rajouter une seule ligne de code.
Dans la balise active du contrle IridMie-, cliquez 3odifier les colonnes'
Dans la fentre +hamps, supprimez tous les champs SAUF Mille, +ode Postal, "mail et le
champ Slectionner.
Les champs Mille, +ode Postal et "mail sont de type ;ound.ield, c'est- -
dire que ce sont des colonnes lies aux champs de la table Annonces par une
liaison du type de celle vue au point 9 du 3.1.
Le champ Slectionner est de type +ommand.ield, c'est--dire qu'il va
gnrer un bouton de commande lier l'action de slection sur un
enregistrement. Vous pouvez aussi gnrer des boutons pour les actions de
suppression et modification si vous souhaitez travailler sur la grille en dition.
Fermer la bote en cliquant sur 09.
Le contrle +ontent1 en mode *esi(n contient maintenant :
Basculez la page en mode Source pour voir le flux correspondant :
Renomme@ les enP
tAtes de cha%ue
colonne
Changez l'ordre des
colonnes avec les
boutons.
Bouton pour supprimer les
colonnes slectionnes.
Notez les types de
champs disponibles.
Notez les attributs du contrle <asp DIridMie-> :
- Allo-Pa(in( et Allo-Sortin( qui activent respectivement la pagination et le tri.
- *ataSourceI* qui lie le contrle IridMie- au contrle de source de donnes.
- AutoIenerate+olumns qui dsactive la gnration automatique des colonnes l'excution partir des
champs de la base. En effet, nous avons dcid de n'afficher que certaines d'entre elles, prcises dans
la balise <+olumns>.
- *ata9e?!ames qui dfinit la colonne reprsentant la cl primaire de l'enregistrement dans la base (l'D
de l'annonce).
Le contrle contient ensuite une collection de colonnes dans la balise <+olumns>. On retrouve les
colonnes ;ound.ield et +ommand.ield que vous avez dfinies avec l'assistant. Vous remarquez que
l'expression de liaison avec la fonction Eval() est implicite pour les contrles <asp D;ound.ield>. On se
contente d'indiquer un en-tte de colonne dans l'attribut GeaderText et le nom du champ de liaison dans la
source de donnes dans *ata.ield.
Ajoutez l'D d'apparence ta1le3aitre au contrle GridView pour faire rfrence au
formatage du contrle inclus dans votre fichier d'apparence :
Reportez vous au fichier d'apparence )App2Themes)*efault)*efaultsFin pour observer
la dfinition du contrle :
*finition dans le fichier d,apparence *efaultsFin *finition dans la feuille de st?le
Une grille contient de multiples proprits d'affichage que nous vous invitons explorer (HeaderStyle,
FooterStyle, EditRowStyle etc.). Vous pouvez galement utiliser un format automatique partir de la balise
active du contrle GridView > mise en forme automati%ue '
Pour apprendre, vous pouvez appliquer des formats automatiques titre d'exemple pour observer
quelles proprits du contrle sont utilises pour donner ce rendu.
Regardez la dfinition du contrle de source de donnes dsAnnonces :
L'action de glisser dplacer que vous avez faite de la table Annonces sur la page a provoqu la
gnration de l'objet S%l*ataSource avec l'ensemble des commandes NSERT, UPDATE, DELETE et
Collection des
paramtres de
la requte
UPDATE.
Bordure de la
grille.
Surligne l'enregistrement
slectionn en cours.
SELECT. Ne gardez que la dfinition de la commande SELECT, puisque nous allons nous contenter pour
l'instant d'afficher les donnes dans la page (nous verrons l'utilisation de la grille en dition dans le
suivant).
De mme, le glisser dplacer peut provoquer la cration d'une nouvelle chane de connexion, par
exemple appele AffairesSansRis%ue2*ata+onnectionStrin(1. Supprimez-la dans le fichier Ee1confi(
et renommez les attributs +onnectionStrin( et Provider!ame en utilisant la chane
csAffairesSansRis%ue que vous aviez dj dfinie au 2.
Sauvegardez la page +onsulterAnnoncesOournauxaspx et excutez-la dans E.
Remarquez que lorsque vous slectionnez une ligne en cliquant sur Slectionner dans la colonne de
gauche, vous provoquez un aller retour sur le serveur (PostBack). Nous allons maintenant rpondre cet
appel et branchez l'affichage de tous les journaux dans lesquels cette annonce est publie.
+onstruction de la liste des pu1lications des annonces
La seconde tape consiste dessiner une liste des journaux correspondant l'annonce slectionne dans
le tableau des annonces.
1. Ouvrez la page +onsulterAnnoncesOournauxaspx en mode Design.
2. Faites un glisser dplacer de la Bote outils > rubrique *onnes > S%l*ataSource dans
+ontent1.
3. Renommez le en : dsOournaux.
4. Cliquez sur la balise active > +onfi(urer la source de donnes.
5. Dans la fentre +hoisir votre connexion de donnes, slectionnez csAffairesSansRis%ue puis
cliquez sur Suivant.
6. Dans la fentre +onfi(urer l,instruction Select, slectionnez la vue 5isteOournauxParAnnonce
dans la liste droulante et cochez tous les champs.
Ligne
slectionne.
7. Cliquez sur WHERE.
8. Dans la fentre A&outer une clause EG"R", slectionnez le paramtre An2Id que vous allez
rcuprer du contrle IridMie-1.
9. Cliquez sur A&outer. L'instruction SELECT est maintenant :
10. Terminez l'assistant de configuration de la source de donnes.
11. Basculez la page en mode Source.
Vous obtenez un contrle <asp D+ontrolParameter> de nom Ann2Id dans la collection des
paramtres de la requte SELECT, pointant sur la SelectedMalue de la grille IridMie-1.
<asp:SqlDataSource D="dsJournaux" runat="server"
ConnectionString="<%$ ConnectionStrings:csAffairesSansRisque %>"
SelectCommand="SELECT * FROM [ListeJournauxParAnnonce] WHERE ([Ann_d] = @Ann2Id)">
<SelectParameters>
<asp:ControlParameter ControlD="IridMie-1" Name="Ann2Id"
PropertyName="SelectedMalue"
Type="nt32" />
</SelectParameters>
</asp:SqlDataSource>
Mais comment ASP.NET 2.0 fait-il le lien entre la ligne SelectedMalue de la grille et prcisment la
colonne Ann2Id qui nous intresse ?
Rappelez-vous, lors de la dfinition de la grille, vous aviez constat que le contrle IridMie-1 possdait
entre autres un attribut *ata9e?!ames indiquant qu'elle tait la colonne qui faisait office de cl pour un
enregistrement, c'est--dire Ann2Id.
12. l ne vous reste plus qu' dessiner une autre grille pour afficher les donnes de journaux. Faites un
glisser dplacer sur la page en design d'un contrle IridMie-.
13. Paramtrez sa source de donnes sur dsOournaux.
14. Modifiez les colonnes pour ne garder que Oou2Pu1lication, Oou2Tira(e, Oou25imite*epot et
Oou2Parution. Renommez les en-ttes de colonne.
15. Basculez la page en mode Source et rajoutez la dfinition de la grille l'attribut
SFinIdH Q ta1le*etails R faisant rfrence la seconde dfinition de contrle <asp :GridView> dans
votre fichier d'apparence de contrles.
Vous devez obtenir :
<asp:GridView SFinI*HLta1le*etailsL D="GridView2" runat="server" AutoGenerateColumns="False"
DataSourceD="dsJournaux">
<Columns>
<asp:BoundField DataField="Jou_Publication" HeaderText="Publication"
SortExpression="Jou_Publication" />
<asp:BoundField DataField="Jou_Tirage" HeaderText="Tirage" SortExpression="Jou_Tirage" />
<asp:BoundField DataField="Jou_LimiteDepot" HeaderText="Limite dpt"
SortExpression="Jou_LimiteDepot" />
<asp:BoundField DataField="Jou_Parution" HeaderText="Parution" SortExpression="Jou_Parution"
/>
</Columns>
</asp:GridView>
16. Sauvegardez puis relancez l'excution de la page.
17. Slectionnez une annonce dans le premier tableau pour observer l'affichage contextuel du second :
Note :
4 3ettre / &our des donnes
- Afficher des donnes dans un contrle DetailsView.
- Mettre jour des donnes dans la base de donnes partir du contrle DetailsView.
- nsrer des donnes partir d'un contrle FormView.
- Utiliser une procdure stocke dans un contrle SqlDataSource.
Objectif
L'objectif de cet exercice est de mettre en ouvre les techniques d'insertion et de mise jour des donnes en
utilisant les contrles d'accs aux donnes de ASP.NET 2.0 et une procdure stocke.
Vous allez construire une page AdministrerAnnoncesaspx contenant une liste pour les administrateurs
qui souhaitent pouvoir faire des changements sur les donnes des annonces publies sur le site. Cette liste
prsente une colonne *tails' pour afficher les dtails d'une annonce en lecture et dition.
En cliquant sur dtails pour une annonce particulire, vous prsentez l'administrateur une page distincte,
nomme *etailsAnnonceaspx contenant tous les champs de l'annonce. Ceux-ci peuvent tre consults en
lecture :
ou modifis grce un mode d'dition (vous brancherez galement la suppression) :
Affichage du
nom plutt que
la cl trangre
(dem pour
catgorie).
La colonne *tails
redirige l'utilisateur
sur une autre page
contenant les dtails
de l'annonce choisie.
Bouton pour revenir la
liste des annonces.
Enfin, vous allez crer une page *iffuserAnnonceaspx pour crer une nouvelle annonce sur le site partir
d'un nouveau contrle ASP.NET 2.0 formulaire .ormMie- et en utilisant une procdure stocFe pour la
requte d'insertion sur la base de donnes.
'.1 (")inistrer les annonces (#ri"*iewDetails*iew!
Afficha(e de la liste des annonces dans une (rille
La premire tape consiste reprendre la construction de la liste de toutes les annonces telle que vous
l'avez implmente l'exercice 3.2. Vous allez ajouter une nouvelle colonne ( la place de la colonne
Slectionner) de type lien hypertexte qui permettra d'appeler une page contenant le dtails de l'annonce
slectionne.
Affichage d'une
liste droulante
permettant de
choisir parmi la
liste des rgions
(idem pour
Catgorie)
A notez que vous pourriez videmment faire le choix d'afficher le dtails de l'annonce en cours sur la
mme page. Nous avons choisi cette mthode sur deux pages pour illustrer le type de colonne
G?per5inF.ield du contrle IridMie- qui utilise la liaison de donnes (databinding) pour passer un
paramtre dans l'url du lien.
1. Rcuprez le design de la liste des annonces tabli l'exercice 3.2 :
Ouvrez la page +onsulterAnnoncesOournauxaspx en mode *esi(n.
Slectionnez les deux contrles dsAnnonces et IridMie-1 en maintenant la touche +TR5
enfonce > clic droit > +opier.
Ouvrez la page AdministrerAnnoncesaspx en mode *esi(n.
Coller les deux contrles dans +ontent1.
2. Affichez la page dans le navigateur pour valider que la grille fonctionne.
3. Supprimez la colonne Slectionner et crez une nouvelle colonne intitule *tails, pointant sur une
page de dtails (que vous ferez dans la seconde partie de l'exercice) :
Afficher la page AdministrerAnnoncesaspx en mode *esi(n.
Slectionnez le contrle IridMie- > sa 1alise active > 3odifier les colonnes.
Supprimez la colonne Slectionner de type +ommand.ield en cliquant .
Cliquez sur 09 pour fermer la fentre +hamps.
Slectionnez le contrle IridMie- > sa 1alise active > A&outer une nouvelle colonne.
Dans la fentre A&outer un champ :
- Choisissez le type de champ :
G?per5inF.ield
Ce type de champ cr un lien hypertexte vers
une autre url (notre page Dtails justement).
- Texte de l'en-tte de la colonne dans la grille :
*tails
- Spcifiez le texte du lien hypertexte :
*tails'
- Spcifiez l'url du lien hypertexte :
*etailsAnnonceaspx SI*HT$U
o {0} indique un paramtre variable
bas sur le champ : Ann2Id.
Basculez la page en mode Source pour observer la
structure de le nouvelle colonne dans la collection <Columns> du contrle <asp :GridView> :
Sauvegardez la page AdministrerAnnoncesaspx.
4. Crez une nouvelle page *etailsAnnonceaspx, vierge pour l'instant :
Faites un clic droit sur le rpertoire du projet dans l'"xplorateur de solutions > A&outer un
nouvel lment'
Slectionnez le modle .ormulaire Ee1 et cochez les deux cases cocher. Nommez la
page : *etailsAnnonceaspx puis cliquez sur A&outer.
Dans la fentre Slectionner une pa(e ma<tre, cliquez sur votre page 3asterPa(emaster
puis sur 09.
5. Excutez la page AdministrerAnnoncesaspx.
6. Cliquez sur la colonne *tails pour un enregistrement en particulier.
Afficha(e du dtail d,une annonce
La seconde tape consiste construire la page de dtails de l'annonce en utilisant le nouveau contrle de
ASP.NET 2.0 *etailsMie-. Vous allez galement activer le mode d'dition de celui-ci de faon mettre en
oeuvre la mise jour des caractristiques de l'annonce.
1. Ouvrez la page *etailsAnnonceaspx en mode Design.
2. Configurez une source de donnes vers la table Annonces de la base AffairesSansRis%ue :
> S%l*ataSource.
Faites un clic droit sur le contrle > Proprits et renommez le contrle : dsAnnonce.
Dans la fentre +hoisir votre connexion de donnes, slectionnez
csAffairesSansRis%ue puis cliquez sur Suivant.
ta1le ou d,une vue et choisissez la table Annonces dans la liste droulante.
Slectionnez tous les champs de la table.
Regardez la
construction de
l'url dynamique
avec le
paramtre
contenant l'D
de l'annonce
slectionne.
Cliquez sur le bouton EG"R".
Dans la fentre Ajouter une clause WHERE, slectionnez :
- Colonne : Ann2Id,
- Oprateur : H,
- Source : 4uer?Strin(,
- Champ QueryString : I*.
Vous tes en train de construire une requte SELECT sur la table Annonces pour ne rapatrier que
celle dont l'identifiant correspond la valeur passe en paramtre l'url de la page appelante.
En effet, rappelez-vous l'url que vous avez dfinie prcdemment pour la colonne Dtails de la grille dans la
page AdministrerAnnonces.aspx :
*etailsAnnonceaspx SI*HT$U oV T$U contient la valeur de Ann2Id.
La rcupration d'un paramtre dans une url se fait grce la mthode 4uer?Strin( de l'objet Re%uest.
DetailsAnnonce.aspx ?I*={0}
o {0} contient la valeur de Ann_d
Cliquez sur A&outer pour ajouter le paramtre la liste des paramtres de la requte.
Cliquez sur 09.
Vous tes maintenant de retour dans la fentre +onfi(urer l,instruction Select. Cliquez
sur le bouton 0ptions avances'
Cochez Inrer des instructions I!S"RT8 WP*AT" et *"5"T" puis cliquez sur 09.
Notez que vous pouvez galement choisir le mode de gestion des conflits en cas de mise jour et
destruction sur la base. Si vous choisissez l'accs concurrentiel optimiste, cela gnre un attribut
ConflictDetection= CompareAllValues sur le contrle SqlDataSource qui mmorisera chaque valeur
initiale du champ pour pouvoir faire une comparaison au retour dans la base.
Dans la fentre +onfi(urer l,instruction Select, cliquez sur Suivant.
Dans la fentre Tester la re%uAte, cliquez sur Terminer.
Basculez la page en mode Source pour voir le flux gnr :
<asp:SqlDataSource D="dsAnnonce" runat="server"
Select+ommand="SELECT * FROM [Annonces] WHERE ([Ann_d] = @Ann_d)"
*elete+ommand="DELETE FROM [Annonces] WHERE [Ann_d] = @original_Ann_d"
Insert+ommand="NSERT NTO [Annonces] ([Ann_Texte], [Ann_Telephone], [Ann_Email],
[Ann_Prix], [Ann_Ville], [Ann_CodePostal], [Ann_UserEmail], [Reg_d], [Cat_d]) VALUES
(@Ann_Texte, @Ann_Telephone, @Ann_Email, @Ann_Prix, @Ann_Ville, @Ann_CodePostal,
@Ann_UserEmail, @Reg_d, @Cat_d)"
Wpdate+ommand="UPDATE [Annonces] SET [Ann_Texte] = @Ann_Texte, [Ann_Telephone]
= @Ann_Telephone, [Ann_Email] = @Ann_Email, [Ann_Prix] = @Ann_Prix, [Ann_Ville] =
@Ann_Ville, [Ann_CodePostal] = @Ann_CodePostal, [Ann_UserEmail] = @Ann_UserEmail,
[Reg_d] = @Reg_d, [Cat_d] = @Cat_d WHERE [Ann_d] = @original_Ann_d">
<SelectParameters>
<asp:QueryStringParameter Name="Ann_d" QueryStringField="D" Type="nt32" />
</SelectParameters>
<*eleteParameters>
<asp:Parameter Name="original_Ann_d" Type="nt32" />
</DeleteParameters>
<WpdateParameters>
<asp:Parameter Name="Ann_Texte" Type="String" />
<asp:Parameter Name="Ann_Telephone" Type="String" />
<asp:Parameter Name="Ann_Email" Type="String" />
<asp:Parameter Name="Ann_Prix" Type="String" />
<asp:Parameter Name="Ann_Ville" Type="String" />
<asp:Parameter Name="Ann_CodePostal" Type="String" />
<asp:Parameter Name="Ann_UserEmail" Type="String" />
<asp:Parameter Name="Reg_d" Type="nt32" />
<asp:Parameter Name="Cat_d" Type="nt32" />
<asp:Parameter Name="original_Ann_d" Type="nt32" />
</UpdateParameters>
<InsertParameters>
<asp:Parameter Name="Ann_Texte" Type="String" />
<asp:Parameter Name="Ann_Telephone" Type="String" />
<asp:Parameter Name="Ann_Email" Type="String" />
<asp:Parameter Name="Ann_Prix" Type="String" />
<asp:Parameter Name="Ann_Ville" Type="String" />
<asp:Parameter Name="Ann_CodePostal" Type="String" />
<asp:Parameter Name="Ann_UserEmail" Type="String" />
<asp:Parameter Name="Reg_d" Type="nt32" />
<asp:Parameter Name="Cat_d" Type="nt32" />
</nsertParameters>
Supprimez l'attribut Insert+ommand et l'lment <InsertParameters> puisque l'insertion d'une
nouvelle annonce sera implmente dans le prochain exercice dans une page spare
(DiffuserAnnonce.aspx).
Remarquez le paramtre de la requte SELECT dans la collection <SelectParameters> qui est
reprsent par un lment <asp D4uer?Strin(Parameter> : l'attribut 4uer?Strin(.ield indique le nom du
champ dans la requte rcuprer par ASP.NET. !ame indique le nom du paramtre dans la requte
SELECT.
Remarquez galement les collections <WpdateParameters> et <*eleteParameters> qui contiennent la
dfinition des paramtres des requtes UPDATE et DELETE.
3. Dessinez maintenant le contrle graphique DetailsView pour afficher les champs d'une annonce :
Basculez la page *etailsAnnonceaspx en mode *esi(n.
> *etailsMie-.
Slectionnez le contrle et cliquez sur sa balise active > +hoisir une source de donnes :
dsAnnonce.
Cochez Activer la modification et Activer la suppression.
Vous constatez que le contrle *etailsMie- est intelligent et interprte la source de donnes dont il
connat le schma. l en extrait le nom des champs afficher pour chaque colonne de la table dfinie dans la
requte SELECT.
Du coup, il gnre un modle simple d'affichage des donnes avec les en-ttes correspondantes aux noms
des colonnes de la table.
Comme le contrle dsAnnonce contient des instructions de commande UPDATE et DELETE, il a galement
ajout deux boutons 3odifier et Supprimer dans le bas de page.
4. Dans la balise active du contrle, cliquez sur 3odifier les champs pour remplacer les libells des
champs par des noms plus conviviaux.
Changez la proprit GeaderText des champs slectionns.
Affichage par dfaut des
champs et du label.
Par exemple, vous pouvez saisir :
!om du champ GeaderText
Ann_d d de l'annonce :
Ann_Texte Texte de l'annonce :
Ann_Telephone N de tlphone :
Ann_Email Adresse de messagerie :
Ann_Ville Ville :
Ann_CodePostal Code Postal :
Ann_Prix Montant :
Ann_UserEmail @ Utilisateur du site :
Reg_d Rgion :
Cat_d Catgorie :
5. Sauvegardez la page *etailsAnnonceaspx.
6. Excutez AdministrerAnnoncesaspx dans E et slectionnez une ligne puis *tails' pour
excuter la page *etailsAnnonceaspx.

Vous constatez que la page est bien formate. Le contrle *etailsMie- est en effet dfini dans le fichier
d'apparence avec la reprsentation suivante :
*ans le fichier *efaultsFin D *ans la feuille de st?le
*efautcss D
Un contrle *etailsMie- contient de multiples proprits d'affichage tout comme le GridView
(HeaderStyle, FooterStyle, RowStyle, EditRowStyle etc.). Vous pouvez galement utiliser un format
automatique partir de la balise active du contrle > mise en forme automati%ue '
Vous pourriez activer le mode d'dition par dfaut sur le contrle DetailsView (pour viter
l'administrateur de cliquer sur le bouton 3odifier) en paramtrant sa proprit *efault3ode "dit.
Cliquez sur 3odifier pour passer en mode dition.
Faites une modification quelconque > 3ettre / &our pour valider les changements.
Testez galement la suppression de l'enregistrement.
7. Ouvrez la page *etailsAnnonceaspx en mode Source pour voir la reprsentation du contrle dans
le flux de la page :
<asp:DetailsView D="DetailsView1" runat="server" AutoGenerateRows="False" DataKeyNames="Ann_d"
DataSourceD="dsAnnonce" Height="50px" Width="125px">
<Fields>
<asp:BoundField DataField="Ann_d" HeaderText="d de l'annonce :" nsertVisible="False"
ReadOnly="True" SortExpression="Ann_d" />
<asp:BoundField DataField="Ann_Texte" HeaderText="Texte de l'annonce :"
SortExpression="Ann_Texte" />
<asp:BoundField DataField="Ann_Telephone" HeaderText="N de tlphone :"
SortExpression="Ann_Telephone" />
<asp:BoundField DataField="Ann_Email" HeaderText="Adresse de messagerie :"
SortExpression="Ann_Email" />
<asp:BoundField DataField="Ann_Prix" HeaderText="Montant :" SortExpression="Ann_Prix" />
<asp:BoundField DataField="Ann_Ville" HeaderText="Ville :" SortExpression="Ann_Ville" />
<asp:BoundField DataField="Ann_CodePostal" HeaderText="CodePostal :"
Configurez
Alternatin(Ro-St?le
pour alterner les styles
un champ sur deux.
SortExpression="Ann_CodePostal" />
<asp:BoundField DataField="Ann_UserEmail" HeaderText="@ Utilisateur du site :"
SortExpression="Ann_UserEmail" />
<asp:BoundField DataField=Reg_d HeaderText="Rgion :" SortExpression="Reg_d"/>
<asp:BoundField DataField="Cat_d" HeaderText="Catgorie :" SortExpression="Cat_d" />
<asp:CommandField ShowDeleteButton="True" ShowEditButton="True" />
</Fields>
</asp:DetailsView>
Amliorer la pa(e de dtail d,une annonce
l vous reste quelques petites manipulations pour amliorer le fonctionnement de cette page de dtails.
La premire consiste faire travailler l'administrateur avec les noms des rgions et des catgories plutt
que leurs D.
La seconde consiste ajouter un bouton au formulaire qui permettrait l'administrateur de revenir la liste
de toutes les annonces sur la page AdministrerAnnoncesaspx.
Pour cela, vous allez convertir les colonnes correspondantes en modle de faon pouvoir les dessiner
votre manire.
1. Changez l'affichage de la zone reprsentant la rgion en suivant la procdure suivante :
Affichez *etailsAnnonceaspx en mode *esi(n.
Slectionnez le contrle *etailsMie-1 > sa balise active > 3odifier les champs
Dans la fentre Champs, slectionnez le champ R(ion et cliquez +onvertir ce champ en
Template.ield pour le rendre disponible la personnalisation.
Cliquez sur 09.
Toujours dans la balise active de *etailsMie-1 > 3odifier les modJles
Cliquez sur la liste droulante Afficher de la balise active du modle pour voir les diffrents
modles proposs :
Notez le changement
d'icne sur le champ.
Basculez en mode Source. La conversion de la colonne en modle a gnr un contrle
<asp DTemplate.ield> la place du <asp :BoundField> initial associ Reg_d, contenant
les modles <ItemTemplate> (lecture seule)8 <"ditItemTemplate> (Edition) :
<asp:TemplateField HeaderText="Rgion :" SortExpression="Reg_d">
<temTemplate>
<asp:Label D="Label1" runat="server" Text='<BK ;ind6LRe(2IdL7 B>'></asp:Label>
</temTemplate>
<EdittemTemplate>
<asp:TextBox D="TextBox1" runat="server" Text='<BK ;ind6LRe(2IdL7 B>'></asp:TextBox>
</EdittemTemplate>
<nserttemTemplate>
<asp:TextBox D="TextBox1" runat="server" Text='<%# Bind("Reg_d") %>'></asp:TextBox>
</nserttemTemplate>
</asp:TemplateField>
Vous constatez que la liaison de donnes, implicite dans un contrle <asp :BoundField>, est par contre
devenue explicite dans le modle avec l'apparition de la fonction ;ind67 directement sur le contrle concern
(Label en lecture seule ou TextBox en dition).
Pour rappel, la fonction Bind() est bidirectionnelle. Elle assure la synchronisation du contrle d'affichage et
de la source de donnes ds qu'un changement se produit sur la donne, que ce soit partir du contrle
d'affichage ou de la source de donnes elle-mme.
Modifiez tout d'abord le modle en lecture seule : <ItemTemplate>. l faudrait que la donne
lie soit Reg_nom plutt que Reg_d. Malheureusement l'information sur le nom de la rgion
n'est pas renvoye dans la requte SELECT que vous avez dfini dans le contrle de
source de donnes dsAnnonce.
l faudrait donc rajouter la requte SELECT une jointure avec les tables Regions et
Categories pour rapatrier galement les noms de rgion et catgorie.
Modifiez l'attribut Select+ommand du contrle <asp DS%l*ataSource> en ce sens comme
suit :
<asp:SqlDataSource D="dsAnnonce" runat="server"

SelectCommand="SELECT Annonces.Ann_d, Annonces.Ann_Texte, Annonces.Ann_Telephone,
Annonces.Ann_Email, Annonces.Ann_Prix, Annonces.Ann_Ville, Annonces.Ann_CodePostal,
Ann_UserEmail, Annonces.Reg_d, Annonces.Cat_d, Re(ionsRe(2!om8 +ate(ories+at2!om FROM
Annonces
I!!"R O0I! +ate(ories 0! Annonces+at2Id H +ate(ories+at2Id
I!!"R O0I! Re(ions 0! AnnoncesRe(2Id H Re(ionsRe(2Id
WHERE (Annonces.Ann_d = @Ann_d)"
.
Supprimez
le modle
d'insertion
(inutile ici)
Vous pouvez maintenant changer la liaison dans le contrle <asp D5a1el> du modle
<ItemTemplate> pour qu'elle lie la proprit Text du contrle la colonne Re(2!om.
<temTemplate>
<asp:Label D="Label1" runat="server" Text='<%# Bind("Re(2!om") %>'></asp:Label>
</temTemplate>
Modifiez maintenant le modle en dition : <"ditItemTemplate>. L'idal serait de proposer
l'administrateur une liste droulante avec tous les noms des rgions existantes.
Pour raliser cela, il va vous falloir dclarer une autre source de donnes avec une requte
SELECT sur la table Regions de faon rapatrier toutes les rgions et dessiner une liste
droulante lie ce contrle de donnes.
Basculez la page *etailsAnnonceaspx en mode *esi(n.
Affichez la balise active du contrle *etailsMie-1 > 3odifier les modJles'
Dans la balise active, slectionnez Afficher : "ditItemTemplate.
Supprimez le contrle Text;ox .
Faites un glisser dplacer de la ;o<te / outils > rubrique *onnes > S%l*ataSource sur le
modle.
Renommez le contrle dsRe(ions.
Dans la balise active du contrle dsRe(ions, slectionnez +onfi(urer la source de
donnes'
Slectionnez ensuite la connexion csAffairesSansRis%ue et cliquez sur Suivant.
Dans la fentre +onfi(urer l,instruction Select, slectionnez la table Re(ions et toutes
les colonnes X.
Le modle
contient une
Textbox par
dfaut.
Cliquez sur Suivant puis Terminer.
Faites un glisser dplacer d'un contrle *rop*o-n5ist sur le modle.
Dans sa balise active, cliquez sur +hoisir une source de donnes' pour le lier la
source dsRe(ions cre prcdemment.
Dans la fentre +hoisir une source de donnes, slectionnez dsRe(ions et paramtrer la
valeur affiche dans la liste sur Re(2!om et la valeur considrer dans la source de
donnes Re(2Id.
Cliquez sur OK.
Dans la balise active de la DropDownList, cliquez sur 3odifier les *ata1indin(s. et
ajoutez ;ind6Q Re(2Id R7 pour la proprit SelectedMalue :
ci, vous indiquez ASP.NET que la liaison devra se faire par rapport la valeur slectionne dans la
liste droulante (SelectedMalue c'est--dire Re(2Id qui est le *ataMalue.ield dans la DropDownList) et que
le champ mettre jour dans la base de donnes globale (dsAnnonce) sera Re(2Id (fonction Bind()).
Cliquez sur 09.
Cliquez sur la balise active > Terminer la modification du modJle.
Basculez en mode Source pour voir le modle <"ditItemTemplate> gnr :
<EdittemTemplate>
<asp:SqlDataSource D="dsRegions" runat="server"
SelectCommand="SELECT * FROM [Regions]">

<asp:DropDownList D="DropDownList1" runat="server"
DataSourceD="dsRegions" DataTextField="Reg_Nom"
DataValueField="Reg_d" SelectedValue='<%# Bind("Reg_d") %>'>
</asp:DropDownList>
</EdittemTemplate>
Sauvegardez la page *etailsAnnonceaspx.
Excutez AdministrerAnnoncesaspx dans E et slectionnez une ligne puis *tails'
pour excuter la page *etailsAnnonceaspx et valider le fonctionnement des modles
+n )o"e lecture seule ,
`-"""-"
---""-"
-
+n )o"e "ition ,
Changez de rgion et cliquez sur 3ettre / &our pour valider que la mise jour fonctionne
via le champ Re(2Id sous-jacent. La nouvelle rgion doit apparatre au retour en mode
lecture de l'annonce.
2. Maintenant re-droulez toute la procdure du point 1 pour la Catgorie.
Pour les plus flemmards d'entre vous .un simple copier coller des modles dans le source devrait
faire l'affaire avec les deux ou trois retouches qui s'imposent pour changer les noms (attention aux contrles
qui doivent avoir un d unique notamment)
<asp:TemplateField HeaderText="+at(orie :" SortExpression="+at2Id">
<temTemplate>
<asp:Label D="5a1el#" runat="server" Text='<%# Bind("+at2!om") %>'></asp:Label>
</temTemplate>
<EdittemTemplate>
<asp:SqlDataSource D="ds+ate(ories" runat="server"
SelectCommand="SELECT * FROM [+ate(ories]"></asp:SqlDataSource>
<asp:DropDownList D="*rop*o-n5ist#" runat="server"
DataSourceD="ds+ate(ories" DataTextField="+at2!om"
DataValueField="+at2Id" SelectedValue='<%# Bind("+at2Id") %>'>
</asp:DropDownList>
</EdittemTemplate>
Testez en excution le bon fonctionnement de la catgorie.

3. Pour terminer, nous allons changer galement le bas de page du contrle *etailsMie- pour ajouter
un bouton (de type lien hypertexte) de retour vers la page AdministrerAnnoncesaspx.
Evidemment, vous pourriez ajouter ce bouton n'importe o sur la page *etailsAnnonceaspx. Mais
histoire de se compliquer un peu la vie , nous allons ici le positionner juste ct des boutons de
commande l'intrieur du contrle *etailsMie-.
Reprenez les tapes prcdentes de manire similaire. Commencez par convertir en
modle le champ +ommand.ield qui contient les boutons de commande.
Vous obtenez une liste
droulante la place d'une
zone de texte.
Affichez le modle ItemTemplate pour y ajouter un bouton.
Faites un glisser dplacer de la ;o<te / outils > rubrique Standard > G?per5inF droite du
bouton Supprimer.
Changez les proprits
i. Text : Retourner / la liste des annonces
ii. NavigateUrl : AdministrerAnnoncesaspx
Dans la balise active > Terminer la modification du modJle.
Basculez en mode Source pour voir le rsultat :
<asp:TemplateField ShowHeader="False">
<temTemplate>
<asp:LinkButton D="LinkButton1" runat="server" CausesValidation="False"
CommandName="Edit" Text="Modifier">
</asp:LinkButton>
Yn1spZ> Yn1spZ
<asp:LinkButton D="LinkButton2" runat="server"
CausesValidation="False" CommandName="Delete" Text="Supprimer">
</asp:LinkButton>
Yn1spZ> Yn1spZ
<aspDG?per5inF I*HLG?per5inF1L runatHLserverL
!avi(ateWrlHLAdministrerAnnoncesaspxL TextHLRetourner / la liste des annoncesL>
</aspDG?per5inF>
</temTemplate>
<EdittemTemplate>
<asp:LinkButton D="LinkButton1" runat="server" CausesValidation="True"
CommandName="Update"
Text="Mettre jour">
</asp:LinkButton>
Yn1spZ>Yn1spZ
<asp:LinkButton D="LinkButton2" runat="server"
CausesValidation="False" CommandName="Cancel" Text="Annuler">
</asp:LinkButton>
</EdittemTemplate>
Suggestion : Nous avons ajout des Yn1spZ>Yn1spZ entre les boutons pour faire apparatre une
petite barre de sparation entre eux.
Sauvegardez la page *etailsAnnonceaspx.
Testez le nouveau bouton en excution (en mode lecture seule).
Pour aller plus loin.
maginons que la liste des annonces dans la page AdministrerAnnoncesaspx soit dpendante d'une
DropDownList, par exemple la liste des rgions comme vous l'avez implment dans le tout premier
exercice de cet atelier.
Dans ce cas, il faudrait que votre bouton HyperLink vous ramne sur la liste en prservant la valeur
contextuelle de la rgion correspondante. En clair, si l'administrateur travaille sur une annonce de la rgion
Rhone Alpes (la meilleure soit dit en passant. ), il serait peut-tre judicieux de le renvoyer sur la liste des
annonces pour cette rgion prcise.
Juste quelques pistes pour implmenter cela :
Cliquez sur la balise active du bouton HyperLink en mode Design > 3odifier les
*ata1indin(s'
Liez la proprit !avi(ateWrl du contrle de la manire suivante :
Eval("Reg_d", "AdministrerAnnonces.aspx?Reg_d={0}")
L'expression de liaison est plus complexe : vous liez la valeur de la proprit !avi(ateWrl du contrle
la colonne Re(2Id. Cependant ce Re(2Id n'est pas valu tel quel ; il n'est en fait qu'un paramtre
(reprsent par {0}) de la chane de caractres globale reprsentant l'url. La proprit NavigateUrl vaut
AdministrerAnnonces.aspx ?Reg_d=<valeur du reg_id de l'annonce en cours dans la source de donnes
dfinie par le SqlDataSource >
Resterait enfin interprter le paramtre Re(2Id dans le chargement de la page
AdministrerAnnonces.aspx pour positionner la liste droulante sur la rgion voulue.
Note :
'.2 Diffuser une annonce (-or)*iew $ utilisation "%une proc"ure
stoc.e!
1. Affichez la page *iffuserAnnonceaspx.
2. Ajoutez un contrle Source de donnes pointant sur la table Annonces et nommez le dsAnnonces.
3. Configurez la source de donnes de faon rcuprer la procdure stocke *iffuserAnnonce pour
la requte NSERT dans la table Annonces.

Attention, le bouton Suivant reste griser si vous ne dfinissez pas une requte SELECT dans l'onglet
SELECT (pourtant inutile ici puisque nous n'allons utiliser que la requte d'insertion sur la base).
l faut savoir galement que sans requte SELECT, lorsque vous dessinerez le contrle d'affichage
FormView sur la page et que vous le lierez votre source de donnes, la gnration automatique des
colonnes du formulaire n'aura pas lieu en mode Design (pour la bonne raison que le Designer se repose sur
les champs retourns par la requte SELECT pour en dduire les champs afficher)...
Basculez la page en mode Source pour voir le contrle S%l*ataSource gnr :
4. Dessinez un contrle FormView sur la page :
Basculez la page en mode Design et faites un glisser dplacer de la ;o<te / outils >
rubrique *onnes > contrle .ormMie- sur +ontent1.
Configurez la source de donnes du contrle sur dsAnnonce cr prcdemment.
Vous pouvez aller consulter cette procdure
stocke partir de votre connexion
AffairesSansRis%ue dans l'explorateur de
bases de donnes de Visual Web Developer.
La commande
NSERT est de type
StoredProcedure et
celle-ci s'appelle
*iffuserAnnonce.
Collection des
paramtres
attendus par la
procdure
stocke.
Paramtrez la proprit *efault3ode du contrle .ormMie- sur Insert pour charger le
formulaire en mode d'insertion au lancement de la page.
Basculez la page en mode Source pour observer le flux du contrle .ormMie- (ne gardez
que le modle <InsertTemplate> puisqu'on n'utilise que le mode insertion) :
<asp:FormView D="FormView1" runat="server" DataKeyNames="Ann_d" DataSourceD="dsAnnonce"
DefaultMode="nsert">
<InsertItemTemplate>
Ann_Texte:
<asp:TextBox D="Ann_TexteTextBox" runat="server" Text='<%# Bind("Ann_Texte") %>'>
</asp:TextBox><br />
Ann_Telephone:
<asp:TextBox D="Ann_TelephoneTextBox" runat="server"
Text='<%# Bind("Ann_Telephone") %>'>
Ann_Email:
<asp:TextBox D="Ann_EmailTextBox" runat="server" Text='<%# Bind("Ann_Email") %>'>
Ann_Prix:
<asp:TextBox D="Ann_PrixTextBox" runat="server" Text='<%# Bind("Ann_Prix") %>'>
Ann_Ville:
<asp:TextBox D="Ann_VilleTextBox" runat="server" Text='<%# Bind("Ann_Ville") %>'>
Pour mmo : la
gnration des lments
n'a pas lieu ici sans la
requte SELECT dans
dsAnnonce.
Le Designer vous
montre maintenant le
formulaire en mode
d'nsertion.
Ann_CodePostal:
<asp:TextBox D="Ann_CodePostalTextBox" runat="server"
Text='<%# Bind("Ann_CodePostal") %>'>
Ann_UserEmail:
<asp:TextBox D="Ann_UserEmailTextBox" runat="server"
Text='<%# Bind("Ann_UserEmail") %>'>
Reg_d:
<asp:TextBox D="Reg_dTextBox" runat="server" Text='<%# Bind("Reg_d") %>'>
Cat_d:
<asp:TextBox D="Cat_dTextBox" runat="server" Text='<%# Bind("Cat_d") %>'>
<asp:LinkButton D="nsertButton" runat="server" CausesValidation="True"
CommandName="nsert" Text="nsert">
</asp:LinkButton>
<asp:LinkButton D="nsertCancelButton" runat="server"
CausesValidation="False" CommandName="Cancel" Text="Cancel">
</asp:LinkButton>
</InsertItemTemplate>
</asp:FormView>
5. Sauvegardez la page *iffuserAnnonceaspx.
6. Excutez la page *iffuserAnnonceaspx pour tester le formulaire.
Evidemment le rendu n'est pas terrible. Justement l'intrt du contrle FormView rside dans le fait
que vous tes totalement libre de personnaliser le formulaire comme vous le souhaitez l'intrieur de ces
modles.
Voici un exemple avec une structure en tableau <table> HTML (.oui, c'est vrai c'est terrifiant !! Vous
comprenez pourquoi il vaut beaucoup mieux travailler avec les balises <div> ; cf. Atelier 2)
<asp:FormView D="FormView1" runat="server" DataKeyNames="Ann_d" DataSourceD="dsAnnonce"
DefaultMode="nsert" >
<nserttemTemplate>
<table border="0" cellpadding="0" cellspacing="5" >
<tr>
<td style="height: 78px" valign="top" width="150">
<h3>Texte de l'annonce (250 charactres max)</h3>
</td>
<td colspan="3" style="height: 78px" valign="top" >
<asp:TextBox D="TextBox1" runat="server" Text='<%# Bind("Ann_Texte") %>'
TextMode="MultiLine" MaxLength="250" Height="132px" Width="350"
EnableTheming="False"></asp:TextBox></td>
</tr>
<tr>
<td valign="top" width="150">
<h3>Catgorie</h3>
</td>
<asp:DropDownList D="DropDownList1" runat="server" DataSourceD="dsCategories"
DataTextField="Cat_Nom" DataValueField="Cat_d"
SelectedValue='<%# Bind("Cat_d") %>'>
</asp:DropDownList></td>
<h3>Rgion</h3>
</td>
<asp:DropDownList D="DropDownList3" runat="server" DataSourceD="dsRegions"
DataTextField="Reg_Nom" DataValueField="Reg_d"
SelectedValue='<%# Bind("Reg_d") %>'>
</asp:DropDownList></td>
</tr>
<tr>
<h3>Prix (propos)</h3>
</td>
<asp:TextBox D="TextBox4" runat="server" MaxLength="20"
Text='<%# Bind("Ann_Prix") %>'></asp:TextBox>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<h3>N de tlphone</h3>
</td>
Text='<%# Bind("Ann_Telephone") %>'></asp:TextBox>
</td>
<td valign="top" align="right" width="60">
<h3>@</h3>
</td>
Text='<%# Bind("Ann_Email") %>'></asp:TextBox>
</td>
</tr>
<tr>
<td style="height: 13px;" valign="top" width="150">
<h3>Code Postal</h3>
</td>
<td style=" height: 13px;" valign="top" width="200">
Text='<%# Bind("Ann_CodePostal") %>'></asp:TextBox>
</td>
<td style="height: 13px;" valign="top" align="right" width="60">
<h3>Ville</h3>
</td>
<td style=" height: 13px;" valign="top" width="150">
Text='<%# Bind("Ann_Ville") %>'></asp:TextBox>
</td>
</tr>
<tr >
<td height="20px" colspan="4" >
<asp:LinkButton D="nsertButton" runat="server" CausesValidation="True"
CommandName="nsert" Text="Valider votre annonce">
</asp:LinkButton> |
<asp:LinkButton D="nsertCancelButton" runat="server" CausesValidation="False"
CommandName="Cancel"
Text="Annuler"></asp:LinkButton>
</td>
</tr>
</table>
<br />
<asp:SqlDataSource D="dsRegions" runat="server"
SelectCommand="SELECT [Reg_d], [Reg_Nom] FROM [Regions]"></asp:SqlDataSource>
<asp:SqlDataSource D="dsCategories" runat="server"
SelectCommand="SELECT [Cat_d], [Cat_Nom] FROM [Categories]"></asp:SqlDataSource>
<br />
</nserttemTemplate>
</asp:FormView>
Vous obtenez ceci :
7. l reste une dernire tape pour afficher un message sympathique l'utilisateur lorsque l'annonce
est valide. Pour cela construisez une nouvelle page *iffuserAnnonceTermineeaspx :
Glissez sur la page un contrle Label dans une balise <h1>.
<h1><asp:Label D="Label1" runat="server" Text="Label" EnableTheming= "false"></asp:Label></h1>
8. Revenez sur la page DiffuserAnnonce.aspx pour brancher l'appel la page
DiffuserAnnonceTerminee.aspx lorsqu'une annonce est insre dans la base :
Ouvrez *iffuserAnnonceaspx en mode *esi(n.
Affichez la fenAtre de proprits du contrle .ormMie- (F4 ou clic droit > Proprits).
Cliquez sur l'icne dans la barre d'icnes pour faire apparatre les vnements
disponibles pour ce contrle.
Lorsqu'une annonce a t insre dans la base, ASP.NET dclenche l'vnement
ItemInserted. ndiquez un nom pour la procdure que vous allez dfinir en rponse cet
vnement : MaliderInsertion.
Dans le source de la page, l'attribut 0nItemInsertedHLMaliderInsertionL a t ajout au contrle
.ormMie-1.
Affichez la fentre de code de la page en double cliquant sur MaliderInsertion directemnet
dans la fentre de proprits.
Saisissez le code suivant :
Code en VB.NET
Protected Sub Validernsertion(ByVal sender As Object, ByVal e As
System.Web.U.WebControls.FormViewnsertedEventArgs) Handles FormView1.temnserted
f Not (e.Exception s Nothing) Then
Server.Transfer("DiffuserAnnonceTerminee.aspx?Status=0")
Else
Server.Transfer("DiffuserAnnonceTerminee.aspx?Status=1")
End f
End Sub
Code en C#
protected void Validernsertion(object sender, FormViewnsertedEventArgs e)
{
if (e.Exception != null)
{
Server.Transfer("DiffuserAnnonceTerminee.aspx?Status=0");
}
else
{
Server.Transfer("DiffuserAnnonceTerminee.aspx?Status=1");
}
}
Ce code rcupre le paramtre e de type .ormMie-Inserted"ventAr(s qui contient des informations
sur l'exception en cas d'erreur lors de l'insertion. La fonction Transfer de l'objet Server, transfert le pointeur
de page de ASP.NET sur la page *iffuserAnnonceTermineeaspx en passant en paramtre le statut de
l'opration d'insertion : 1 si tout s'est bien passe, 0 sinon.
9. Affichez un message appropri dans le label de la page *iffuserAnnonceTermineeaspx en
fonction du statut :
Ouvrez le code de la page *iffuserAnnonceTermineeaspx (icne de la barre d'icne
de l'explorateur de solutions)
Ajoutez le code suivant la procdure de chargement de la page web :
Code en VB.NET
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim dRegion As String = Request.QueryString("Status")
f dRegion = "0" Then
Label1.Text = "Erreur dans l'ajout de votre annonce. Recommencez ou contactez-nous au etc."
Else
Label1.Text = "Votre annonce sera diffuse sous 24h. Vous recevrez un message etc."
End f
End Sub
+ode en +K
protected void Page_Load(object sender, EventArgs e)
{
string dRegion = Request.QueryString["Status"];

if( dRegion =="0" )
{
Label1.Text = "Erreur dans l'ajout de votre annonce.
Recommencez ou contactez-nous au 0.000.000.000";
}
Else
{
Label1.Text = "Votre annonce sera diffuse sous 24h.
Vous recevrez un message de confirmation. Merci de votre confiance";
}
}
10. Excutez la page *iffuserAnnonceaspx pour tester le renvoi sur la page
*iffuserAnnonceTermineeaspx.
Note :
[ Amliorer les performances avec la dpendance de cache
- Mettre une page en cache pour viter un aller retour sur la base de donnes et gagner en performance.
- Utiliser la nouvelle technique de rafrachissement de cache de ASP.NET 2.0.
Objectif
L'objectif de cet exercice est d'utiliser la nouvelle technique de dpendance de cache de ASP.NET 2.0 pour
amliorer les performances des pages web d'accs aux donnes.
Vous allez mettre en cache le contenu de la page AdministrerAnnoncesaspx utilise par l'administrateur
du site pour viter, chaque requte sur la page, un aller retour jusqu'au serveur de donnes pour rcuprer
les donnes affiches dans celle-ci.
Tout le problme consiste dfinir quel moment rafrachir ce cache pour garantir l'administrateur la vue
la plus frache et la plus juste des donnes contenues dans la base.
C'est l qu'ASP.NET 2.0 apporte des solutions avec sa technique S45+ache*ependenc? qui consiste
configurer une dpendance avec la table Annonces de la base de faon ce que S45 Server "xpress
prvienne ASP.NET 2.0 lorsque le contenu de la table a chang. Et c'est ce moment prcis que se
produira le rafrachissement du cache. C'est l'idal pour avoir des donnes frachement rapatries de la
base au bon moment...
Pour observer cette dpendance, vous allez ajouter un contrle 5a1el sur la page
AdministrerAnnoncesaspx de faon observer l'heure du dernier chargement de la page. Cette heure ne
change pas tant que le cache joue son rle, mais ds que celui-ci est rafrachi par la dpendance avec la
base de donnes, l'heure est ractualise car la page est recharge en totalit avant d'tre nouveau
enregistre dans le cache mmoire.
1. La premire tape consiste activer la dpendance de cache pour l'application dans le fichier de
configuration Web.config par rapport la base de donnes AffairesSansRis%ue qu'on utilise au
travers de la chane de connexion csAffairesSansRis%ue :
Ouvrez le fichier Ee1confi(.
Ajoutez dans le fichier l'intrieur de la balise <s?stem-e1> la balise <caching> suivante :
.
<system.web>
<caching>
<sqlCacheDependency enabled="true" pollTime="500">
<databases>
<add name="dcAffairesSansRisque" connectionStringName="csAffairesSansRisque" />
</databases>
</sqlCacheDependency>
</caching>
.
En lisant le fichier de configuration au dmarrage de votre application, le runtime saura que vous avez
tabli une dpendance de cache avec la base de donnes reprsente par la chane de connexion
csAffairesSansRis%ue (que vous avez configure l'exercice 2 de cet atelier). Vous appelez cette
dpendance de cache avec la cl : dcAffairesSansRis%ue.
2. Dans un second temps, vous allez maintenant paramtrer la page web pour qu'elle soit prise en
charge par le cache.
Ouvrez la page AdministrerAnnoncesaspx en mode Source.
Ajoutez juste aprs la directive de page @ Page les lignes suivantes :
<%@ OutputCache Duration="999999" VaryByParam="none"
S%l*ependenc?HLdcAffairesSansRis%ueDannoncesL %>
La directive 0utput+ache indique que votre page va tre prise en charge par le cache, pour une dure
999999 c'est--dire quasi infinie. Et oui ! Nul besoin de prvoir une dure de rafrachissement prcise
puisque c'est la dpendance de cache qui va contrler la dure de vie de celui-ci. Mar?;?Param permettrait
d'indiquer un paramtre pour le rafrachissement mais encore une fois c'est inutile ici.
Par contre vous indiquez que vous souhaitez fonctionner avec une dpendance de cache, celle-l mme
que vous avez dclare dans le fichier de configuration par la cl dcAffairesSansRis%ue. La dpendance
portera sur la table annonces.
Ajoutez galement un contrle de type Label la page, par exemple juste dessous la grille.
Dsactivez le thme sur le contrle (Ajoutez "na1leThemin(HLfalseL).
Sauvegardez la page.
Affichez la page de code de la page et ajoutez dans la procdure de chargement de la page
le code suivant :
Code en VB.NET
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Label1.Text = "Page gnre : " & DateTime.Now.ToLongTimeString()
End Sub
Code en C#
protected void Page_Load(object sender, EventArgs e)
{
Label1.Text = "Page gnre : " + DateTime.Now.ToLongTimeString();
}
Sauvegardez la page et gnrer la page pour vrifier qu'il n'y a pas d'erreur de compilation
(menu Inrer > Inrer la pa(e).
3. La dernire tape consiste prparer la base de donnes fonctionner dans ce mode de
dpendance de cache :
Pour cela, on utilise l'utilitaire aspnet2re(s%lexe en ligne de commande. Vous le trouverez
sous : +D)EI!*0ES)3icrosoft!"T).rame-orF)v#$[$#1[
Si vous lancez cet utilitaire directement dans Windows (plutt qu'en ligne de commande), vous
obtenez un assistant qui vous guide dans l'installation de SQL Server pour stocker des informations pour
tous les services d'application ASP.NET (appartenance, profils, gestion des rles etc.). Pour configurer une
base uniquement pour l'un de ces services (ce qui est notre cas ici), vous devez utiliser l'utilitaire en ligne de
commande.
Ouvrez une fentre de commande. Changez de rpertoire pour vous positionner sous
+D)EI!*0ES)3icrosoft!"T).rame-orF)v#$[$#1[. Tapez la commande
aspnet2re(s%lexe et ajoutez derrire P S pour afficher tous les paramtres de cette
commande. Vous constaterez notamment que vous pouvez configurer pour les services
ASP.NET 2.0 des bases de donnes sur SQL Server 7, 2000 ou 2005.
Pour activer la table annonces de la base AffairesSansRis%ue, vous allez excutez la
commande suivante (la commande est formate ici pour tre plus lisible ):
C:\WNDOWS\Microsoft.NET\Framework\v2.0.50215\aspnet_regsql.exe
-C "Data Source=.\SQLEXPRESS;
AttachDbFilename=C:\tutorial dcouverte ASP.NET 2.0\AffairesSansRisque\App_Data\
AffairesSansRisque_Data.mdf;
ntegrated Security=True;
User nstance=True"
-ed -d AffairesSansRisque
-et -t annonces
Examinons les paramtres de l'utilitaire de plus prt :
P+ : indique la chane de connexion la base de donnes AffairesSansRis%ue. Notez l'attribut
Attach*1.ile!ame qui indique que la base de donnes n'est pas attache SQL Server Express pour
l'instant et qu'il faut donc le faire dynamiquement. Attention : sans utiliser ce paramtre \+ c'est--dire cette
chane de connexion, l'utilitaire aspnet2re(s%l s'attend ce que votre base de donnes soit dj attache
SQL Server.
Ped \d : indique la base de donnes que vous souhaitez prparer pour supporter la dpendance de cache.
Pet \t : indique la table dans cette base prparer pour la dpendance de cache. Attention !! La casse des
noms est trs importante. Vous devez crire le nom de la table exactement comme dans la directive
0utput+ache de la page web (ici, annonces commence par une minuscule).
Vous devez obtenir dans la fentre de commande un message du type :
Activation de la base de donnes pour la dpendance de cache SQL.
.........
Termin.
Activation de la table pour la dpendance de cache SQL.
Termin.
Que s'est-il pass concrtement sur la base de donnes ?
Ouvrez la connexion la base dans l'"xplorateur de 1ase de donnes de Visual Web Developer.
Regardez quels sont les changements :
Rsultat de la
commande
aspnet2re(s%l P S
4. Testez le fonctionnement de la dpendance de cache comme suit :
Excutez la page AdministrerAnnoncesaspx.
Notez l'heure de chargement de la page.
Cliquez sur .[ (ou menu Afficher > Actualiser) dans nternet Explorer pour r invoquer la
page plusieurs fois de suite. Vous constatez que l'heure reste inchange. Normal, la page
est gre par le cache. Elle n'est donc pas recharge chaque appel. Donc gain de
performance !
Ne fermez pas E.
Basculez dans l'"xplorateur de 1ases de donnes de Visual Web Developer. Faites un
clic droit sur la table Annonces > Afficher les donnes de la ta1le.
Modifiez l'adresse email du tout premier enregistrement.
Re basculez sur E et r actualisez la page (F5).
Nouveau trigger pour
grer la dpendance
au niveau de
l'UPDATE de la table.
Nouvelle table.
Nouvelles procdures
stockes.
L'heure a chang ! La dpendance de cache a t dclenche par la base de donnes.
l existe de nombreuses techniques de gestion de cache. Mais si vous voulez rafrachir une page au
plus prt des changements des donnes dans la base, jusqu' maintenant vous tiez contraint de scruter la
base de donnes rgulirement et ce procd peut se rvler trs coteux en performance.
Avec ce nouveau procd de dpendance avec la base, ce qu'il faut comprendre, c'est que c'est la base de
donnes qui vous prvient en temps voulu donc avec un maximum de gain en performance.. !
Note :
] Pour aller plus loin'
/.1 0tiliser une couche "%acc1s aux "onnes a&ec ObjectData2ource
l pourrait tre judicieux d'implmenter une couche de composants mtiers (BAL - Business Access Layer)
travaillant avec une couche de composants d'accs aux donnes (DAL - Data Access Layer) pour
encapsuler et abstraire la logique mtier et d'accs aux donnes dans des librairies (.dll) spares de vos
pages web. C'est trs utile pour factoriser et rutiliser votre code ddi l'accs aux donnes et faciliter la
monte en charge de votre application web si besoin. Vous travaillez peut-tre dj avec de tels composants
aujourd'hui.
ASP.NET 2.0 propose le contrle source de donnes 01&ect*ataSource pour vous brancher sur votre
couche de composants plutt que directement sur une base de donnes SQL Server.
Cet objet est capable d'invoquer les mthodes des composants pour insrer, dtruire et mettre jour les
donnes plutt que de fonctionner avec des requtes SQL.
Nous verrons un exemple d'utilisation de l'ObjectDataSource l'occasion de l'Atelier 6 sur la gestion des
profils utilisateurs. Dans cet atelier, nous allons proposer l'utilisateur de grer sa slection d'annonces
favorites sur le site. Pour afficher la liste de cette slection, nous utiliserons l'ObjectDataSource et un
composant d'accs aux donnes.
/.2 0tiliser le cache "e l%application web
Vous pouvez utiliser la dpendance de cache galement au niveau application en utilisant l'objet +ache.
Pour dfinir une nouvelle dpendance de cache, vous crirez par exemple :
Cache.nsert( annonces, annonces, new SqlCacheDependency (dcAffairesSansRisque, annonces)
^ Rende@Pvous dans le prochain atelier'
Dans l'atelier 5, Scuriser l,application -e1, vous allez implmenter la scurit dans votre application de
faon contrler l'accs aux pages web de celle-ci en fonction de l'identit de l'utilisateur. Vous apprendrez
galement paramtrer des rles.
Requte
d'interrogati
on type
XPath.

Coach Web Dev Atelier 04

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Coach Web Dev Atelier 04

Transféré par

Droits d'auteur :

Formats disponibles

Microsoft France Tutorial Dcouverte de ASP.NET 2.

Vous aimerez peut-être aussi