Vous êtes sur la page 1sur 630

PRODUIT OFFICIEL DE FORMATION MICROSOFT

10557A
Introduction au développement
Web avec Microsoft® Visual
Studio® 2010

Volume 1

N'oubliez pas d'accéder au contenu de formation du CD-ROM


d'accompagnement du cours qui se trouve au dos de votre livre.
ii Introduction au développement Web avec Microsoft® Visual Studio® 2010

Les informations contenues dans ce document, notamment les adresses URL et les références à d'autres
sites Web Internet, pourront faire l'objet de modifications sans préavis. Sauf mention contraire, les
sociétés, les produits, les noms de domaines, les adresses de messagerie, les logos, les personnes, les
lieux et les événements utilisés dans les exemples sont fictifs et toute ressemblance avec des sociétés,
produits, noms de domaines, adresses de messagerie, logos, personnes, lieux et événements réels est
purement fortuite et involontaire. L'utilisateur est tenu d'observer la réglementation relative aux droits
d'auteur applicable dans son pays. Aucune partie de ce document ne peut être reproduite, stockée ou
introduite dans un système de restitution, ou transmise à quelque fin ou par quelque moyen que ce
soit (électronique, mécanique, photocopie, enregistrement ou autre) sans la permission expresse et
écrite de Microsoft Corporation.

Microsoft peut détenir des brevets, avoir déposé des demandes d'enregistrement de brevets ou être
titulaire de marques, droits d'auteur ou autres droits de propriété intellectuelle portant sur tout ou
partie des éléments qui font l'objet du présent document. Sauf stipulation expresse contraire d'un
contrat de licence écrit de Microsoft, la fourniture de ce document n'a pas pour effet de vous concéder
une licence sur ces brevets, marques, droits d'auteur ou autres droits de propriété intellectuelle.

Les noms de fabricants, de produits ou les URL sont fournis uniquement à titre indicatif et Microsoft
ne fait aucune déclaration et exclut toute garantie légale, expresse ou implicite, concernant ces
fabricants ou l'utilisation des produits avec toutes les technologies Microsoft. L'inclusion d'un fabricant
ou d'un produit n'implique pas l'approbation par Microsoft du fabricant ou du produit. Des liens vers
des sites Web tiers peuvent être fournis. Ces sites ne sont pas sous le contrôle de Microsoft et Microsoft
n'est pas responsable de leur contenu ni des liens qu'ils sont susceptibles de contenir, ni des modifications
ou mises à jour de ces sites. Microsoft n'est pas responsable de la webdiffusion ou de toute autre forme
de transmission reçue d'un site connexe. Microsoft fournit ces liens dans un but pratique et l'insertion
de n'importe quel lien n'implique pas l'approbation du site en question ou des produits qu'il contient
par Microsoft.

© 2011 Microsoft Corporation. Tous droits réservés.


Microsoft, Microsoft Press, Access, Active Directory, Azure, Excel, Expression, Expression Blend,
Hyper-V, IntelliSense, Internet Explorer, Jscript, MS, MSDN, Outlook, PerformancePoint, PowerPoint,
SharePoint, Silverlight, SQL Server, Verdana, Visio, Visual Basic, Visual C#, Visual C++, Visual J#,
Visual Studio, Windows, Windows Azure, Windows Live, Windows Server et Windows Vista sont soit
des marques de Microsoft Corporation, soit des marques déposées de Microsoft Corporation, aux
États-Unis d'Amérique et/ou dans d'autres pays.
Toutes les autres marques sont la propriété de leurs propriétaires respectifs.

Numéro de produit : 10557A

Numéro de référence : X17-35219

Date de publication : 01/2011


TERMES DU CONTRAT DE LICENCE MICROSOFT
PRODUITS OFFICIELS DE FORMATION MICROSOFT — ÉDITION
INSTRUCTEUR — Versions précommerciales et finales
Les présents termes ont valeur de contrat entre Microsoft Corporation et vous. Lisez-les attentivement. Ils
portent sur le Contenu sous licence visé ci-dessus, y compris le support sur lequel vous l’avez reçu, le cas
échéant. Ce contrat porte également sur les produits Microsoft suivants :
• les mises à jour,
• les suppléments,
• les services Internet et
• les services d’assistance
de ce Contenu sous licence à moins que d’autres termes n’accompagnent ces produits, auquel cas ces
derniers prévalent.
En utilisant le Contenu sous licence, vous acceptez ces termes. Si vous êtes en désaccord avec
ces termes, n’utilisez pas le Contenu sous licence.

Si vous vous conformez aux présents termes du contrat de licence, vous disposez des droits
stipulés ci-dessous.
1. DÉFINITIONS.
a. La « Documentation de formation » signifie la documentation imprimée ou sous forme
électronique, comme les manuels, cahiers d’exercice, livres blancs, communiqués de presse,
feuilles de données et forums aux questions, qui peut être incluse dans le Contenu sous licence.
b. Un « Centre de formation agréé » signifie un centre partenaire Microsoft Certified Partner
approuvé MLSC (Microsoft Learning Solutions Competency), un centre IT Academy, ou toute autre
entité désignée occasionnellement par Microsoft.
c. Une « Session de formation agréée » signifie une session de formation agréée par Microsoft et
organisée dans ou par un Centre d’apprentissage agréé, dirigée par un formateur qui dispense une
formation à des Stagiaires exclusivement sur les Produits officiels de formation Microsoft (« Official
Microsoft Learning Products », anciennement appelés cours officiels Microsoft ou MOC, « Microsoft
Official Curriculum ») et les produits Microsoft Dynamics (anciennement appelés cours Microsoft
Business Solutions). Chaque Session de formation agréée dispensera une formation sur l’objet
d’un (1) Cours.
d. Un « Cours » signifie l’un des cours utilisant un Contenu sous licence proposés par un Centre de
formation agréé dans le cadre d’une Session de formation agréée, chacune dispensant une formation
sur un domaine particulier lié à une technologie Microsoft.
e. Un « Dispositif » signifie un ordinateur, un périphérique, une station de travail, un terminal ou
tout autre dispositif électronique numérique ou analogique.
f. Le « Contenu sous licence » signifie les supports qui accompagnent les présents termes du
contrat de licence. Le Contenu sous licence peut inclure, notamment, les éléments suivants : (i) Le
Contenu du formateur, (ii) le Contenu du stagiaire, (iii) le guide d’installation de la classe et (iv) le
Logiciel. Les composants du Contenu sous licence sont différents et distincts pour chaque Cours.
g. Le « Logiciel » signifie les Machines virtuelles et les Disques durs virtuels ou toute autre application
logicielle pouvant être incluse dans le Contenu sous licence.
h. Un « Stagiaire » signifie un stagiaire dûment inscrit à une Session de formation agréée dans votre
centre.
i. Le « Contenu du stagiaire » signifie les supports de formation accompagnant les présents termes
du contrat de licence qui sont utilisés par les Stagiaires et les Formateurs durant une Session de
formation agréée. Le Contenu du stagiaire peut inclure des ateliers, des simulations et des fichiers
spécifiques à chaque Cours.
j. Un « Formateur » signifie a) une personne dûment certifiée par Microsoft en tant que formateur
MCT (Microsoft Certified Trainer) et b) toute autre personne autorisée officiellement par Microsoft et
qui a été chargée par un Centre d’apprentissage agréé de dispenser une Session de formation
agréée à des Stagiaires pour son compte.
k. Le « Contenu du formateur » signifie les supports de formation accompagnant les présents
termes du contrat de licence qui sont utilisés par les Formateurs et les Stagiaires, selon le cas,
uniquement durant une Session de formation agréée. Le Contenu du formateur peut inclure les
Machines virtuelles, les Disques durs virtuels, les fichiers Microsoft PowerPoint, les notes de
l’instructeur ainsi que les guides de démonstration et les fichiers script requis pour chaque Cours.
l. Les « Disques durs virtuels » signifient le Logiciel Microsoft constitué des disques durs virtuels
(comme un disque dur virtuel de base ou des disques différents) pour une Machine virtuelle qui peut
être chargé sur un seul ordinateur ou tout autre dispositif afin de permettre aux utilisateurs finals
d’exécuter plusieurs systèmes d’exploitation simultanément. Dans le cadre du présent contrat de
licence, les disques durs virtuels devront être traités en tant que « Contenu du formateur ».
m. La « Machine virtuelle » signifie une expérience informatique virtuelle, obtenue à l’aide du logiciel
Microsoft® Virtual PC ou Microsoft® Virtual Server qui se compose d’un environnement matériel
virtuel, d’un ou de plusieurs disques durs virtuels ainsi que d’un fichier de configuration définissant
les paramètres de l’environnement matériel virtuel (par exemple, la RAM). Dans le cadre du présent
contrat de licence, les disques durs virtuels devront être traités en tant que « Contenu du
formateur ».
n. Le terme « vous » signifie le Centre de formation agréé ou le Formateur, selon le cas, qui a accepté
les présents termes du contrat de licence.
2. PRÉSENTATION.
Contenu sous licence. Le Contenu sous licence inclut le Logiciel, la Documentation de formation (en
ligne et sous forme électronique), le Contenu du formateur, le Contenu du stagiaire, le guide
d’installation de la classe et les supports associés.
Modèle de licence. Le Contenu sous licence est concédé sous licence en vertu d’une licence par Centre
de formation agréé ou par Formateur.
3. INSTALLATION ET DROITS D’UTILISATION.
a. Centres de formation agréés et Formateurs : Pour chaque Session de formation agréée,
vous êtes autorisé à :
i. soit installer, sur les Dispositifs de la classe, des copies individuelles du Contenu sous licence
correspondant qui seront utilisées uniquement par les Stagiaires dûment inscrits à la Session de
formation agréée et par le Formateur dispensant cette formation, sous réserve que le nombre de
copies utilisées ne dépasse pas le nombre de Stagiaires inscrits à la Session de formation agréée
et le Formateur dispensant cette formation ; SOIT
ii. installer une copie du Contenu sous licence correspondant sur un serveur réseau qui sera
accessible uniquement par les Dispositifs de la classe et qui sera utilisée uniquement par les
Stagiaires dûment inscrits à la Session de formation agréée et par le Formateur dispensant cette
formation, sous réserve que le nombre de Dispositifs qui accèdent au Contenu sous licence sur le
serveur ne dépasse pas le nombre de Stagiaires inscrits à la Session de formation agréée et le
Formateur dispensant cette formation.
iii. autoriser les Stagiaires dûment inscrits à la Session de formation agréée et le Formateur
dispensant cette formation à utiliser le Contenu sous licence que vous installez selon (i) ou (ii) ci-
dessus durant une Session de formation agréée, conformément aux présents termes du contrat
de licence.
iv. Dissociation de composants. Les composants du Contenu sous licence sont concédés sous
licence en tant qu’unité unique. Vous n’êtes pas autorisé à dissocier les composants et à les
installer sur différents Dispositifs.
v. Programmes de tiers. Le Contenu sous licence peut également contenir des programmes tiers.
L’utilisation de ces programmes tiers sera régie par les présents termes du contrat de licence, à
moins que d’autres termes n’accompagnent ces programmes.
b. Formateurs :
i. Les Formateurs sont autorisés à utiliser le Contenu sous licence que vous installez ou qui est
installé par un Centre de formation agréé sur un Dispositif de la classe dans le cadre d’une
Session de formation agréée.
ii. Les Formateurs sont également autorisés à utiliser une copie du Contenu sous licence, comme
indiqué ci-après :
A. Dispositif concédé sous licence. Le Dispositif concédé sous licence est celui sur lequel vous
utilisez le Contenu sous licence. Vous êtes autorisé à installer et à utiliser une copie du
Contenu sous licence sur le Dispositif sous licence uniquement pour les besoins de votre
formation personnelle et pour préparer une Session de formation agréée.
B. Dispositif portable. Vous êtes autorisé à installer une autre copie du Contenu sous licence
sur un dispositif portable uniquement pour les besoins de votre formation personnelle et
pour préparer une Session de formation agréée.
4. VERSIONS PRÉCOMMERCIALES. Si le Contenu sous licence est une version précommerciale
(« version bêta »), les présents termes s’appliquent en plus des termes de ce contrat :
a. Contenu sous licence en version précommerciale. Ce Contenu sous licence est une version
précommerciale. Il peut ne pas contenir les mêmes informations et/ou ne pas fonctionner comme
une version finale du Contenu sous licence. Nous sommes autorisés à le changer pour la version
commerciale finale. Nous sommes également autorisés à ne pas éditer de version commerciale.
Vous devez informer clairement et de façon visible les Stagiaires qui participent à chaque Session de
formation agréée de ce qui précède ; et vous ou Microsoft n’avez aucune obligation de leur fournir
un contenu supplémentaire, notamment, de manière non limitative, la version finale du Contenu
sous licence du Cours.
b. Commentaires. Si vous acceptez de faire part à Microsoft de vos commentaires concernant le
Contenu sous licence, vous concédez à Microsoft, gratuitement, le droit d’utiliser, de partager et de
commercialiser vos commentaires de quelque manière et à quelque fin que ce soit. Vous concédez
également à des tiers, gratuitement, les droits de brevet nécessaires pour que leurs produits,
technologies et services puissent être utilisés ou servir d’interface avec toute partie spécifique d’un
logiciel, Contenu sous licence ou service Microsoft qui inclut ces commentaires. Vous ne fournirez
pas de commentaires faisant l’objet d’une licence qui impose à Microsoft de concéder sous licence
son logiciel ou sa documentation à des tiers parce que nous y incluons vos commentaires. Ces droits
survivent au présent contrat.
c. Informations confidentielles. Le Contenu sous licence, y compris la visionneuse, l’interface
utilisateur, les fonctionnalités et la documentation pouvant être incluses dans le Contenu sous
licence, est confidentiel et la propriété de Microsoft et de ses fournisseurs.
i. Utilisation. Pendant cinq ans après l’installation du Contenu sous licence ou de sa
commercialisation, selon la date la plus proche, vous n’êtes pas autorisé à divulguer des
informations confidentielles à des tiers. Vous êtes autorisé à divulguer des informations
confidentielles uniquement à vos employés et consultants qui en ont besoin. Vous devez
avoir conclu avec eux des accords écrits qui protègent les informations confidentielles au
moins autant que le présent contrat.
ii. Maintien en vigueur de certaines clauses. Votre obligation de protection des
informations confidentielles survit au présent contrat.
iii. Exclusions. Vous êtes autorisé à divulguer des informations confidentielles conformément à
une ordonnance judiciaire ou gouvernementale. Vous devez en informer par avance Microsoft
afin de lui permettre de demander une ordonnance protectrice ou de trouver un autre moyen
de protéger ces informations. Les informations confidentielles n’incluent pas les informations
• qui ont été portées à la connaissance du public sans qu’il y ait eu violation de l’obligation
de confidentialité ;
• que vous avez reçues d’un tiers qui n’a pas violé ses obligations de confidentialité à
l’égard de Microsoft ou de ses fournisseurs ; ou
• que vous avez développées en toute indépendance.
d. Durée. Le présent contrat pour les versions précommerciales est applicable jusqu’à (i) la date
d’expiration qui vous est communiquée par Microsoft pour l’utilisation de la version bêta, ou (ii) la
commercialisation du Contenu sous licence, selon la date la plus proche (la « durée de la bêta »).
e. Utilisation. Dès l’expiration ou la résiliation de la durée de la bêta, vous devrez cesser d’utiliser les
copies de la version bêta et détruire toutes les copies en votre possession ou sous votre contrôle
et/ou en possession ou sous le contrôle d’un Instructeur qui a reçu des copies de la version
précommerciale.
f. Copies. Microsoft informera les Centres de formation agréés s’ils sont autorisés à effectuer des
copies de la version bêta (version imprimée et/ou sur CD) et à les distribuer aux Stagiaires et/ou
Instructeurs. Si Microsoft autorise cette distribution, vous devrez vous conformer aux termes
supplémentaires fournis par Microsoft concernant lesdites copies et distribution.
5. CONDITIONS DE LICENCE ET/OU DROITS D’UTILISATION SUPPLÉMENTAIRES.
a. Centres de formation agréés et Formateurs :
i. Logiciel.
ii. Disques durs virtuels. Le Contenu sous licence peut inclure des versions de Microsoft XP,
Microsoft Windows Vista, Windows Server 2003, Windows Server 2008 et
Windows 2000 Advanced Server et/ou d’autres produits Microsoft qui sont fournis dans les
Disques durs virtuels.
A. Si les Disques durs virtuels et les ateliers sont lancés avec le lanceur d’ateliers
Microsoft Learning Lab Launcher, ces termes s’appliquent :
Logiciel temporaire. Si le Logiciel n’est pas réinitialisé, il cessera de fonctionner à l’issue de la
durée indiquée lors de l’installation de Machines virtuelles (entre trente et cinq cents jours
après son installation). Vous ne recevrez pas de notification avant l’arrêt du logiciel. Une fois
que le logiciel ne fonctionnera plus, vous risquez de ne plus pouvoir accéder aux données
utilisées ou aux informations enregistrées avec les Machines virtuelles et de devoir rétablir
l’état d’origine de ces Machines virtuelles. Vous devez supprimer le Logiciel des Dispositifs à
la fin de chaque Session de formation agréée, et le réinstaller et le lancer avant le début de
chaque nouvelle Session de formation agréée.
B. Si les Disques durs virtuels nécessitent une clé de produit pour être lancés, ces
termes s’appliquent :
Microsoft désactivera le système d’exploitation associé à chaque Disque dur virtuel. Pour
installer un Disque dur virtuel sur des Dispositifs de la classe dans le cadre d’une Session de
formation agréée, vous devrez au préalable activer le système d’exploitation du Disque dur
virtuel en utilisant la clé de produit correspondante fournie par Microsoft.
C. Ces termes s’appliquent à l’ensemble des Machines virtuelles et des Disques durs
virtuels :
Vous êtes autorisé à utiliser les Machines virtuelles et les Disques durs virtuels
uniquement si vous vous conformez aux termes et conditions du présent contrat
de licence ainsi qu’aux conditions de sécurité suivantes :
o Vous ne pouvez pas installer des Machines virtuelles et des Disques durs virtuels sur
des Dispositifs portables ou des Dispositifs qui sont accessibles via d’autres réseaux.
o Vous devez supprimer les Machines virtuelles et les Disques durs virtuels des Dispositifs
de la classe à la fin de chacune des Sessions de formation agréées, à l’exception de
celles dispensées dans les centres Microsoft Certified Partner approuvés MLSC.
o Vous devez supprimer les différentes portions de disque des Disques durs virtuels de
tous les Dispositifs de la classe à la fin de chaque Session de formation agréée
dispensée dans les centres Microsoft Certified Partner approuvés MLSC.
o Vous devez vous assurer que les Machines virtuelles et les Disques durs virtuels ne sont
pas copiés ou téléchargés à partir de Dispositifs sur lesquels ils ont été installés.
o Vous devez respecter strictement toutes les instructions Microsoft relatives à l’installation,
à l’utilisation, à l’activation et la désactivation, et à la sécurité des Machines virtuelles et
des Disques durs virtuels.
o Vous n’êtes pas autorisé à modifier les Machines virtuelles et les Disques durs virtuels
ou le contenu y figurant.
o Vous n’êtes pas autorisé à reproduire ou à redistribuer les Machines virtuelles ou les
Disques durs virtuels.
iii. Guide d’installation de la classe. Vous devez vous assurer que le Contenu sous licence qui
sera utilisé durant une Session de formation agréée est installé conformément au guide
d’installation de la classe associé au Cours.
iv. Éléments multimédias et modèles. Vous pouvez autoriser les Formateurs et les Stagiaires
à utiliser des photographies, images clip art, animations, sons, musiques, formes, clips vidéo
et modèles inclus avec le Contenu sous licence uniquement dans le cadre d’une Session de
formation agréée. Les Formateurs qui possèdent leur propre copie du Contenu sous licence sont
autorisés à se servir des éléments multimédias aux seules fins de leur formation personnelle.
v. Logiciel d’évaluation. Tout Logiciel inclus dans le Contenu du stagiaire et désigné comme
« Logiciel d’évaluation » peut être utilisé par les Stagiaires uniquement pour les besoins de leur
formation personnelle en dehors de la Session de formation agréée.
b. Formateurs uniquement :
i. Utilisation des modèles de diapositives PowerPoint. Le Contenu du formateur peut
comprendre des diapositives Microsoft PowerPoint. Le Formateur est autorisé à utiliser, copier
et modifier les diapositives PowerPoint dans le seul but de dispenser une Session de formation
agréée. Si vous choisissez d’exercer les droits précités, vous vous engagez ou vous garantissez
que le Formateur s’engage : (a) à ce que la modification des diapositives ne constitue pas la
création d’œuvres obscènes ou diffamatoires, telles qu’elles sont définies par la législation
fédérale au moment de leur création ; et (b) à respecter l’ensemble des termes et conditions du
présent contrat de licence.
ii. Utilisation des Composants de formation inclus dans le Contenu du formateur. Pour
chaque Session de formation agréée, les Formateurs sont autorisés à personnaliser et à
reproduire, conformément aux termes du contrat MCT, les composants du Contenu sous licence
qui sont associés logiquement à la Session de formation agréée. Si vous choisissez d’exercer les
droits précités, vous vous engagez ou vous garantissez que le Formateur s’engage : (a) à ce
que les personnalisations ou les reproductions ne soient utilisées qu’aux seules fins de dispenser
une Session de formation agréée et (b) à respecter l’ensemble des termes et conditions du
présent contrat de licence.
iii. Documentation de formation. Si le Contenu sous licence inclut une Documentation de
formation, vous êtes autorisé à copier et à utiliser cette Documentation. Vous n’êtes pas
autorisé à modifier la Documentation de formation ni à imprimer un ouvrage (version
électronique ou imprimée) dans son intégralité. Si vous reproduisez une Documentation de
formation, vous acceptez ces termes :

• Vous pouvez utiliser la Documentation de formation aux seules fins de votre utilisation ou
formation personnelle.
• Vous ne pouvez pas rééditer ni publier la Documentation de formation sur un ordinateur du
réseau, ni la diffuser sur un support.
• Vous devez ajouter la mention de droits d’auteur d’origine de la Documentation de
formation ou celle de Microsoft sous la forme
ci-dessous :
Forme de mention :
© 2011 Réimprimé avec l’autorisation de Microsoft Corporation pour usage
personnel uniquement. Tous droits réservés.
Microsoft, Windows et Windows Server sont soit des marques de Microsoft
Corporation, soit des marques déposées de Microsoft Corporation aux États-Unis
d’Amérique et/ou dans d’autres pays. Les autres noms de produits et de sociétés
mentionnés dans les présentes sont des marques de leurs propriétaires respectifs.
6. SERVICES INTERNET. Microsoft peut fournir des services Internet avec le Contenu sous licence. Ils
peuvent être modifiés ou interrompus à tout moment. Vous n’êtes pas autorisé à utiliser ces services de
quelque manière que ce soit qui pourrait leur porter atteinte ou perturber leur utilisation par un autre
utilisateur. Vous n’êtes pas autorisé à tenter d’accéder de façon non autorisée aux services, données,
comptes ou réseaux de toute autre manière.
7. PORTEE DE LA LICENCE. Le Contenu sous licence n’est pas vendu, mais concédé sous licence. Le
présent contrat vous confère certains droits d’utilisation du Contenu sous licence. Microsoft se réserve
tous les autres droits. Sauf si la loi en vigueur vous confère d’autres droits, nonobstant la présente
limitation, vous n’êtes autorisé à utiliser le Contenu sous licence qu’en conformité avec les termes du
présent contrat. À cette fin, vous devez vous conformer aux restrictions techniques contenues dans le
Contenu sous licence qui vous permettent de l’utiliser d’une certaine façon. Vous n’êtes pas autorisé à :
• installer, sur des Dispositifs de la classe, plus de copies du Contenu sous licence que le nombre de
Stagiaires plus le Formateur présents dans la Session de formation agréée ;
• permettre l’accès au Contenu sous licence sur le serveur réseau, le cas échéant, par davantage de
Dispositifs de la classe que le nombre de Stagiaires dûment inscrits à la Session de formation agréée
plus le Formateur dispensant cette formation.
• copier ou reproduire le Contenu sous licence sur un autre serveur ou site en vue d’une nouvelle
reproduction ou redistribution ;
• révéler à des tiers les résultats des tests d’évaluation du Contenu sous licence sans l’accord écrit
préalable de Microsoft ;
• contourner les restrictions techniques figurant dans le Contenu sous licence ;
• reconstituer la logique du Contenu sous licence, le décompiler ou le désassembler, sauf dans la
mesure où ces opérations seraient expressément permises par la réglementation applicable
nonobstant la présente limitation ;
• effectuer plus de copies du Contenu sous licence que ce qui n’est autorisé dans le présent contrat ou
par la réglementation applicable, nonobstant la présente limitation ;
• publier le Contenu sous licence en vue d’une reproduction par autrui ;
• transférer le Contenu sous licence, en totalité ou en partie, à un tiers ;
• accéder ou utiliser un Contenu sous licence pour lequel vous (i) ne dispensez pas de Cours et/ou (ii)
n’avez pas obtenu l’autorisation de Microsoft ;
• louer ou prêter le Contenu sous licence ; ou
• utiliser le Contenu sous licence pour des services d’hébergement commercial ou pour des besoins
d’ordre général.
• Les droits d’accès au logiciel serveur pouvant être inclus avec le Contenu sous licence, y compris les
Disques durs virtuels, ne vous autorisent pas à exploiter des brevets appartenant à Microsoft ou
tous autres droits de propriété intellectuelle de Microsoft sur le logiciel ou tous dispositifs qui
peuvent accéder au serveur.
8. RESTRICTIONS À L’EXPORTATION. Le Contenu sous licence est soumis à la réglementation
américaine en matière d’exportation. Vous devez vous conformer à toutes les réglementations nationales
et internationales en matière d’exportation concernant le logiciel. Ces réglementations comprennent des
restrictions sur les pays destinataires, les utilisateurs finaux et les utilisations finales. Des informations
supplémentaires sont disponibles sur le site Internet www.microsoft.com/exporting.
9. LOGICIEL/CONTENU SOUS LICENCE EN REVENTE INTERDITE (« NOT FOR RESALE » OU
« NFR »). Vous n’êtes pas autorisé à vendre un logiciel ou un Contenu sous licence portant la mention
de revente interdite (« Not for Resale » ou « NFR »).
10. VERSION ÉDUCATION. Pour utiliser un Contenu sous licence portant la mention de Version Éducation
(« Academic Edition » ou « AE »), vous devez avoir la qualité d’« Utilisateur Éducation Autorisé » (Qualified
Educational User). Pour savoir si vous avez cette qualité, rendez-vous sur le site
http://www.microsoft.com/france/licences/education ou contactez l’affilié Microsoft qui dessert votre pays.
11. RÉSILIATION. Sans préjudice de tous autres droits, Microsoft pourra résilier le présent contrat de licence
si vous n’en respectez pas les termes et conditions. Si votre statut de Centre de formation agréé ou de
Formateur a) expire, b) est volontairement résilié par vous-même et/ou c) est résilié par Microsoft, ce
contrat expirera automatiquement. Après résiliation du présent contrat, vous devrez détruire tous les
exemplaires du Contenu sous licence et tous ses composants.
12. INTÉGRALITÉ DES ACCORDS. Le présent contrat ainsi que les termes concernant les
suppléments, les mises à jour, les services Internet et d’assistance technique que vous
utilisez constituent l’intégralité des accords en ce qui concerne le Contenu sous licence et
les services d’assistance technique.
13. DROIT APPLICABLE.
a. États-Unis. Si vous avez acquis le Contenu sous licence aux États-Unis, les lois de l’État de
Washington, États-Unis d’Amérique, régissent l’interprétation de ce contrat et s’appliquent en cas de
réclamation pour rupture dudit contrat, sans donner d’effet aux dispositions régissant les conflits de
lois. Les lois du pays dans lequel vous vivez régissent toutes les autres réclamations, notamment les
réclamations fondées sur les lois fédérales en matière de protection des consommateurs, de
concurrence déloyale et de délits.
b. En dehors des États-Unis. Si vous avez acquis le Contenu sous licence dans un autre pays, les
lois de ce pays s’appliquent.
14. EFFET JURIDIQUE. Le présent contrat décrit certains droits légaux. Vous pouvez bénéficier d’autres
droits prévus par les lois de votre État ou pays. Vous pouvez également bénéficier de certains droits à
l’égard de la partie auprès de laquelle vous avez acquis le Contrat sous licence. Le présent contrat ne
modifie pas les droits que vous confèrent les lois de votre État ou pays si celles-ci ne le permettent pas.
15. EXCLUSIONS DE GARANTIE. Le Contenu sous licence est concédé sous licence « en l’état ».
Vous assumez tous les risques liés à son utilisation. Microsoft n’accorde aucune garantie ou
condition expresse. Vous pouvez bénéficier de droits des consommateurs supplémentaires
dans le cadre du droit local, que ce contrat ne peut modifier. Lorsque cela est autorisé par le
droit local, Microsoft exclut les garanties implicites de qualité, d’adéquation à un usage
particulier et d’absence de contrefaçon.
16. LIMITATION ET EXCLUSION DE RECOURS ET DE DOMMAGES. VOUS POUVEZ OBTENIR DE
MICROSOFT ET DE SES FOURNISSEURS UNE INDEMNISATION EN CAS DE DOMMAGES
DIRECTS LIMITÉE À 5,00 $ U.S. VOUS NE POUVEZ PRÉTENDRE À AUCUNE INDEMNISATION
POUR LES AUTRES DOMMAGES, Y COMPRIS LES DOMMAGES INDIRECTS, DE PERTES DE
BÉNÉFICES, SPÉCIAUX OU ACCESSOIRES.
Cette limitation concerne :
• toute affaire liée au Contenu sous licence, au logiciel, aux services ou au contenu (y compris le code)
figurant sur des sites Internet tiers ou dans des programmes tiers ; et
• les réclamations pour rupture de contrat ou violation de garantie, les réclamations en cas de
responsabilité sans faute, de négligence ou autre délit dans la limite autorisée par la loi en vigueur.
Elle s’applique également même si Microsoft connaissait l'éventualité d'un tel dommage. La limitation ou
exclusion ci-dessus peut également ne pas vous être applicable, car votre pays n’autorise pas l’exclusion
ou la limitation de responsabilité pour les dommages indirects, accessoires ou de quelque nature que ce
soit.
Bienvenue !
Merci de participer à notre formation. Nous avons travaillé en étroite collaboration avec nos
partenaires certifiés Microsoft en charge des formations (Microsoft Certified Partners for
Learning Solutions ou CPLS) et les académies Microsoft (Microsoft IT Academies) pour vous
garantir un apprentissage de qualité supérieure, que vous soyez un professionnel désireux
d'élargir vos compétences ou un étudiant en informatique.

■ Des instructeurs et formateurs agréés Microsoft (Microsoft Certified Trainers ou


MCT). Votre instructeur est un professionnel dont les compétences pédagogiques et
techniques ont été validées par les certifications Microsoft. Et si les instructeurs offrent
une formation pour l'un de nos CPLS, ils sont également évalués tout au long de l'année
par les stagiaires et par Microsoft.

■ Les avantages des examens de certification. Après avoir suivi une formation, vous
pouvez envisager de passer un examen de certification Microsoft. Les certifications
Microsoft valident vos compétences en matière de technologies Microsoft et peuvent
vous aider à vous distinguer lorsque vous recherchez un emploi ou si vous souhaitez
donner un nouvel élan à votre carrière. En fait, une étude indépendante menée par IDC
a démontré que 75 % des dirigeants estiment que les certifications ont un impact positif
sur les performances de leur équipe1. Demandez à votre instructeur des informations sur
les promotions et les remises disponibles pour les examens de certification Microsoft.

■ Une satisfaction client garantie. Nos CPLS (Certified Partners for Learning Solutions)
vous assurent une entière satisfaction et s'en portent pleinement garants. Nous vous
invitons d'ailleurs, à la fin de ce cours, à remplir une fiche d'évaluation concernant votre
expérience d'aujourd'hui. Vos commentaires nous sont précieux !

Nous vous souhaitons une excellente formation et une carrière couronnée de succès !

Cordialement,

Formation Microsoft
www.microsoft.com/france/formation

1 IDC, « Value of Certification: Team Certification and Organizational Performance », November 2006
Introduction au développement Web avec Microsoft® Visual Studio® 2010 xv

Remerciements
Microsoft Learning souhaite remercier les personnes suivantes pour leur contribution
à l'élaboration de ce cours. C'est grâce à leur participation à différentes étapes de sa
préparation que nous sommes en mesure de vous proposer une expérience de
formation de qualité.

Carsten Thomsen — Expert technique


Carsten Thomsen est un consultant indépendant qui travaille depuis 1990 comme
développeur de logiciels, analyste, architecte et auteur. Il est titulaire de plusieurs
certifications Microsoft, dont celles de MCTS et MCPD, sur différents outils et
applications, y compris Microsoft® .NET Framework, Microsoft Visual Basic®,
Microsoft Visual C#® et Microsoft Office SharePoint® Server 2007. Intervenant dans
les domaines de l'architecture, de la recherche, de l'analyse, du développement et
du dépannage, il consacre un nombre d'heures considérable au système d'exploitation
Windows® et à de nombreux autres produits serveur Microsoft, dont Hyper-V™ et
SQL Server®.

Toi Wright — Réviseur technique


Toi est une consultante indépendante qui possède plus de 25 ans d'expérience dans le
développement de logiciels. Elle est titulaire d'une licence ès sciences en informatique
et ingénierie du MIT (Massachusetts Institute of Technology) et d'un MBA (Master
of Business Administration) de la Carnegie Mellon University. Elle est Microsoft MVP
pour ASP et ASP.NET depuis 2005. Toi est responsable de la création d'une initiative
nationale pour Microsoft et ses partenaires : elle est en effet à l'origine de We Are
Microsoft, (www.wearemicrosoft.com), un partenariat de type communautaire entre
des informaticiens et des associations à but non lucratif locales. Elle a dirigé et organisé
les groupes d'utilisateurs techniques dans la région de Dallas, au Texas, pendant plus
de 10 ans. Elle est actuellement présidente du Dallas ASP.Net User Group,
www.dallasasp.net. Elle est également fondatrice de Geeks in Pink,
www.geeksinpink.org.
Introduction au développement Web avec Microsoft® Visual Studio® 2010 xvii

Table des matières


Module 1 : Exploration des applications Web Microsoft ASP.NET dans Microsoft
Visual Studio 2010
Leçon 1 : Introduction au .NET Framework 1-3
Leçon 2 : Vue d'ensemble d'ASP.NET 1-15
Leçon 3 : Vue d'ensemble de l'application de l'atelier pratique 1-32

Module 2 : Création d'applications Web à l'aide de Microsoft Visual Studio 2010


et des langages Microsoft .NET
Leçon 1 : Sélection d'un langage de programmation 2-3
Leçon 2 : Présentation générale de Visual Studio 2010 2-15
Leçon 3 : Création d'une application Web simple 2-33
Atelier pratique : Création d'applications Web à l'aide de
Microsoft Visual Studio 2010 et des langages Microsoft .NET 2-54

Module 3 : Création d'un formulaire Web Microsoft ASP.NET


Leçon 1 : Création de formulaires Web 3-3
Leçon 2 : Ajout et configuration de contrôles serveur dans un
formulaire Web 3-12
Atelier pratique : Création d'un formulaire Web Microsoft ASP.NET 3-37

Module 4 : Ajout de fonctionnalités à un formulaire Web Microsoft ASP.NET


Leçon 1 : Utilisation des fichiers code-behind 4-4
Leçon 2 : Gestion des événements de contrôle serveur 4-14
Leçon 3 : Création de classes et de composants à l'aide de
Visual Studio 2010 4-37
Leçon 4 : Gestion des événements relatifs aux pages 4-61
Atelier pratique : Ajout de fonctionnalités à un formulaire Web
Microsoft ASP.NET 4-72
xviii Introduction au développement Web avec Microsoft® Visual Studio® 2010

Module 5 : Implémentation de pages maîtres et de contrôles utilisateur


Leçon 1 : Création de pages maîtres 5-3
Leçon 2 : Ajout de contrôles utilisateur à un formulaire Web ASP.NET 5-27
Atelier pratique : Implémentation de pages maîtres et de contrôles
utilisateur 5-51

Module 6 : Validation des entrées utilisateur


Leçon 1 : Vue d'ensemble de la validation des entrées utilisateur 6-4
Leçon 2 : Contrôles de validation ASP.NET 6-11
Leçon 3 : Validation de formulaires Web 6-39
Atelier pratique : Validation des entrées utilisateur 6-45

Module 7 : Résolution des problèmes liés aux applications Web Microsoft


ASP.NET
Leçon 1 : Débogage dans ASP.NET 7-3
Leçon 2 : Traçage dans ASP.NET 7-23
Atelier pratique : Résolution des problèmes liés aux applications Web
Microsoft ASP.NET 7-36

Module 8 : Gestion des données dans une application Web Microsoft


ASP.NET 4.0
Leçon 1 : Vue d'ensemble d'ADO.NET 8-3
Leçon 2 : Connexion à une base de données 8-16
Leçon 3 : Gestion des données 8-30
Atelier pratique : Gestion de données dans une application Web
ASP.NET 4.0 8-50
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
À propos de ce cours xix

À propos de ce cours
Cette section décrit brièvement le cours et ses objectifs, le profil des stagiaires, ainsi
que les connaissances préalables requises.

Description du cours
Ce cours de cinq jours animé par un instructeur permet d'acquérir les connaissances
et les compétences nécessaires pour développer des applications Web à l'aide de
Microsoft® Visual Studio® 2010.

Public visé
Ce cours s'adresse aux développeurs Web débutants qui possèdent des connaissances
en HTML (Hypertext Markup Language) ou DHTML (Dynamic HTML), ainsi que
des notions d'un langage de script tel que Microsoft Visual Basic® Scripting Edition
ou Microsoft JScript®.
Les stagiaires doivent avoir les compétences suivantes :
• Capacité de créer une page Web simple à l'aide d'une application Microsoft
ou d'un outil tiers. Ils doivent être en mesure, par exemple, de créer ou de
personnaliser une page Web sur un site Microsoft SharePoint® 2010.

Conditions préalables
Les stagiaires doivent avoir au moins un mois d'expérience des technologies
Microsoft .NET. Outre leur expérience professionnelle, les stagiaires qui suivent cette
formation doivent posséder les connaissances techniques suivantes :
• Connaissance de HTML ou DHTML, y compris :
• les tableaux ;
• les images ;
• les formulaires.
• Expérience de la programmation avec Visual Basic .NET ou Microsoft Visual
C#® .NET, y compris :
• la déclaration de variables ;
• l'utilisation de boucles ;
• l'utilisation d'instructions conditionnelles.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
xx À propos de ce cours

Avoir suivi le cours 2667, « Introduction à la programmation », permet de satisfaire


aux exigences précédentes en matière de compétences en programmation.

Objectifs du cours
À la fin de ce cours, les stagiaires seront à même d'effectuer les tâches suivantes :
• explorer les applications Web Microsoft ASP.NET dans Visual Studio 2010 ;
• créer des applications Web en utilisant Visual Studio 2010 et les langages
reposant sur Microsoft .NET ;
• créer un formulaire Web ASP.NET ;
• ajouter des fonctionnalités à un formulaire Web ASP.NET ;
• implémenter des pages maîtres et des contrôles utilisateur ;
• valider des entrées utilisateur ;
• déboguer les applications Web ASP.NET 4.0 ;
• gérer les données dans une application Web ASP.NET 4.0 ;
• gérer les tâches d'accès aux données à l'aide de LINQ (Language Integrated
Query) ;
• gérer les données à l'aide de Dynamic Data ASP.NET ;
• créer une application ASP.NET Ajax ;
• utiliser les services WCF (Windows Communication Foundation) ;
• gérer l'état dans les applications Web ;
• configurer et déployer une application Web ASP.NET ;
• sécuriser une application Web ASP.NET ;
• implémenter les nouvelles technologies que Visual Studio 2010 prend en charge
pour le développement Web.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
À propos de ce cours xxi

Plan du cours
Cette section indique le plan du cours.
Le module 1, « Exploration des applications Web Microsoft ASP.NET dans Visual
Studio 2010 », explique les fonctions clés de Microsoft .NET Framework et de
Microsoft ASP.NET. Ce module vous permet de visualiser l'application Web complète
que vous créerez au cours des ateliers pratiques de ce cours.
Le module 2, « Création d'applications Web en utilisant Visual Studio 2010 et les
langages reposant sur Microsoft .NET », décrit les différents langages de
programmation disponibles pour développer des applications Microsoft .NET
Framework. Ce module expose les aspects fondamentaux de l'écriture de code et
de la création de composants à l'aide des deux langages reposant sur .NET Framework,
Visual Basic et Visual C#. Il propose également une présentation générale de Microsoft
Visual Studio 2010 et explique comment créer une application Web simple.
Le module 3, « Création d'un formulaire Web Form Microsoft® ASP.NET », explique
comment créer des Web Forms, puis les remplir avec des contrôles serveur.
Le module 4, « Ajout de fonctionnalités à un formulaire Web Form Microsoft
ASP.NET », décrit les différentes méthodes à votre disposition pour ajouter du code
à votre application Web Microsoft ASP.NET. Il explique également comment utiliser
les contrôles serveur Web, les gestionnaires d'événements, les fichiers code-behind
et les composants. De plus, il explique comment utiliser les événements de page,
notamment l'événement Page_Load.
Le module 5, « Implémentation des pages maîtres et des contrôles utilisateur »,
explique comment créer et implémenter des pages maîtres et comment implémenter
des contrôles utilisateur dans une application Web.
Le module 6, « Validation des entrées utilisateur », propose une vue d'ensemble de
la validation des entrées utilisateur. Il fournit des informations sur l'ajout, le
positionnement et la configuration de contrôles de validation dans un formulaire
Web Form. Il fournit également des informations sur la validation de formulaires
Web Form.
Le module 7, « Résolution des problèmes dans les applications Web Microsoft
ASP.NET », décrit les étapes requises pour permettre le traçage et le débogage, et
indique comment utiliser ces fonctions dans une application Web.
Le module 8, « Gestion des données dans une application Web Microsoft
ASP.NET 4.0 », propose une vue d'ensemble de ADO.NET. Il explique comment
exploiter par programme les données à l'aide d'ADO.NET et comment créer une
connexion pour accéder aux données stockées dans une base de données Microsoft
SQL Server. De plus, il décrit comment utiliser les objets DataSet et DataReader
pour prendre en charge les exigences de stockage local et de manipulation des
données relatives aux formulaires Web.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
xxii À propos de ce cours

Le module 9, « Gestion de l'accès aux données à l'aide de LINQ », explique ce qu'est


LINQ et indique comment l'utiliser pour gérer des données XML et Microsoft SQL
Server® dans une application Web ASP.NET à l'aide de contrôles de serveur Web et
de code.
Le module 10, « Gestion des données à l'aide de Dynamic Data ASP.NET de
Microsoft® », propose une vue d'ensemble de Dynamic Data ASP.NET et fournit
des informations sur sa mise en œuvre. Ce module explique également comment
personnaliser les applications Dynamic Data ASP.NET.
Le module 11, « Création d'une application Web Forms Microsoft® ASP.NET Ajax »,
fournit une vue d'ensemble d'ASP.NET Ajax et explique comment créer une
application ASP.NET Ajax. Il décrit également ASP.NET Ajax Control Toolkit, sa
procédure d'installation et la marche à suivre pour ajouter des contrôles dans une
application Web Forms ASP.NET à partir de ce kit.
Le module 12, « Utilisation des services Microsoft Windows Communication
Foundation », propose une vue d'ensemble des services WCF. Il explique comment
découvrir et utiliser des services WCF utiles au sein des applications Web. Les
stagiaires apprendront également pourquoi et quand créer leurs propres services WCF.
Le module 13, « Gestion de l'état dans les applications Web », explique comment
gérer l'état dans une application Web ASP.NET.
Le module 14, « Configuration et déploiement d'une application Web Microsoft®
ASP.NET », explique comment configurer et déployer une application Web ASP.NET
à l'aide des fichiers machine.config et web.config.
Le module 15, « Sécurisation d'une application Web Microsoft ASP.NET », explique
les différentes fonctionnalités de sécurité d'une application Web. Il présente également
les informations concernant l'infrastructure dont vous avez besoin pour créer et
déployer différentes fonctionnalités de sécurité des applications Web.
Le module 16, « Implémentation des technologies avancées prises en charge par
Microsoft® Visual Studio® 2010 for Web Development », décrit les technologies MVC
et Microsoft Silverlight®. Ce module propose au stagiaire des démonstrations des
puissantes technologies implémentées dans les applications avancées.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
À propos de ce cours xxiii

Documents de cours
Votre kit de cours contient les documents détaillés ci-dessous :
• Guide du cours. Ce guide de formation succinct, destiné à être utilisé en classe,
fournit toutes les informations techniques essentielles dans un format compact
et ciblé, idéal pour une expérience de formation dirigée efficace.
• Leçons : elles vous guident dans la réalisation des objectifs de formation et
fournissent les éléments indispensables à la réussite de votre formation dirigée.
• Ateliers pratiques : ils fournissent une plateforme concrète pour vous
permettre d'appliquer les connaissances et les compétences acquises au cours
du module.
• CD du cours. Il fournit des ressources complémentaires associées à ce cours.
• Ressources : elles comprennent des ressources complémentaires
soigneusement classées qui vous permettent d'accéder immédiatement au
contenu le plus à jour disponible sur TechNet, MSDN® et Microsoft Press®.
• Corrigés des ateliers pratiques : corrigés des ateliers pratiques en format
numérique, à utiliser pendant les ateliers. Ils sont également disponibles
sous forme de PDF à imprimer.
• Guide de configuration des ordinateurs virtuels : fournit des procédures
pas à pas permettant de recréer des images des ordinateurs virtuels/serveurs
disposant de la configuration appropriée.
• Instructions pour l'envoi de vos commentaires : elles vous permettent
d'envoyer vos commentaires sur tous les aspects du cours.
• Fichiers de cours destinés aux stagiaires : ils intègrent le fichier Allfiles.exe,
un fichier exécutable auto-extractible contenant tous les fichiers requis pour
les ateliers pratiques et les démonstrations.

Remarque : pour ouvrir la page Web, insérez le CD-ROM du cours dans le lecteur,
puis double-cliquez sur StartCD.exe dans le répertoire racine du CD-ROM.

• Évaluation du cours. À la fin du cours, vous pourrez remplir une fiche d'évaluation
en ligne pour émettre vos commentaires sur le cours, le centre de formation et
l'instructeur.

Pour formuler des commentaires et impressions complémentaires sur le cours, vous


pouvez envoyer un courrier électronique à l'adresse support@mscourseware.com.
Pour obtenir des renseignements sur le programme MCP (Microsoft Certified
Professional), envoyez un courrier électronique à l'adresse mcphelp@microsoft.com.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
xxiv À propos de ce cours

Environnement d'ordinateurs virtuels


Cette section fournit les informations nécessaires pour configurer l'environnement
de la classe afin de prendre en charge le scénario d'entreprise du cours.

Configuration d'ordinateurs virtuels


Dans ce cours, vous utiliserez Hyper-V™ pour effectuer les ateliers pratiques.
Le tableau suivant montre le rôle de chaque ordinateur virtuel utilisé dans ce cours.

Ordinateur virtuel Rôle

10557A-GEN-DEV Ordinateur autonome

Configuration logicielle
Les logiciels suivants sont installés sur chaque ordinateur virtuel :
• Visual Studio 2010 Professional (comprenant .NET Framework 4.0)
• Ajax Control Toolkit
• Microsoft Silverlight 4
• Microsoft Silverlight 4 Tools pour Visual Studio 2010
• Windows® Internet Explorer® 8

Fichiers du cours
Des fichiers sont associés aux ateliers pratiques de ce cours. Ils sont situés sur les
ordinateurs des stagiaires.

Configuration de la classe
L'ordinateur virtuel sera configuré de la même façon sur tous les ordinateurs de la
classe.

Niveau des éléments matériels du cours


Pour garantir une utilisation satisfaisante, les formations Microsoft requièrent une
configuration matérielle minimale pour les ordinateurs de l'instructeur et des stagiaires
dans toutes les classes Microsoft CPLS (Certified Partner for Learning Solutions) dans
lesquelles les produits officiels de formation Microsoft sont utilisés.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Exploration des applications Web Microsoft® ASP NET dans Microsoft Visual Studio® 2010 1-1

Module 1
Exploration des applications Web
Microsoft® ASP NET dans
Microsoft Visual Studio® 2010
Table des matières :
Leçon 1 : Introduction au .NET Framework 1-3
Leçon 2 : Vue d'ensemble d'ASP.NET 1-15
Leçon 3 : Vue d'ensemble de l'application de l'atelier pratique 1-32
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
1-2 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Vue d'en
nsemble du modu
ule

Microsooft® Visual Studio


o® 2010 permet de d développer des applications WebW
puissanntes sans être submergé par le coddage. Microsoft .NNET Framework offre
o
des commposants qui mod dularisent et simp
plifient le dévelop
ppement d'appliccations
distribu
uées, notamment les applications Web.
W Microsoft ASP.NET
A est l'unee des
nombreeuses technologiees constituant le .NET Framework k, que vous pouveez utiliser
pour déévelopper vos app plications Web.
Dans cee module, vous déécouvrirez les priincipales fonction
nnalités du
NET Fraamework et d'ASP.NET. Vous verrrez également un n échantillon de
l'applicaation Web termin
née que vous génnérerez dans les ateliers pratiques tout au
long de ce cours.

Objecttifs du module
À la fin de ce module, vo
ous serez à mêmee d'effectuer les tââches suivantes :
• déccrire le .NET Fram
mework ;
• déccrire ASP.NET ;
• déccrire l'application de l'atelier pratiq
que.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Exploration des aapplications Web Microsooft® ASP NET dans Microosoft Visual Studio® 2010 1-3

Leçon 1
Introducction au .N
NET Fram
mework

Vous deevez connaître less termes et les concepts associés aua développemen nt
Web afiin d'apprécier pleeinement l'utilisattion de Visual Stu
udio 2010 pour le
développpement d'applicaations Web. Les développeurs
d fon
nt face à de nomb
breux
défis lorrs de la création d
d'applications Weeb et le .NET Fraamework résout une
u
grande partie de ces problèmes.
Dans ceette leçon, vous d
découvrirez le .NEET Framework 4, principalement dans
d
le cadree du développemeent d'application ns Web. Vous déccouvrirez égalemeent
Visual Studio
S 2010, l'outtil de développem
ment qui permet de créer des
applicattions Web.

Objecttifs de la leçon
Au term
me de cette leçon, vous serez à mêm
me d'effectuer less tâches suivantess :
• déccrire Microsoft .N
NET ;
• énu
umérer les avantaages liés à l'utilisaation du .NET Fraamework ;
• déccrire les composants du .NET Fram
mework ;
• iden
ntifier les fonctionnalités clés de Visual
V Studio 201
10.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
1-4 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Introd
duction à Miicrosoft .NET
T

Points clés
L'objecttif de Microsoft .N
NET est de simplifier le développeement des applicaations
Window ws®, des applicatiions Web, des ap pplications person
nnalisées et des services.
s
Cela commprend les appliications mobiles, les applications dansd le nuage hébergées
par Win
ndows Azure™ et lles applications héébergées par Micrrosoft SQL Server® ® 2008.
(Le nuaage ou l'informatique en nuage faitt référence à l'info ormatique basée sur
Internett, dans laquelle lees logiciels et les données sont fouurnis à la demandde.)
Le .NETT Framework est l'infrastructure de d Microsoft .NET T.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Exploration des applications Web Microsoft® ASP NET dans Microsoft Visual Studio® 2010 1-5

Technologies Microsoft .NET


Microsoft .NET est conçu sur une architecture ouverte permettant une extension
aisée lorsque vous générez des services et des applications Web. Microsoft .NET
comprend les technologies et produits suivants :
• .NET Framework. Le .NET Framework est un modèle de programmation
orienté objet complet et cohérent de Microsoft. Il offre un environnement de
génération pour des applications et des services indépendants de toute
plateforme et de tout périphérique. Le .NET Framework est la plateforme
Microsoft destinée à la génération d'applications ; elle offre une expérience
utilisateur visuellement étonnante, une communication simple et sécurisée,
ainsi que la possibilité de modéliser tout un éventail de processus métier. Dans
l'environnement .NET Framework, l'exécution du code est efficace. Avec ces
fonctionnalités, le .NET Framework réduit les efforts en matière de
déploiement de logiciels et les conflits de version, tout en garantissant une
exécution sûre du code.
Le .NET Framework fournit une base pour générer et exécuter des
applications et des services, ainsi qu'une bibliothèque de fonctions commune
pour aider à leur génération. Ces points communs simplifient l'intégration des
applications générées grâce au .NET Framework.
• Serveurs. Microsoft .NET offre une infrastructure permettant d'intégrer,
exécuter, opérer et gérer les solutions .NET Framework sur des serveurs tels
que Windows Server® 2008 R2, Microsoft SharePoint® Server 2010 et
SQL Server 2008 R2. Cela comprend les serveurs Web exécutant les
services IIS (Internet Information Services) pour l'hébergement de services et
d'applications Web, et les serveurs hébergeant des services, notamment les
services Windows et Windows Communication Foundation (WCF).
• Clients. Microsoft .NET vous permet d'offrir une expérience utilisateur
cohérente sur de nombreux périphériques, tels que les appareils mobiles, les
navigateurs Web et les ordinateurs personnels.
• Visual Studio 2010 et autres outils de développement. Grâce à ces outils, vous
pouvez développer rapidement des services WCF ainsi que des applications
Windows, Web et Windows Azure, et enrichir de ce fait l'expérience utilisateur.

Question : quel est le principal avantage lié à l'utilisation du .NET Framework


pour le développement de vos applications ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
1-6 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Avanttages du .NE
ET Frameworrk

Points clés
Au débu ut, la plupart des applications Win
ndows étaient dééveloppées grâce à
l'interface de programmaation d'applicatio ons (API, application programming interface)
Window ws, généralementt dans les langagees de programmaation C ou C++. Les L
applicattions de bureau ccréées visaient la productivité au trravail, l'informatiique
domestiique et les jeux. AAvec l'introductio
on de Microsoft Visual
V Basic® et d''Internet,
les déveeloppeurs ont dû se spécialiser daans un type d'app plication particulieer. Ils ont
dû, par exemple, se spéccialiser dans le dééveloppement des applications en nC
ou C++,, Visual Basic, ou en langage de sccript Visual Basic pour l'utilisationn des
pages ASP
A (Active Serverr Pages). Aujourd d'hui, avec le .NET
T Framework, vo ous
pouvez mettre à profit vo os compétences pour
p développer tout type d'appliication
et choissir votre langage dde programmatio on.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Exploration des applications Web Microsoft® ASP NET dans Microsoft Visual Studio® 2010 1-7

Le .NET Framework présente de nombreux avantages en matière de


développement d'applications et de services. En voici quelques exemples :
• Standards et pratiques Web. Le .NET Framework assure une prise en charge
complète des technologies Internet existantes, notamment HTML, Extensible
Hypertext Markup Language (XHTML), Hypertext Transfer Protocol (HTTP),
XML, Simple Object Access Protocol (SOAP), Extensible Stylesheet Language
Transformation (XSLT), XML Path Language (XPath) et autres standards Web.
• Modèles d'application unifiés. La fonctionnalité de type .NET est disponible
pour toutes les applications .NET, qu'elles soient de type Windows ou Web.
• Simplicité d'utilisation. Le .NET Framework organise le code en espaces de
noms et classes hiérarchiques ; il fournit un système de type commun qui peut
être utilisé par tous les langages compatibles avec .NET.
• Classes extensibles. La hiérarchie des classes du .NET Framework est ouverte
au développeur. Vous pouvez y accéder et les étendre via l'héritage, les
interfaces ou les extensions.
• Grâce à un modèle de programmation complet et cohérent, et à un ensemble
commun d'API, le .NET Framework vous permet de générer des applications
qui fonctionnent selon vos besoins, dans le langage de programmation qui
vous convient, et à travers toute une palette de plateformes, logiciels, services
et périphériques.
• Installation des applications commerciales facilitée. De nombreuses
applications Microsoft et de fournisseurs tiers utilisent le .NET Framework
pour la prise en charge de leurs fonctionnalités principales. Si
le .NET Framework est installé sur votre ordinateur local, ces applications sont
plus faciles à installer.
• Mises à jour simplifiées. Le service Windows Update met à jour
automatiquement le .NET Framework. Si vous recevez des mises à jour
automatiques de Windows Update, la version du .NET Framework installée
sur votre ordinateur sera mise à jour avec les correctifs et les Service Packs les
plus récents.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
1-8 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Prise en charge des périphériques. Il existe deux éditions distinctes


du .NET Framework conçues pour s'exécuter sur différents périphériques.
Le .NET Compact Framework
(http://go.microsoft.com/fwlink/?LinkID=192006&clcid=0x409) est un
environnement indépendant du matériel qui prend en charge la génération
et l'exécution d'applications gérées sur des périphériques informatiques aux
ressources restreintes. Le .NET Micro Framework
(http://go.microsoft.com/fwlink/?LinkID=192007&clcid=0x409, en anglais)
prend en charge les périphériques de plus petite taille. Vous pouvez
maintenant étendre vos applications et services uniformément, de
périphériques de très petite taille à des serveurs, dans le nuage, en utilisant
le même modèle de programmation et les mêmes outils tout au long du
processus.

Question : quels sont les avantages principaux de l'utilisation de .NET Framework


pour développer des applications Web ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Exploration des aapplications Web Microsooft® ASP NET dans Microosoft Visual Studio® 2010 1-9

Comp
posants du .N
NET Framew
work

Points clés
L'enviro
onnement .NET p possède plusieurss composants perrmettant de généérer et
d'exécuter les application
ns .NET.
• Système d'exploitatiion. Le .NET Fram
mework doit être exécuté sur un système
s
xploitation.
d'ex
• Com mmon Language Runtime. Le Com mmon Language Runtime (CLR) est le
com
mposant d'ordinaateur virtuel du .N NET Framework ; il fournit des serrvices
de base
b tels que la ggestion de la mémmoire, des threadss et des exception
ns, le
garbbage collection et la sécurité. Le composant
c CLR gère
g le code au moment
m
de l'exécution
l et appplique la sécurité en attribuant des degrés variabless de
con
nfiance à un comp posant selon un certain
c nombre de
d facteurs (son origine,
o
parr exemple). Il enccourage la robusteesse en implémen ntant une infrastrructure
de vérification
v stricte du type et du code, appelée le syystème de type com
mmun.
Le code
c managé est exécuté sous la gestion
g du CLR, tandis
t que le cod
de non
man nagé ne cible pass le Common Lan nguage Runtime.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
1-10 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Le CLR offre des fonctionnalités simplifiant le développement dans plusieurs


langages de programmation ; par exemple, il permet de développer une
application Web à la fois dans Visual Basic et Microsoft Visual C#®. En d'autres
termes, vous pouvez créer les différentes parties d'une application Web dans
plusieurs langages de programmation.
• Bibliothèque de classes du .NET Framework. La bibliothèque de classes
du .NET Framework est une collection orientée objet complète de fonctionnalités
réutilisables conçues pour répondre à vos besoins de développement courants,
notamment les applications de ligne de commande et d'interface utilisateur
graphique (GUI), et les formulaires et services Web. La bibliothèque de classes
du .NET Framework, également appelée Bibliothèque de classes de base, offre de
nombreuses fonctionnalités : interface utilisateur, accès aux données, connectivité
de base de données, chiffrement, développement d'applications Web, algorithmes
numériques et communications réseau. Elle présente les fonctionnalités du
Common Language Runtime et simplifie le développement des applications .NET.
En outre, vous pouvez étendre les classes en créant vos propres bibliothèques.
Toutes les applications et tous les langages Microsoft .NET ont accès aux mêmes
bibliothèques de classes du .NET Framework.
• Langages. Le .NET Framework offre toute une gamme de langages de
développement qui permettent aux développeurs d'appliquer leurs compétences
et techniques de développement au processus de développement .NET. Chaque
langage offre généralement les mêmes fonctionnalités. Tous les langages
conformes à la spécification CLS (Common Language Specification) peuvent
s'exécuter sur le CLR. Dans le cadre du .NET Framework, Microsoft prend en
charge les langages tels que Visual Basic, Visual C#, Microsoft Visual C++® et
Microsoft Visual F#®. Les organisations tierces peuvent également fournir des
langages supplémentaires.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Exploration des applications Web Microsoft® ASP NET dans Microsoft Visual Studio® 2010 1-11

Technologies .NET Framework 4


Le .NET Framework 4 offre une collection complète de classes fournissant des
fonctionnalités dans de nombreux domaines technologiques, notamment :
• ASP.NET. ASP.NET est une infrastructure de développement qui permet de
générer des applications et des services Web puissants.
• Windows Forms. Windows Forms est la plateforme de développement de base
qui permet de générer des applications Smart Client.
• Windows Presentation Foundation. Windows Presentation Foundation (WPF)
offre des classes pour les applications Smart Client qui associent l'interface
utilisateur, les documents et le contenu multimédia.
• Accès aux données. L'accès aux données offre des fonctionnalités permettant
d'accéder aux sources de données externes, notamment la prise en charge
XML étendue. L'accès aux données est principalement implémenté dans
Microsoft ADO.NET, qui comprend également Entity Framework et les
services de données.

Remarque : pour plus d'informations sur ADO.NET, consultez le module 8, « Gestion des
données dans une application Web Microsoft ASP.NET 4.0 ».

• Windows Communication Foundation. WCF offre un modèle de programmation


unifié pour les applications orientées services.

Remarque : pour plus d'informations sur WCF, consultez le module 12, « Utilisation des
services Windows Communication Foundation ».

• Windows Workflow Foundation. Windows Workflow Foundation (WF) offre un


modèle de programmation et des outils permettant de générer des applications
de flux de travail qui modélisent les processus métier.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
1-12 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Hébergement d'applications
Le CLR gère l'exécution du code pour un grand nombre d'applications et de
services. Cependant, chaque type d'application nécessite un hôte du runtime
pour la démarrer. Celui-ci charge le runtime dans un processus, crée les domaines
d'application du processus et charge le code de l'utilisateur dans les domaines
d'application. Le .NET Framework fournit non seulement plusieurs hôtes du
runtime, mais prend également en charge le développement des hôtes du runtime
tiers. Les hôtes du runtime proposés par Microsoft sont énumérés dans le tableau
suivant.

Hôte du runtime Description

ASP.NET Charge le Common Language Runtime dans le


processus qui gère la requête Web. ASP.NET crée
également un domaine d'application pour chaque
application Web exécutée sur un serveur Web.

Windows Internet Explorer® Crée des domaines d'application pour exécuter des
contrôles managés. Le .NET Framework prend en
charge le téléchargement et l'exécution des contrôles
de navigateur. Le runtime interface avec le mécanisme
d'extensibilité d'Internet Explorer grâce à un filtre MIME
(Multipurpose Internet Mail Extension) pour créer des
domaines d'application qui exécuteront les contrôles
managés. Par défaut, un domaine d'application est créé
pour chaque site Web.

Exécutables shell Appelle le code d'hébergement du runtime pour


transférer le contrôle au runtime chaque fois qu'un
exécutable est démarré à partir du shell.

Question : quels sont les deux principaux composants du .NET Framework 4 ?


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Exploration des aapplications Web Microsooft® ASP NET dans Microosoft Visual Studio® 2010 1-13

Princiipales fonctio
onnalités de
e Visual Studio 2010

Points clés
Visual Studio
S 2010 consstitue la base du développement
d d Microsoft .NET
de T.
Visual Studio
S 2010 est u
un environnemen nt de développemment complet dan ns
lequel vous
v pouvez conccevoir, développeer, déboguer et dééployer vos appliications
et servicces .NET.

Fonctio
onnalités de Viisual Studio 20
010
Visual Studio
S 2010 offree les fonctionnalittés suivantes :
• nombreux langages de programmaation
Prisse en charge de n
• Outils pour générer des applications Web, Windows,, WPF et compatiibles
avec WF, ainsi que d
des services WCFF
• Outils pour l'utilisattion de feuilles dee style en cascadee (CSS), notammeent les
fenêêtres Appliquer les styles et Gérerr les styles
• Outils d'accès aux d
données, notamm
ment la prise en ch
harge d'Entity Fraamework
et de
d la requête LINQ (language-inteegrated query)
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
1-14 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Prise en charge multi-cible pour permettre aux développeurs de sélectionner


la version de .NET Framework que les applications doivent cibler
• Prise en charge d'ASP.NET, Ajax (JavaScript et XML asynchrones), JavaScript
et jQuery
• Prise en charge de Microsoft Silverlight®
• Gestion des erreurs exhaustive, notamment débogage local et à distance, et
traçage
• Aide et documentation présentées sous un format facile d'accès

Question : pourquoi Visual Studio 2010 est-il considéré comme un ensemble


complet d'outils de développement ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Exploration des aapplications Web Microsooft® ASP NET dans Microosoft Visual Studio® 2010 1-15

Leçon 2
Vue d'en
nsemble d
d'ASP.NE
ET

ASP.NEET est une infrastrructure de dévelo oppement permettant de générer desd


applicattions Web. Les foormulaires Web ASP.NET,
A qui fon
nt partie d'une
applicattion Web ASP.NE ET, simplifient la génération de sittes Web dynamiqques.
ASP.NEET comprend égallement la technologie nécessaire pour p générer des services
Web WCF,
W qui fournisseent la base des ap
pplications Web distribuées.
d
Dans ceette leçon, vous d
découvrirez les prrincipales fonctionnnalités d'ASP.NE
ET et des
applicattions Web ASP.NNET, les composan nts d'une applicaation Web ASP.NET et le
modèle d'exécution de ccompilation dynaamique.

Objecttifs de la leçon
Au term
me de cette leçon, vous serez à mêm
me d'effectuer less tâches suivantess :
• déccrire l'interaction client-serveur ;
• déccrire ASP.NET ;
• déccrire les composants d'une applicaation Web ASP.NET ;
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
1-16 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• décrire le processus de génération et de rendu du balisage et du code ;


• décrire le modèle d'exécution de compilation dynamique ASP.NET ;
• décrire les extensions ASP.NET.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Exploration des aapplications Web Microsooft® ASP NET dans Microosoft Visual Studio® 2010 1-17

Intera
action client--serveur

Points clés
Le déveeloppement d'app plications en vue d'une utilisation sur HTTP diffèree de la
création
n d'applications d
de bureau, telles que
q les applicatio ons Windows Forrms. Le
protocoole HTTP est intriinsèquement sans état ; cela signiffie que la commu unication
fonction
nne de manière d déconnectée. En d'autres
d termes, ill n'y a pas de con
nnexion
entre un
n client et un servveur Web.
• Lorrsqu'un client dem
mande une page en tapant une ad dresse, ou URL (U Uniform
Ressource Locator), d
dans un navigateur Web, le serveu ur Web répond en
ren
nvoyant au client lle code HTML (eet potentiellement le code côté clieent pour
la ressource demand dée, telle qu'une page
p ou un fichieer).
• La connexion
c entre le client et le servveur s'ouvre à l'arrrivée de la demaande et
se ferme
f une fois la réponse envoyéee au client. De ce fait, il est difficilee de
quaalifier une applicaation Web d'appllication connectéee. Toutefois, le seerveur
Weeb peut reconnaîttre un utilisateur au fur et à mesurre de ses demand des. Ceci
impplique la gestion d de l'état. Par consséquent, il est possible de reconnaaître un
utillisateur et toutes les informations qu'il a incluses su ur une page Web b d'une
req
quête à l'autre.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
1-18 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Remarque : la gestion de l'état est abordée en détails dans le module 13, « Gestion de
l'état dans les applications Web ».

• Côté client, après le chargement d'une page, l'utilisateur la soumet au serveur,


déclenchant ainsi une publication. Cela se produit en utilisant des
fonctionnalités du protocole HTTP, notamment les méthodes POST et GET.
Avec le code HTML, une fonction d'envoi type peut être déclenchée en
exposant un élément HTML input de type submit à l'utilisateur, qui peut
ensuite cliquer dessus pour l'afficher comme un bouton sur la page Web.

Vous pouvez vous servir du code côté client sur le client afin d'utiliser des
informations et des contrôles sans envoi vers le serveur. Le code côté client peut
également déclencher une publication par programmation. Le code côté serveur
est uniquement exécuté sur le serveur, mais il peut être utilisé afin d'injecter le
code côté client dans la page rendue sur le client.
ASP.NET rend l'interaction client-serveur négligeable en raison de la
programmation pilotée par les événements dont vous disposez sur HTTP.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Exploration des aapplications Web Microsooft® ASP NET dans Microosoft Visual Studio® 2010 1-19

Présentation d'AS
SP.NET

Points clés
Avant l'aarrivée du .NET F Framework et d'A ASP.NET, les développeurs Web qui q
utilisaieent les technologiies Microsoft imp
plémentaient les sites
s Web dynam miques
à l'aide de la technologiee Classic ASP. Claassic ASP est un code
c interprété, alors
a
que ASP P.NET est un codde compilé. Contrrairement à ASP, ASP.NET
A permett
l'optimiisation des perforrmances, un typaage fort et une liaiison anticipée.

Présen
ntation d'ASP.N
NET
Microso oft ASP.NET est u
un ensemble de teechnologies de développement
d'appliccations Web. ASPP.NET permet auxx programmeurs de générer des siites
Web dyynamiques, des ap pplications Web et des services Web
W WCF. ASP.NE ET
faisant partie
p du .NET Frramework, vous pouvez
p donc dévvelopper des appllications
Web AS SP.NET dans touss les langages .NE
ET. Voici certainss aspects clés d'AS
SP.NET :
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
1-20 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Le composant fondamental d'ASP.NET est le formulaire Web. Un formulaire


Web est une page Web qui s'affiche pour les utilisateurs dans un navigateur.
Il s'agit d'une page dynamique traitée par le serveur Web et qui permet
d'accéder aux ressources du serveur. Une application Web ASP.NET par défaut
comprend au moins un formulaire Web.
Vous pouvez aussi utiliser JavaScript, VBScript, jQuery ou Ajax pour traiter
différentes actions utilisateur sur le client. Autrement dit, une page Web HTML
traditionnelle peut exécuter un script sur le client pour effectuer des tâches
de base. Cependant, un formulaire Web ASP.NET peut également exécuter
un code côté serveur pour accéder à une base de données, générer des
formulaires Web supplémentaires ou tirer parti de la sécurité intégrée sur
le serveur.
• ASP.NET ne dépend d'aucun périphérique et vous permet de développer
un formulaire Web unique, que vous pourrez consulter sur la plupart des
périphériques dotés d'un accès à Internet et d'un navigateur Web.
• Vous pouvez utiliser Visual Studio 2010 pour générer et exécuter une
application Web ASP.NET. Le processus de développement est alors simplifié
car vous pouvez tester l'application sans créer d'environnement d'hébergement
externe.
• L'authentification intégrée Windows et par formulaire sécurise les applications
Web et toutes les données associées.
• Une application ASP.NET déployée est exécutée comme un processus du
serveur Web IIS.
• La technologie ASP.NET prend également en charge les services Web WCF.
Les services Web WCF sont des applications distribuées qui transfèrent via
XML et SOAP des informations entre les clients, les applications et les autres
services Web WCF.

Remarque : pour plus d'informations sur les services WCF, consultez le module 12,
« Utilisation des services Windows Communication Foundation ».

• ASP.NET est un modèle de développement Web unifié, comprenant les


services nécessaires à la génération d'applications Web d'entreprise fiables
avec un minimum de codage. Vous pouvez coder vos applications dans tous
les langages compatibles avec CLR, notamment Visual Basic, Visual C# et
Microsoft Jscript® 8.0. Ces langages vous permettent de développer des
applications ASP.NET bénéficiant du Common Language Runtime, de la
cohérence des types, de l'héritage et autres fonctionnalités ASP.NET.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Exploration des applications Web Microsoft® ASP NET dans Microsoft Visual Studio® 2010 1-21

Le tableau ci-dessous décrit les différentes fonctionnalités d'ASP.NET.

Fonctionnalité Description
Infrastructure de page L'infrastructure de page et de contrôles englobe la
et de contrôles fonctionnalité d'interface utilisateur commune dans des
contrôles réutilisables et simples d'utilisation. Elle offre
également des fonctionnalités pour contrôler l'aspect
général de votre site Web grâce à des thèmes et à des
apparences. En plus des thèmes, vous pouvez définir des
pages maîtres et les utiliser afin de créer une disposition
cohérente pour les pages de votre application.

Compilateur ASP.NET Tout le code ASP.NET est compilé, offrant ainsi un typage
fort, l'optimisation des performances et une liaison
anticipée, entre autres. Une fois le code compilé, le
composant CLR continue de compiler le code ASP.NET
en code natif pour offrir de meilleures performances.

Infrastructure de ASP.NET offre une infrastructure de sécurité avancée pour


sécurité l'authentification et l'autorisation de l'accès de
l'utilisateur, et pour l'exécution d'autres tâches liées à la
sécurité. Vous pouvez authentifier les utilisateurs à l'aide
de l'authentification Windows fournie par IIS. Vous
pouvez également gérer l'authentification grâce à votre
propre base de données utilisateur via l'authentification
par formulaire et l'appartenance ASP.NET.

Fournisseur ASP.NET est toujours exécuté avec une identité Windows


d'authentification particulière. Vous pouvez donc sécuriser votre application
par formulaire en utilisant les fonctions de Windows, telles que le
contrôle d'accès au système de fichiers NTFS (listes ACL)
et les autorisations sur les bases de données.

Fonctionnalités de ASP.NET offre des fonctionnalités de gestion des états


gestion des états intégrées vous permettant de stocker des informations
entre les demandes de page, telles que des informations
client ou le contenu d'un panier d'achat.

Configuration Les applications ASP.NET utilisent un système de


ASP.NET configuration vous permettant de définir les paramètres
au niveau du serveur Web, d'un site Web ou des
applications individuelles. Vous pouvez créer des
paramètres de configuration lors du déploiement des
applications ASP.NET, puis en ajouter ou modifier ceux
existants à tout moment, avec un impact minimal sur les
serveurs et applications Web opérationnels.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
1-22 Introduction au développement Web avec Microsoft® Visual Studio® 2010

(suite)

Fonctionnalité Description

Fonctionnalités de ASP.NET comprend des fonctionnalités qui vous


performances et permettent de contrôler l'état et les performances de
contrôle d'état votre application ASP.NET. Le contrôle d'état ASP.NET
signale les événements et les informations clés
concernant l'intégrité d'une application ainsi que les
conditions d'erreur.

Prise en charge de la ASP.NET tire parti de l'infrastructure de débogage à


résolution des l'exécution pour offrir une prise en charge de débogage
problèmes interlangage et interordinateur. Vous pouvez à la fois
déboguer les objets managés et non managés, ainsi que
tous les langages pris en charge par CLR et les langages
de script. En outre, l'infrastructure de page ASP.NET offre
un mode trace vous permettant d'insérer des messages
d'instrumentation dans vos pages Web ASP.NET.

Services Web WCF ASP.NET prend en charge les services Web WCF. Un
service Web WCF est un composant qui contient des
fonctionnalités métier permettant aux applications
d'échanger des informations à travers des pare-feu,
grâce à des normes comme les messageries HTTP et XML.

Environnement ASP.NET comprend un environnement d'hébergement


d'hébergement extensible qui contrôle le cycle de vie d'une application,
extensible et gestion à partir du moment où l'utilisateur accède pour la
du cycle de vie des première fois à la ressource (une page de l'application,
applications par exemple) jusqu'à l'arrêt de l'application.

Environnement de ASP.NET inclut une prise en charge améliorée du


conception extensible concepteur pour les contrôles de serveur Web associés
aux outils de conception Visual, tels que
Visual Studio 2010.

ASP.NET Dynamic ASP.NET Dynamic Data est un framework qui vous


Data permet de créer facilement des applications Web
ASP.NET basées sur les données. Cette opération
s'effectue par repérage automatique des métadonnées du
modèle de données lors de l'exécution pour en dériver le
comportement de l'interface utilisateur. Nous aborderons
ASP.NET Dynamic Data dans le module 10.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Exploration des applications Web Microsoft® ASP NET dans Microsoft Visual Studio® 2010 1-23

Pour plus d'informations sur le contrôle d'état ASP.NET, consultez la


page Vue d'ensemble du contrôle d'état ASP.NET sur
http://go.microsoft.com/fwlink/?LinkID=192014&clcid=0x409.

Pour plus d'informations sur l'environnement de conception extensible,


consultez la page Vue d'ensemble des concepteurs de contrôles ASP.NET
sur http://go.microsoft.com/fwlink/?LinkID=192015&clcid=0x409.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
1-24 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Comp
posants des a
applications Web ASP.NET

Points clés
Une app plication Web AS
SP.NET englobe différents
d compossants. Pour la crééation
d'une ap pplication Web, iil est important de
d savoir commennt implémenter et utiliser
tous less composants.

Compo
osants d'une ap
pplication Web
b ASP.NET
Les com
mposants d'une ap
pplication Web ASP.NET
A sont les suivants :
• Forrmulaires Web ou u pages .aspx. Less formulaires Weeb fournissent l'in
nterface
utillisateur de l'application Web.
• Con ntrôles utilisateurr ou fichiers .ascx
x. Les contrôles utilisateur
u fournisssent
l'intterface utilisateurr pour les fonctio
onnalités spécifiqu
ues à réutiliser daans
d'auutres formulaires Web. Par exemp ple, un contrôle utilisateur
u avec zoones
de texte
t et validationn pour la saisie du
d nom d'utilisateeur et du mot de passe.
p
• Pagges maîtres ou fich hiers .master. Less pages maîtres offrent
o une interfaace
utillisateur simplifiéee et cohérente surr les formulaires Web.
W
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Exploration des applications Web Microsoft® ASP NET dans Microsoft Visual Studio® 2010 1-25

• Fichiers code-behind. Les fichiers code-behind sont associés aux formulaires


Web et contiennent le code côté serveur du formulaire Web. Vous pouvez
également créer une page ASP.NET constituée d'un fichier unique, qui contient
à la fois le balisage de page et le code .NET Framework. En d'autres termes, le
code et le balisage de page partagent un même fichier.
• Fichiers de configuration. Les fichiers de configuration sont les fichiers XML
qui définissent les paramètres de l'application et du serveur Web. Chaque
application Web possède au minimum un fichier de configuration web.config
et chaque serveur Web ne possède qu'un seul fichier machine.config.
• Fichier Global.asax. Le fichier d'application Global.asax contient le code qui
permet de répondre aux événements au niveau de l'application déclenchés par
ASP.NET, tels que les erreurs non gérées.
• Références du service WCF. Les références du service WCF permettent aux
applications Web d'envoyer et de recevoir des données à partir d'un service
Web WCF.
• Connectivité de base de données. La connectivité de base de données permet
aux applications Web de transférer des données à partir de sources de bases
de données et vers celles-ci.
• Éléments supplémentaires. Parmi les fichiers supplémentaires que vous
pouvez inclure dans une application Web, on compte les fichiers HTML pour
le contenu statique, les fichiers texte, et les fichiers XML et XSLT.
• CSS. Les fichiers CSS et les styles qu'ils contiennent entrent dans la conception
de l'application Web. Ils permettent de positionner des éléments sur un
formulaire Web et de spécifier les polices, les couleurs et le texte.

Question : quels outils de Visual Studio 2010 permettent de développer des


applications plus rapidement, plus facilement et en toute confiance ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
1-26 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Générration et ren
ndu du balisa
age et du cod
de

Points clés
Vous po ouvez créer vos aapplications dans Visual Studio 20 010 en ajoutant du d
balisagee et du code à voss pages Web. Cep pendant, lors de la
l compilation, lees
compilaateurs utilisent vo otre balisage et vo
otre code pour géénérer le balisagee et le
code qu ui s'affichent et see comportent corrrectement sur less clients. Cela signnifie que
le balisaage adhère à certaains standards qu ue les navigateurss des clients inten
ntionnels
peuventt restituer correcttement.

Généra
ation et rendu d
du code
La comp pilation du code pour votre site Web
W par les comp
pilateurs se dérou
ule en
plusieurrs étapes.

Remarq que : la description


n suivante concerne un projet de sitee Web ASP.NET et non un
projet d'application Web AASP.NET. Vous déccouvrirez les différrences entre ces de
eux types
de proje
ets dans des modules ultérieurs.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Exploration des applications Web Microsoft® ASP NET dans Microsoft Visual Studio® 2010 1-27

• Pour commencer, dans le cadre du déploiement sur le serveur Web sur lequel
le site Web sera exécuté, tous les fichiers du site Web sont copiés sur le
serveur Web de destination. Ce serveur Web peut être local ou distant.
ASP.NET compile les fichiers lorsqu'un utilisateur accède au site Web.
Le compilateur ASP.NET gère le processus de compilation dynamiquement,
sur une base individuelle. Le contenu du site Web est analysé et la compilation
réelle de chaque élément est transmise au compilateur approprié (Visual Basic
ou Visual C#).
Ce compilateur ASP.NET s'appelle le compilateur ASP.NET juste-à-temps.
Cela signifie que les fichiers de code et code-behind en ligne sont compilés.
Les formulaires Web et les contrôles utilisateur sont transformés en définition
de classe avec des méthodes visant à restituer la page ou le contrôle.
• Lors de la compilation d'une application, celle-ci est compilée en une ou
plusieurs assemblys dans le dossier Temporary ASP.NET Files lorsque la
première page est demandée. La première page n'est pas nécessairement la
page d'accueil ou la page par défaut. Les assemblys se trouvent dans un sous-
dossier dont le nom est dérivé d'une convention d'affectation de noms spéciale
qui autorise les noms de répertoire dynamiques et aléatoires. Cela permet de
localiser les assemblys plus facilement lors de la demande.
Ce modèle de compilation est très pratique. Les développeurs peuvent ouvrir
un formulaire Web ou un fichier code-behind correspondant et le modifier,
y compris sur le serveur Live, et les modifications prendront effet
immédiatement. Bien que le code source soit disponible sur le serveur Web,
un utilisateur de site Web ne peut pas nécessairement accéder au code source
et au balisage ; cette opération est restreinte par le serveur Web. Toutefois, le
code source est accessible à tous les utilisateurs de votre réseau possédant les
autorisations d'accès appropriées aux dossiers du serveur Web.
Si la visibilité du code source vous pose un problème, vous pouvez utiliser le
projet d'application Web au lieu du projet de site Web, ou encore utiliser le
modèle de précompilation.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
1-28 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Modè
èle d'exécution de comp
pilation dynamique ASP.N
NET

Points clés
Les pagges Web et les fich
hiers de code ASP
P.NET utilisent par défaut la comp pilation
dynamique lorsqu'un utilisateur demand de une ressource pour
p la première fois. Les
ressourcces compilées sonnt ensuite mises en cache, garantiissant ainsi l'efficaacité des
requêtes suivantes.
L'exécution de la compillation dynamiquee vous permet dee modifier le codee source
sans devvoir compiler exp
plicitement le cod
de avant de déplo
oyer l'application
n Web.
Dans cee modèle, vous déécouvrirez le foncctionnement de la compilation dyynamique
dans ASSP.NET lors de l'eenvoi des informaations au client effectuant la demaande.

Premièère demande
Lorsqu'un client demand de une page Web
b pour la premièrre fois, les événem
ments
suivantss se produisent :
1. Le navigateur
n du client émet une req
quête GET HTTP à l'intention du serveur.
s
2. L'an
nalyseur ASP.NE
ET interprète le co
ode source.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Exploration des applications Web Microsoft® ASP NET dans Microsoft Visual Studio® 2010 1-29

3. Si le code n'est pas encore compilé dans une bibliothèque de liens dynamiques
(DLL, Dynamic Link Libraries), ASP.NET appelle le compilateur.
4. Le runtime se charge et exécute le code Microsoft Intermediate Language
(MSIL).

Remarque : MSIL est un langage de programmation au niveau de l'assembly, exécuté


lors de l'exécution. Les différent compilateurs, tels que ceux de Visual Basic et Visual C#,
compilent le code Visual Basic et Visual C# en MSIL, qui est ensuite exécuté.

Deuxième demande
Lorsque l'utilisateur demande la même page Web une deuxième fois, les
événements suivants se produisent :
5. Le navigateur du client émet une requête GET HTTP à l'intention du serveur.
6. Le runtime charge et exécute immédiatement le code MSIL déjà compilé lors
de la première demande de la page.

Remarque : il se peut que le contenu .aspx soit encore analysé, en particulier si la page
de contenu a changé.

Précompilation
Vous pouvez choisir de précompiler un site dans son intégralité avant de le rendre
disponible aux utilisateurs. Les avantages de la précompilation sont les suivants :
• Temps de réponse amélioré pour les utilisateurs, car les pages et les fichiers
de code n'ont pas besoin de compilation à la première demande
• Possibilité d'identifier les erreurs de compilation avant que les utilisateurs
accèdent au site
• Possibilité de déployer le site Web sur un serveur de production sans le code
source

Précompilation des applications Web


ASP.NET peut précompiler un site Web avant de le rendre disponible aux
utilisateurs. Cela permet d'accélérer le temps de réponse, de vérifier les erreurs
et de protéger le code source, tout en garantissant un déploiement efficace.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
1-30 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Extensions ASP.NET Framewo


ork

Points clés
Il existee plusieurs framew
works dans le .NET Framework quiq offrent des
fonction nnalités propres à ASP.NET. Deux x d'entre eux sont ASP.NET Ajax
et Dynaamic Data ASP.NE ET.

Présen
ntation d'ASP.N
NET Ajax
ASP.NE ET Ajax est le fram
mework Ajax grattuit de Microsoft. Vous pouvez l'uttiliser
pour déévelopper des app plications Web in
nteractives et réacctives qui fonction nnent
avec less navigateurs les p
plus courants. AS
SP.NET Ajax perm met d'envoyer de manière
asynchrrone une section ou une partie d'u une page Web au serveur et de rép pondre
à la dem
mande du serveurr de façon à ne paas distraire ou intterrompre l'utilisaateur.
Le fram
mework ASP.NET Ajax peut être uttilisé avec le code côté serveur et lees
contrôlees produisant auttomatiquement lee code côté clientt. Ce framework peut p
égalemeent être utilisé po
our la création de contrôles et de code
c JavaScript côôté client.
Le fram
mework ASP.NET Ajax comprend le l kit Ajax Contro ol Toolkit, un enssemble
de contrrôles côté client eextrêmement inteeractif, et la biblio
othèque jQuery, une
u
biblioth
hèque JavaScript ccomplète.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Exploration des applications Web Microsoft® ASP NET dans Microsoft Visual Studio® 2010 1-31

Les développeurs familiarisés avec le modèle de programmation côté serveur


ASP.NET peuvent utiliser les contrôles côté serveur ASP.NET Ajax pour ajouter
des fonctionnalités Ajax à une application ASP.NET sans devoir écrire un code
JavaScript.
La bibliothèque côté client ASP.NET Ajax vous permet de générer des applications
côté client élaborées.
La bibliothèque jQuery est une bibliothèque JavaScript open source.

Remarque : pour plus d'informations sur ASP.NET Ajax, consultez le module 11,
« Création d'une application de formulaires Web Ajax Microsoft ASP.NET ».

Présentation de Dynamic Data ASP.NET


Dynamic Data ASP.NET apporte une grande facilité d'utilisation et des
modifications de développement d'application rapide (RAD, rapid application
development) aux contrôles de données ASP.NET existants. Le RAD tire
considérablement parti d'un framework en échafaudage élaboré. Lorsque vous êtes
connecté à une source de données, vous pouvez utiliser Dynamic Data ASP.NET
pour créer un site Web piloté par les données et entièrement fonctionnel.
L'intégralité des opérations CRUD (création, lecture, mise à jour et suppression)
est prise en charge. La validation active est automatiquement disponible et offre
une validation basée sur les contraintes de la base de données pour le type de
données, la longueur du champ et les champs nullables.
Par conséquent, Dynamic Data ASP.NET est un framework qui vous permet de
créer facilement des applications Web ASP.NET pilotées par les données. Cette
opération s'effectue par repérage automatique des métadonnées du modèle de
données lors de l'exécution pour en dériver le comportement de l'interface
utilisateur. Un framework en échafaudage offre un site Web fonctionnel pour
afficher et modifier les données. Vous pouvez facilement le personnaliser en
changeant ou en créant des éléments pour remplacer le comportement par défaut.
Les applications existantes peuvent facilement intégrer les éléments en
échafaudage dans les pages ASP.NET.

Remarque : pour plus d'informations sur Dynamic Data ASP.NET, consultez le module 10,
« Gestion des données avec Microsoft Dynamic Data ASP.NET ».
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
1-32 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Leçon 3
Vue d'en
nsemble d
de l'appliication de
e l'atelierr
pratique
e

Dans ceette leçon, vous ex


xplorerez l'appliccation de l'atelier pratique que vou us
générerez durant le restaant de ce cours. Vous
V explorerez également
é une veersion
complètte de l'application
n de l'atelier pratiique et en découvvrirez certaines
fonction
nnalités.

Objecttifs de la leçon
Au term
me de cette leçon, vous serez à mêm
me d'effectuer less tâches suivantess :
• déccrire le scénario d
de l'atelier pratiqu
ue ;
• déccrire la configurattion de l'applicatiion de l'atelier praatique ;
• exp
plorer le .NET Fraamework ;
• exp
plorer Visual Stud
dio 2010 ;
• afficcher les composaants d'un projet d'application
d Web
b ASP.NET 4.0.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Exploration des aapplications Web Microsooft® ASP NET dans Microosoft Visual Studio® 2010 1-33

Scéna
ario de l'ateliier pratique

Vous êtes développeur ju unior chez Conto oso, Ltd. Une de vos
v missions con nsiste
à créer une
u application W Web de gestion de d la clientèle pou
ur gérer vos clientts
électron
niquement où que vous soyez sur l'intranet, sans in nstaller de logicieel
supplémmentaire sur le cliient. L'application
n Web sera égaleement disponible sur
Internett pour les employyés des sites distaants qui ne sont pas
p connectés à l''intranet.
Pour ce faire, vous devezz choisir un outil et une plateform
me de développem ment qui
vous peermettront de créer une application Web simple avvec un minimum de
codage.
Le déveeloppeur principaal vous recommannde de vous famiiliariser avec les fonctions
f
et foncttionnalités de .NE
ET Framework 4 et Visual Studio 2010,
2 en consultant une
solutionn ou une applicattion Web qui pou
urrait potentiellem
ment servir de prrototype
à un nouveau projet.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
1-34 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Configuration de l'application
n de l'atelier pratique

Cette prrocédure pas à paas de la solution de l'atelier pratiq


que vous permet ded
générer l'application Weeb de gestion de la
l clientèle qui peermettra à l'équippe de
vente dee Contoso, Ltd de gérer les élémen nts en rapport avvec la clientèle et le pays.

Exigen
nces de l'applica
ation
L'appliccation doit répondre aux exigencees fonctionnelles et de l'interface utilisateur
u
énumérrées dans les sectiions correspondaantes.

Exigen
nces fonctionneelles
• Offr
frir des possibilitéés de connexion.
• Stocker des lignes d
de clientèle.
• Crééer des lignes de cclientèle.
• Modifier des lignes d
de clientèle existaantes.
• Affiicher des informaations sur un clien
nt unique.
• Affiicher le nom de to
ous les clients daans une vue type feuille de calcul.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Exploration des applications Web Microsoft® ASP NET dans Microsoft Visual Studio® 2010 1-35

• Modifier une ligne de clientèle dans une vue type feuille de calcul.
• Valider les entrées utilisateur, notamment en s'assurant que les informations
requises sont entrées et dans le format correct.
• Stocker des lignes de pays.
• Créer des lignes de pays.
• Modifier des lignes de pays existantes.
• Afficher des informations sur un seul pays.
• Afficher toutes les données relatives au pays dans une vue type feuille de calcul.
• Modifier des données relatives au pays dans une vue type feuille de calcul.
• Accéder directement aux informations relatives à la clientèle ou au pays en
passant par l'ID dans l'URL.
• Proposer toutes les lignes de pays aux fournisseurs et aux clients externes
grâce à un service WCF ou à un formulaire Web indépendant.

Exigences de l'interface utilisateur


• Présenter les messages d'erreur de validation d'entrée à côté des champs de
saisie ayant échoué lors de la validation.
• Rendre la navigation cohérente dans toute l'application en affichant le même
menu sur toutes les pages.
• Afficher le chemin de la page ou de l'emplacement actuellement à l'écran.

Génération d'application
Une seule application sera générée tout au long des modules, même si les exercices
de l'atelier pratique des premiers modules ne font que présenter les concepts à
utiliser dans les modules suivants.

Utilisation de l'application de gestion de la clientèle


L'application de gestion de la clientèle est conçue pour permettre à l'équipe de
vente de Contoso Pharmaceuticals de gérer les données en rapport avec les clients
et les pays. Un client unique se trouve dans un pays spécifique, mais plusieurs
clients peuvent vivre dans le même pays. Il existe donc une relation plusieurs-à-un
entre les clients et les pays.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
1-36 Introduction au développement Web avec Microsoft® Visual Studio® 2010

L'application est constituée des composants suivants :


• Page d'accueil. Simple page d'accueil sur laquelle est dirigé l'utilisateur lorsqu'il
ouvre l'application.
• Menu. Menu accessible sur toutes les pages, basé sur un fichier SiteMap XML
et offrant les fonctionnalités énumérées dans le tableau suivant.

Fonction Description

Customers New : crée une ligne de clientèle.


All : affiche toutes les lignes de clientèle.

Countries New : crée une ligne de pays.


All : affiche toutes les lignes de pays.

Import Importe les pays à partir d'un fichier XML.

About Affiche une boîte de dialogue About modale.

Chemin de navigation
Le chemin de navigation indique l'emplacement actuel dans l'application et le
chemin de la page ou du formulaire Web.

Page Customers
Les lignes de clientèle sont stockées dans la base de données CustomerManagement,
dans la table Customers. La page Customers affiche les informations suivantes :

Champ Description

ID Identificateur unique du client. Ce champ est en lecture seule et


est automatiquement affecté. La valeur de ce champ peut servir
à accéder directement à un client spécifique.

First Name Prénom du client, limité à 50 caractères. Ce champ est obligatoire.

Last Name Nom du client, limité à 30 caractères. Ce champ est obligatoire.


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Exploration des applications Web Microsoft® ASP NET dans Microsoft Visual Studio® 2010 1-37

(suite)

Champ Description

Address Adresse du client. Elle doit contenir un nom de rue, et un numéro


de maison et de porte. Elle est limitée à 50 caractères. Ce champ
est obligatoire.

Zip Code Code postal du client, limité à 10 caractères. Ce champ est


obligatoire.

City Nom de la ville dans laquelle réside le client, limitée à


30 caractères. Ce champ est obligatoire.

State Nom de l'État ou de la région où réside le client, limité à


30 caractères.

Country ID unique du pays dans lequel réside le client. Ce champ est


obligatoire.

Phone Numéro de téléphone du client, enregistré dans le format


approprié au pays dans lequel réside le client. Il est limité à
30 caractères.

E-mail Address Adresse de messagerie du client, limitée à 50 caractères.

Web Address Adresse Web (URL) du client, limitée à 80 caractères.

Credit Limit Limite de crédit affectée au client. Ce champ est obligatoire et


n'accepte que les chiffres de 0 à 9.

News Subscriber Champ Boolean indiquant si le client est abonné aux bulletins
d'informations. Le cas échéant, l'adresse de messagerie doit
obligatoirement être renseignée.

Created Date Date à laquelle la ligne de clientèle a été créée dans l'application.
Elle est affectée automatiquement. Ce champ est en lecture seule.

Un client réside dans un pays ; les informations sur ce pays sont enregistrées dans
la table Countries, qui est référencée à partir de la table Customers.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
1-38 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Validation d'entrée
Le formulaire Web Customers permet de valider des entrées grâce à plusieurs
techniques. La validation d'entrée, qui doit avoir lieu à la fois côté client et côté
serveur, comprend les fonctionnalités suivantes :
• Lors de l'ajout ou de la modification d'une ligne de clientèle, vous devrez
renseigner les champs First Name, Last Name, Address, Zip Code, City,
Country et Web Address. Un message s'affichera s'il manque des informations
obligatoires, ou lors de l'enregistrement ou de la mise à jour des informations
client.
• La zone de texte du champ Credit Limit n'accepte que les caractères
numériques et les nombres inférieurs ou égaux à 50 000.
• Le champ E-mail Address doit contenir une adresse de messagerie valide,
le cas échéant.
• Le champ Web Address doit contenir une adresse Web valide (URL).

Page Countries
Les lignes de pays sont stockées dans la table Countries de la base de données
Contoso. La page Countries affiche les informations énumérées dans le tableau
suivant :

Champ Description

ID Champ en lecture seule contenant l'identificateur unique d'un


pays. La valeur de ce champ peut servir à accéder directement
à un pays spécifique.

Name Nom du pays, limité à 50 caractères. Ce champ est obligatoire.

Phone No. Format Format régissant l'affichage et la saisie d'un numéro de


téléphone. Limité à 30 caractères. Le formatage sera appliqué à
l'entrée utilisateur une fois ce champ spécifié dans la base de
données.

Dialing Country Indicatif téléphonique international pour appeler en dehors du


Code pays ; par exemple, 1 pour le Canada et les États-Unis, 45 pour
le Danemark, 44 pour la Grande-Bretagne, 353 pour l'Irlande et
34 pour l'Espagne. Il apparaît souvent sous la forme +1 ou +45
afin d'indiquer que le préfixe doit être utilisé pour appeler en
dehors du pays d'origine de l'appel. Ce champ est obligatoire.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Exploration des applications Web Microsoft® ASP NET dans Microsoft Visual Studio® 2010 1-39

(suite)

Champ Description

International Code ou numéro qui doit être utilisé pour composer un


Dialing Code numéro en dehors du pays d'appel d'origine . par exemple,
011 pour les États-Unis et 00 pour les pays membres de l'Union
européenne. Ce champ est obligatoire.

Internet Top Level Domaine de niveau supérieur (TLD) propre au pays pour les
Domain domaines Internet ; par exemple, .dk pour le Danemark, .de
pour l'Allemagne, .ie pour l'Irlande, .no pour la Norvège ou
.au pour l'Australie. Ce champ est obligatoire.

Validation d'entrée
Le formulaire Web Countries permet de valider une entrée lors de la création ou
de la modification des pays grâce à différentes techniques. La validation d'entrée,
qui doit avoir lieu à la fois côté client et côté serveur, comprend les fonctionnalités
suivantes :
• Lors de l'ajout ou de la modification d'un pays, vous devrez renseigner les
champs Name, Internet Top Level Domain et International Dialing Code.
Un message s'affichera s'il manque des informations lors de l'enregistrement
ou de la mise à jour des données sur le pays.
• La zone de texte du champ International Dialog Code n'accepte que les
caractères numériques au format 999.

Connexion
L'utilisateur doit se connecter et les contrôles de connexion standard ASP.NET
doivent être visibles sur toutes les pages. À l'aide des contrôles de connexion
standard ASP.NET, l'utilisateur peut voir qui vient de se connecter. Il se déconnecte
en cliquant sur le lien approprié. Les noms d'utilisateur et les mots de passe sont
stockés dans la base de données de profil standard ASPNETDB, créée sur
SQL Server 2008 Express Edition.

Page de connexion
La page de connexion vers laquelle les utilisateurs non authentifiés sont
automatiquement redirigés permet à une personne d'entrer son nom d'utilisateur
et son mot de passe pour accéder à l'application. La page de connexion affiche les
informations suivantes :
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
1-40 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• User name : nom d'utilisateur de la personne essayant de s'authentifier.


• Password : mot de passe associé au nom d'utilisateur indiqué. La valeur
de ce champ doit respecter la casse.
• Login : bouton de connexion qui lance le processus d'authentification des
informations d'identification de l'utilisateur.

Validation d'entrée
Le formulaire Web de connexion fourni permet de valider une entrée lors de
l'authentification d'un utilisateur. La validation d'entrée, qui doit avoir lieu à la
fois côté client et côté serveur, comprend les fonctionnalités suivantes :
• Lors de l'authentification, vous devrez renseigner les champs User name et
Password. Un message s'affichera s'il manque des informations une fois que
l'utilisateur aura cliqué sur le bouton Login.

Base de données
La base de données CustomerManagement est une base de données
SQL Server 2008 contenant deux tables : Customers et Countries.
La table Customers comprend les champs suivants.

Valeur par
défaut / fonction
Nom du Transact-SQL
champ Type de données Taille Obligatoire (T-SQL) Description

ID uniqueidentifier N/A Oui newsequentialid() ID unique de la ligne


de clientèle,
automatiquement
affecté par la base de
données si aucun ID
n'est fourni lors de
l'insertion. Il s'agit de
la clé primaire.

FirstName nvarchar 50 Oui Prénom du client.


Il s'agit d'un index non
unique et non mis en
cluster, trié par ordre
croissant.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Exploration des applications Web Microsoft® ASP NET dans Microsoft Visual Studio® 2010 1-41

(suite)
Valeur par
défaut / fonction
Nom du Transact-SQL
champ Type de données Taille Obligatoire (T-SQL) Description
LastName nvarchar 30 Oui Nom du client. Il s'agit
d'un index non unique
et non mis en cluster,
trié par ordre croissant.

Address nvarchar 50 Oui Adresse du client


comprenant le nom de
la rue et le numéro de
porte.

Phone varchar 30 Non Numéro de téléphone


du client, enregistré
sous le format
approprié au pays de
résidence du client.

ZipCode nvarchar 10 Oui Code postal du client.

City nvarchar 30 Oui Nom de la ville dans


laquelle réside le client.
Il s'agit d'un index non
unique et non mis en
cluster, trié par ordre
croissant.

State nvarchar 30 Non Nom de la région ou de


l'État dans lequel réside
le client.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
1-42 Introduction au développement Web avec Microsoft® Visual Studio® 2010

(suite)

Valeur par
défaut / fonction
Obligatoir Transact-SQL
Nom du champ Type de données Taille e (T-SQL) Description

CountryID uniqueidentifier N/A Oui ID unique du pays dans


lequel réside le client.
Clé étrangère qui
référence l'ID du pays
correspondant dans la
table Countries.

EmailAddress nvarchar 50 Non Adresse de messagerie


du client. Il s'agit d'un
index non unique et
non mis en cluster, trié
par ordre croissant.

Url nvarchar 80 Non Adresse du site Web du


client.

CreditLimit int N/A Oui 50,000 Limite de crédit


affectée au client.

NewsSubscriber bit Non Indique si le client est


abonné aux bulletins
d'informations Contoso.

CreatedDate smalldatetime N/A Oui getdate() Date à laquelle la ligne


de clientèle a été créée
dans l'application. Elle
est automatiquement
affectée par la base de
données.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Exploration des applications Web Microsoft® ASP NET dans Microsoft Visual Studio® 2010 1-43

La table Countries comprend les champs suivants.

Valeur par
défaut / fonction
Obligatoir Transact-SQL
Nom du champ Type de données Taille e (T-SQL) Description

ID uniqueidentifier Non Oui newsequentialid() Champ en lecture


applic seule contenant
able l'identificateur unique
d'un pays. Il s'agit de
la clé primaire.

Name nvarchar 50 Oui Nom du pays. Il s'agit


d'un index unique et
non mis en cluster, trié
par ordre croissant.

PhoneNo varchar 30 Non Format d'affichage et


Format de saisie d'un numéro
de téléphone.

DialingCountry varchar 5 Oui Indicatif téléphonique


Code international pour
appeler en dehors du
pays ; par exemple,
1 pour le Canada et
les États-Unis, 45 pour
le Danemark, 44 pour
la Grande-Bretagne,
353 pour l'Irlande et
34 pour l'Espagne. Il
apparaît souvent sous
la forme +1 ou +45
afin d'indiquer que le
préfixe doit être utilisé
pour appeler en
dehors du pays
d'origine de l'appel.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
1-44 Introduction au développement Web avec Microsoft® Visual Studio® 2010

(suite)

Valeur par
défaut / fonction
Obligatoir Transact-SQL
Nom du champ Type de données Taille e (T-SQL) Description

International varchar 5 Oui Code ou numéro qui


DialingCode doit être utilisé pour
composer un numéro
en dehors du pays
d'appel d'origine . par
exemple, 011 pour les
États-Unis et 00 pour
les pays membres de
l'Union européenne.
Ce champ est
obligatoire.

InternetTLD char 2 Oui Domaine de niveau


supérieur (TLD)
propre au pays pour
les domaines Internet ;
par exemple, .dk pour
le Danemark, .de pour
l'Allemagne, .ie pour
l'Irlande, .no pour la
Norvège ou .au pour
l'Australie.

Pays existants
Une mise à jour mensuelle des lignes de pays est envoyée électroniquement à
Contoso, Ltd. Ces lignes sont ensuite placées dans un fichier XML unique. Ces
données doivent être importées dans la table Countries. Toutefois, cela concerne
uniquement les pays contenant une valeur dans le champ PhoneNoFormat.

Page d'importation de pays


Le formulaire Web Import Countries comprend une étiquette, un contrôle de
sélection des fichiers pour localiser le fichier XML contenant les données du pays à
importer, et des boutons permettant de charger ou d'importer les données avant de
les exporter vers la base de données SQL Server 2008.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Exploration des aapplications Web Microsooft® ASP NET dans Microosoft Visual Studio® 2010 1-45

Procé
édure pas à p
pas : solution
n de l'atelier pratique

Dans ceette démonstratio on, l'instructeur décrira


d les fonctio
ons et fonctionnallités de
l'applicaation de gestion d
de la clientèle. Vo
ous pouvez ouvrirr la solution de l'atelier
pratiquee sur les machinees virtuelles et suivre les étapes déécrites. Ouvrez le code de
la solutiion en accédant aau fichier « CustoomerManagement solution » conteenu dans
le dossier D:\Labfiles\So olution\M16\VB B ou D:\Labfiles\S Solution\M16\C CS.
Le formmulaire Web Defau ult.aspx fait office de page d'accueeil pour l'applicattion Web
de gestiion de la clientèlee. Comme les autres formulaires Web W de l'applicatiion, le
fichier Default.aspx
D est b
basé sur la page maître
m Site.masterr. Les utilisateurss peuvent
accéderr à d'autres formu ulaires Web grâcee aux contrôles Menu
M ou SiteMapP Path.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
1-46 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Démo
onstration : e
exploration du
d .NET Fram
mework

Points clés
Dans ceette démonstratio
on, vous examinerez le .NET Fram mework dans le caadre du
dévelop
ppement d'une ap pplication Web ett explorerez les extensions
ASP.NEET Framework, no otamment Ajax Extensions,
E Ajax Library
L et Dynam
mic Data.

Procéd
dure de démonsstration
Les tâch
hes principales so
ont les suivantes :
1. Ouvvrez Visual Studiio 2010.
• Dans le menu D
Démarrer de 10557A-GEN-DEV, pointez
p sur Touss les
programmes, clliquez sur Microsoft Visual Studio 2010, puis surr
Microsoft Visua
al Studio 2010.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Exploration des applications Web Microsoft® ASP NET dans Microsoft Visual Studio® 2010 1-47

2. Ouvrez la solution de l'atelier pratique terminée.


• Sur la page de démarrage, dans la fenêtre Microsoft Visual Studio
(Administrateur), accédez au menu Fichier, puis cliquez sur Ouvrir un
projet.
• Dans la boîte de dialogue Ouvrir un projet, dans la zone Nom de fichier,
entrez D:\Labfiles\Starter\M16\VB\CustomerManagement.sln ou
D:\Labfiles\Starter\M16\CS\CustomerManagement.sln, puis cliquez
sur Ouvrir.
3. Examinez les espaces de noms et les classes du .NET Framework, notamment
System.Web et System.Web.UI, et examinez la classe System.Web.UI.Page.
4. Explorez les fonctionnalités d'Ajax Extensions et Ajax Library.
• Exécutez la solution et affichez la boîte About en cliquant sur
About dans le menu ? (Help).

Remarque : vous apprendrez à mieux connaître les fonctionnalités offertes par


Ajax Extensions et Ajax Library dans le module 11, « Création d'une application
Web Forms Ajax Microsoft® ASP.NET ».

5. Explorez le fonctionnement de Dynamic Data.


• Exécutez la solution.
• Dans le menu Customers, cliquez sur All.
• Dans le menu Countries, cliquez sur All.
6. Si vous avez le temps, consultez le code pour les exercices de l'atelier pratique
du module 6 et des modules ultérieurs.

Remarque : vous verrez plus en détail le fonctionnement de Dynamic Data dans le


module 10, « Gestion des données avec Microsoft Dynamic Data ASP.NET ».

Résultat : à la fin de cette démonstration, vous aurez une compréhension élémentaire


des fonctionnalités de .NET Framework 4 dans le cadre du développement d'une
application Web, notamment de certaines nouvelles fonctionnalités telles que Ajax et
Dynamic Data.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
1-48 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Démoonstration : EExploration des


d affichage
es et des con
ntrôles
de Vissual Studio 2
2010

Dans ceette démonstratioon, vous apprendrez à utiliser Visu


ual Studio 2010 ene tant
qu'outill unique pour gén
nérer des applications Web en exp plorant les affichaages, en
concevaant des formulaires Web, en ajouttant du code, et en
n utilisant des
compossants et des contrrôles.

Procéd
dure de démonsstration
Les tâch
hes principales so
ont les suivantes :
1. Ouvvrez Microsoft Viisual Studio 2010
0.

• Dans le menu D
Démarrer de 10557A-GEN-DEV, pointez
p sur Touss les
programmes, clliquez sur Microsoft Visual Studio 2010, puis surr
Microsoft Visua
al Studio 2010.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Exploration des applications Web Microsoft® ASP NET dans Microsoft Visual Studio® 2010 1-49

2. Créez un site Web ASP.NET avec les paramètres suivants :


Nom : WebSite1
Emplacement : système de fichiers
Langage : Visual Basic ou Visual C#
• Sur la page de démarrage, dans la fenêtre Microsoft Visual Studio
(Administrateur), accédez au menu Fichier, puis cliquez sur Nouveau
site Web.
• Dans la boîte de dialogue Nouveau site Web, dans le volet gauche, sous
Modèles installés, cliquez sur Visual Basic ou Visual C#.
• Dans le volet du milieu, vérifiez que .NET Framework 4 est sélectionné
dans la liste des frameworks cibles.
• Dans la boîte de dialogue Nouveau site Web, dans le volet du milieu,
cliquez sur Site Web ASP.NET vide.
• Dans la liste Emplacement Web, vérifiez que l'option Système de fichiers
est sélectionnée, puis cliquez sur OK.
3. Ajoutez le formulaire Web Default.aspx au site Web CustomerManagement.
• Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le site
Web, puis cliquez sur Ajouter un nouvel élément.
• Dans la boîte de dialogue Ajouter un nouvel élément, dans le panneau du
milieu, cliquez sur Web Form. Dans la zone Nom, entrez Default.aspx,
puis cliquez sur Ajouter.
4. Ouvrez le formulaire Web dans les modes Création et Source.
• Dans la fenêtre Default.aspx, cliquez sur Création.
• Dans la fenêtre Default.aspx, cliquez sur Source.
• Dans la fenêtre Default.aspx, cliquez sur Création.
5. Ajoutez un contrôle Button au formulaire Web.
• Dans la fenêtre Default.aspx, sélectionnez l'élément div.
• Dans la fenêtre CustomerManagement – Microsoft Visual Studio
(Administrateur), pointez sur Boîte à outils.
• Dans la Boîte à outils, développez Standard et double-cliquez sur le
contrôle Button.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
1-50 Introduction au développement Web avec Microsoft® Visual Studio® 2010

6. Ajoutez le code à l'événement Button Click.


• Dans la fenêtre InsertCustomer.aspx, cliquez sur le contrôle Button.
• Dans la fenêtre Propriétés, cliquez sur l'icône Événements et double-
cliquez dans la zone en regard de l'événement Click.

Résultat : à la fin de cette démonstration, vous comprendrez les avantages liés à


l'utilisation de Visual Studio 2010 pour le développement des applications ASP.NET.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Exploration des aapplications Web Microsooft® ASP NET dans Microosoft Visual Studio® 2010 1-51

Démoonstration : e
explorer les composants
c d'un projet
d'app
plication Webb ASP.NET 4.0

Dans ceette démonstratioon, vous examinerez les différents composants d'un n projet
d'appliccation Web, notammment le fichier solution, le fichieer projet, les dosssiers
ASP.NE ET, les formulaires Web, les fichierrs code-behind, lees fichiers de classse, le
fichier d'informations
d dee l'assembly, les références, les fich
hiers web.config ete les
fichiers de code du conccepteur.

Procéd
dure de démonsstration
Les tâch
hes principales so
ont les suivantes :
1. Exaaminez les fichierrs solution et projjet, ainsi que les références.
r
• Dans l'Explorateeur de solutions, repérez les fichieers solution et projet,
et identifiez la d
destination des rééférences de projeet.
2. Exaaminez les dossieers ASP.NET.
• Dans l'Explorateeur de solutions, passez en revue les dossiers ASP..NET,
et si le temps le permet, créez-en
n un.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
1-52 Introduction au développement Web avec Microsoft® Visual Studio® 2010

3. Examinez les formulaires Web, les fichiers de code du concepteur, les fichiers
code-behind et les fichiers de classe.
• Dans l'Explorateur de solutions, passez en revue les différents fichiers.
4. Examinez le fichier d'informations de l'assembly et les fichiers web.config.
• Dans l'Explorateur de solutions, passez en revue les différents fichiers.

Résultat : à la fin de cette démonstration, vous aurez identifié et examiné les


fonctionnalités et l'importance des composants d'une application Web ASP.NET 4.0.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Exploration des aapplications Web Microsooft® ASP NET dans Microosoft Visual Studio® 2010 1-53

Récap
pitulatif de l'atelier pratiq
que

Parcou
urir les question
ns et les répon
nses
1. Quels sont les princcipaux avantages de l'utilisation d'A
ASP.NET ?
2. Quel est la fonction des fichiers codee-behind dans ASP.NET ?
3. À quoi
q servent les fo
ormulaires Web ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
1-54 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Récapitu
ulatif du m
module et
e élémen
nts à retenir

Parcou
urir les question
ns et les répon
nses
1. Quels sont les comp
posants de .NET Framework
F 4?
2. Quel est la fonction des listes de con
ntrôle d'accès ?
3. Vouus devez créer un
n composant Web b programmable pour le partager entre
plusieurs application
ns Web. Quel typ
pe de composant devez-vous créerr ?
4. Vouus devez développper une applicatiion contenant dees projets qui cibllent
plusieurs versions d
de .NET Framewo ork. Quel outil utiilisez-vous ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Exploration des applications Web Microsoft® ASP NET dans Microsoft Visual Studio® 2010 1-55

Problèmes et scénarios réels


1. Vous ne connaissez pas bien les fonctionnalités d'une classe en particulier.
Comment faites-vous pour les déterminer ?
Utilisez la documentation .NET Framework, les sites Web ou les
communautés en ligne.
2. Vous ne savez pas si vous devez utiliser la compilation dynamique ou la
précompilation. Quels sont les facteurs à prendre en compte ?
Utilisez la compilation dynamique dans les cas suivants :
• pour modifier votre code source sans devoir le compiler explicitement
avant le déploiement de l'application Web ;
• pour étendre le système de génération ASP.NET en créant des fournisseurs
sur mesure pour les nouveaux types de fichiers appelés lors de la
compilation.
Utilisez la précompilation dans les cas suivants :
• pour optimiser le temps de réponse ;
• pour identifier les erreurs de compilation avant que les utilisateurs
accèdent au site ;
• pour déployer le site Web sur un serveur de production sans le code
source.

Outils
Outil Objectif Où rechercher

Visual Studio 2010 Développement Menu Démarrer


d'applications Web
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'applications Web à l'aide de Microsoft® Visual Studio® 2010 et des langages Microsoft .NET 2-1

Module 2
Création d'applications Web à l'aide de
Microsoft® Visual Studio® 2010 et des
langages Microsoft .NET
Table des matières :
Leçon 1 : Sélection d'un langage de programmation 2-3
Leçon 2 : Présentation générale de Visual Studio 2010 2-15
Leçon 3 : Création d'une application Web simple 2-33
Atelier pratique : Création d'applications Web à l'aide de Microsoft
Visual Studio 2010 et des langages Microsoft .NET 2-54
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
2-2 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Vue d'en
nsemble du modu
ule

Microso oft® Visual Studioo® 2010 constituee un environnem ment de développeement


complett qui vous permeet de créer des sollutions Web d'en ntreprise puissanttes et
fiables. Vous
V avez le choix entre différentts langages de proogrammation pou ur
développper des applicatiions Microsoft .NNET Framework. Vous V devez conn naître les
aspects fondamentaux lorrsque vous écrivezz du code et créezz des composants à l'aide
de deux x des langages .NNET Framework : Microsoft Visual C#® et Microsofft Visual
Basic®. Visual
V Studio 2010 offre des foncctionnalités de dévveloppement Weeb de
bout enn bout, ainsi que ddes composants côté
c serveur évolu
utifs et réutilisables. Ces
fonctionnnalités et compo osants vous permmettent d'amélioreer votre productivvité, et de
créer dees applications ett sites Web Microosoft ASP.NET de façon efficace.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'applications Web à l'aide de Microsoft® Viisual Studio® 2010 et des langages Microsoft .NET 2-3

Leçon 1
Sélection d'un la
angage de
e program
mmation
n

Points clés
Pour crééer vos applicatio ons Web, vous diisposez d'un largee choix de langagges de
program mmation. Pendan nt de nombreusess années, le choix x des programmeurs en
matière de langage de prrogrammation déépendait de la plaateforme disponib ble, du
framework et de l'enviro onnement de déveeloppement intéggré (IDE), bien qu ue
certainss programmeurs ssélectionnaient un u langage de pro ogrammation uniq quement
car ils en
n appréciaient la ssyntaxe. Néanmoin ns, tout ceci a chaangé avec l'arrivée de .NET
Framew work, car cette inffrastructure ne déépend pas du lan ngage de program mmation.
En effett, le langage MSIL L (Microsoft interrmediate languagge) lancé au mom ment de
l'exécuttion est converti een code machine lorsque le prograamme est exécuté par le
Commo on Language Run ntime (CLR) .NET T.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
2-4 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Pour qu'un langage de programmation soit compatible avec .NET Framework, le


compilateur correspondant doit, au moment de la génération, compiler le code
en MSIL (plus communément appelé IL). Lors de l'exécution, le compilateur
juste-à-temps (JIT) compile le langage MSIL. En effet, le CLR .NET ne comprend
qu'un seul langage : le MSIL. Par conséquent, si votre plateforme ou framework
est .NET Framework, vous avez le choix entre plusieurs langages de programmation.
De nombreux langages de programmation de .NET Framework disposent de la
bibliothèque de classes de base (BCL) .NET Framework, qui offre la plupart des
fonctionnalités. En général, ce ne sont pas les fonctionnalités qui distinguent les
langages de programmation, mais la syntaxe, la structure de code et l'éditeur
correspondant dans lequel vous écrivez le code.
Visual Studio 2010 inclut Visual Basic et Visual C# pour faciliter la création
d'applications Web. Le développement Web est devenu très puissant ; toutefois, il
n'a jamais été aussi simple depuis l'intégration d'ASP.NET Asynchronous JavaScript
and XML (Ajax), de la bibliothèque Ajax, de Dynamic Data, de la requête LINQ
(Language Integrated Query), de nombreux contrôles, de la prise en charge des
feuilles de style en cascade (CSS) et des scripts, tels que JavaScript et jQuery.
Dans cette leçon, vous découvrirez les fonctionnalités de Visual Basic et de Visual C#,
et examinerez les éléments à prendre en considération lors de la sélection de l'un
de ces deux langages de programmation. Certaines situations exigeront plusieurs
langages de programmation dans une même application ; vous devez donc être
capable d'utiliser du code dans des scénarios à plusieurs langages.

Objectifs de la leçon
Au terme de cette leçon, vous serez à même d'effectuer les tâches suivantes :
• décrire les fonctionnalités de Visual Basic ;
• décrire les fonctionnalités de Visual C# ;
• décrire les scénarios adaptés aux environnements faisant appel à plusieurs
langages ;
• décrire les éléments à prendre en considération afin de choisir entre
Visual Basic et Visual C# pour une application.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'applications Web à l'aide de Microsoft® Viisual Studio® 2010 et des langages Microsoft .NET 2-5

Foncttionnalités de
e Visual Basiic

Points clés
Bien quue la version actueelle de Visual Bassic 10.0 soit conççue autour de .NE ET
Framew work, si vous avezz l'habitude de déévelopper des app plications sous Visual
V
Basic 6.0, ou une versionn antérieure, baséé sur le modèle COMC (Componen nt Object
Model), vous trouverez VVisual Basic 10.0 siimple d'utilisation
n. Alors que Visuall Basic 6.0
néralement utiliséé pour créer des composants COM
était gén M et des applicatiions
Window ws®, Visual Basic 10.0 permet de développer
d tout type
t d'application
n ou de
service .NET Framework k, notamment dess applications Weeb, des applicatio ons
Window ws Forms, des serrvices Windows Communication
C Foundation (WC CF), des
applicattions Web Asynch hronous JavaScrip pt and XML (Ajax x), des application
ns Smart
Device et
e des applicationns Microsoft Silveerlight®.
Si vous avez déjà utilisé u une version précédente de Visual Basic, vous aurezz
l'impresssion que peu de choses ont changé, bien que de nombreux
n ajouts
mple, des modificaations ont été apportées à
enrichisssent la nouvelle vversion. Par exem
la finalissation déterminisste COM, qui est désormais rempllacée par la foncttionnalité
de garbage collection dee CLR. Ceci a perm mis d'éliminer la finalisation déterrministe
et de réd duire ainsi le gasp
pillage de mémoire causé par les objets non demandés.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
2-6 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Éditeur de texte Visual Basic 10.0


L'Éditeur de texte Visual Basic comprend le codage en couleurs des mots clés, des
variables, des constantes et des instructions, tout comme la plupart des nouveaux
langages .NET Framework. Par défaut, les mots clés apparaissent en bleu et les
chaînes en rouge foncé.
L'Éditeur de texte Visual Basic intègre également un modèle de compilation en
arrière-plan, dans lequel le code est compilé en arrière-plan lors de la frappe, afin
d'intercepter les erreurs de syntaxe et celles survenues lors de la compilation. Des
tildes sont placés au-dessous de toutes les erreurs interceptées par la compilation
en arrière-plan. En outre, chaque type d'erreur est symbolisé par une couleur
différente. Si vous placez le pointeur de la souris sur l'un des tildes, Microsoft
IntelliSense® affiche une description de l'erreur qui est ajoutée à la fenêtre d'erreurs.
Lorsque vous ajoutez une interface à une déclaration de type et appuyez sur Entrée,
l'Éditeur de texte Visual Basic ajoute automatiquement les signatures de méthode
pour cette interface. L'exemple suivant présente la façon dont le code (entre les
lignes 2 et 33) a été inséré par l'éditeur après que l'utilisateur a tapé l'instruction
Implements IDisposable et appuyé sur Entrée.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'applications Web à l'aide de Microsoft® Visual Studio® 2010 et des langages Microsoft .NET 2-7

1 Public Class Class1


2 Implements IDisposable
3
4 #Region "IDisposable Support"
5 Private disposedValue As Boolean ' To detect redundant calls
6
7 ' IDisposable
8 Protected Overridable Sub Dispose(ByVal disposing As Boolean)
9 If Not Me.disposedValue Then
10 If disposing Then
11 ' TODO: dispose managed state (managed objects).
12 End If
13
14 ' TODO: free unmanaged resources (unmanaged objects)
and override Finalize() below.
15 ' TODO: set large fields to null.
16 End If
17 Me.disposedValue = True
18 End Sub
19
20 ' TODO: override Finalize() only if Dispose(ByVal disposing As
Boolean) above has code to free unmanaged resources.
21 'Protected Overrides Sub Finalize()
22 ' Do not change this code. Put cleanup code in Dispose(ByVal
disposing As Boolean) above.
23 ' Dispose(False)
24 ' MyBase.Finalize()
25 'End Sub
26
27 ' This code added by Visual Basic to correctly implement the
disposable pattern.
28 Public Sub Dispose() Implements IDisposable.Dispose
29 ' Do not change this code. Put cleanup code in
Dispose(ByVal disposing As Boolean) above.
30 Dispose(True)
31 GC.SuppressFinalize(Me)
32 End Sub
33 #End Region
34
35 End Class

Question : comment les espaces de noms sont-ils utilisés dans Visual Basic ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
2-8 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Foncttionnalités de
e Visual C#

Points clés
Visual C#
C a toujours ciblé .NET Framewo ork et il ne comprend plus aucunee
fonction
nnalité des versio
ons précédentes qui q ciblaient d'autres plateformes. La
version actuelle de Visuaal C# 4.0 contien nt de nombreusess fonctionnalités
supplémmentaires et la syn
ntaxe a été améliiorée de façon siggnificative depuis la
version 1.0. Visual C# 4..0 permet de développer tout typee d'application ou u de
service .NET Framework k, notamment dess applications Weeb, des applicatio ons
Window ws Forms, des serrvices WCF, des applications Web b Ajax, ainsi que des
applicattions Smart Devicce et Silverlight.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'applications Web à l'aide de Microsoft® Visual Studio® 2010 et des langages Microsoft .NET 2-9

Éditeur de texte Visual C# 4.0


L'éditeur de texte Visual C# comprend le codage en couleurs des mots clés, des
variables, des constantes et des instructions, tout comme la plupart des nouveaux
langages .NET Framework. Par défaut, les mots clés apparaissent en bleu et les
chaînes en rouge foncé. Visual C# fournit également un modèle de compilation en
arrière-plan (semblable à l'Éditeur de texte Visual Basic) dans lequel le code est
compilé en arrière-plan lors de la frappe, et intercepte les erreurs de syntaxe et celles
survenues lors de la compilation. Des tildes sont placés au-dessous de toutes les
erreurs interceptées par la compilation en arrière-plan. En outre, chaque type
d'erreur est symbolisé par une couleur différente. Si vous placez le pointeur de la
souris sur l'un des tildes, IntelliSense affiche une description de l'erreur. Les erreurs
sont ajoutées à la fenêtre d'erreurs lors de la régénération du projet.
Lorsque vous ajoutez une interface à une déclaration de type, l'éditeur vous permet
d'ajouter les signatures de méthode pour une interface en cliquant avec le bouton
droit sur le nom de cette interface. Vous pouvez cliquer sur l'option Implémenter
l'interface, puis de nouveau sur Implémenter l'interface. Dans l'exemple ci-dessous,
le code compris entre les lignes 3 et 10 a été inséré par l'Éditeur de texte Visual C#
après avoir ajouté IDisposable à la déclaration de classe.

1 public class Class1 : IDisposable


2 {
3 #region IDisposable Members
4
5 public void Dispose()
6 {
7 throw new NotImplementedException();
8 }
9
10 #endregion
11 }

Lorsque vous créez des types à l'aide de l'Éditeur de texte Visual C#, l'espace de
noms par défaut est ajouté automatiquement à mesure que vous tapez le code.
L'Éditeur de texte Visual C# comprend plusieurs options de refactorisation du code.
Pour appeler une option, cliquez avec le bouton droit sur un mot clé ou sur le texte
sélectionné, puis, dans le menu contextuel, sélectionnez l'action appropriée. Vous
avez la possibilité d'effectuer les actions suivantes :
• Renommer les variables.
• Promouvoir une variable locale en paramètre dans une méthode.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
2-10 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Extraire une méthode. Cette opération implique la copie d'un texte existant afin
de l'inclure dans une nouvelle méthode.
• Encapsuler un champ. Pour cela, vous devez créer une propriété pour un membre
de champ existant.
• Supprimer et réorganiser des paramètres.

Structure de code et syntaxe Visual C# 4.0


Dans Visual C# 4.0, la syntaxe est basée sur des mots clés courants en anglais. Les
blocs de code suivant une instruction sont placés entre accolades {}, comme le
montre l'exemple de code suivant.

if () {}
switch () {}
for () {}
foreach () {}
void {}
class {}
namespace {}

Dans Visual C#, le code respecte la casse. Certaines variables se distinguent donc
uniquement par la casse. Toutefois, ceci n'est pas recommandé, car cela rendrait
votre code plus difficile à lire, à comprendre et à déboguer.
Visual C# est totalement orienté objet, ce qui signifie que vous ne pouvez pas créer
de variables ou de constates globales ou de niveau application. Cependant, les
classes et membres static permettent de créer l'illusion de variables et constantes
globales, comme le montre le code suivant.

public static class Class1


{
public const int AppLevelConstant = 15;
public static string AppName = "Application Name";
}

La constante AppLevelConstant et la variable AppName seront disponibles pour


l'ensemble du projet auquel la classe appartient, comme indiqué ci-dessous.

int appLevel = Class1.AppLevelConstant;


string name = Class1.AppName;
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'applications Web à l'aide de Microsoft® Visual Studio® 2010 et des langages Microsoft .NET 2-11

Dans Visual C#, chaque projet possède un espace de noms par défaut appliqué
automatiquement à tous les types que vous créez. Si l'espace de noms par défaut
est CompanyName.ApplicationName et que vous disposez d'un espace de noms
pour un type spécifique (par exemple, Services.Customers), l'espace de noms réel
du type est Services.Customers, car l'espace de noms par défaut est ignoré. En
outre, les types contenus dans les sous-dossiers d'un projet sont automatiquement
créés avec un espace de noms. Celui-ci est composé de l'espace de noms par défaut
du projet, suivi du nom du dossier. Par conséquent, si un type est stocké dans un
sous-dossier nommé Test et que l'espace de noms par défaut est
CompanyName.ApplicationName, l'espace de noms réel de ce type est
CompanyName.ApplicationName.Test. Vous pouvez substituer cette valeur en
indiquant l'espace de noms complet du type dans le code.
Dans Visual C#, les instructions se terminent par un point-virgule. Les commentaires
peuvent figurer sur une seule ligne ou sur plusieurs, comme suit.

// Single line
/* Multi
line */

Par défaut, la majorité du code dans Visual C# est fondamentalement sûre, mais les
constructions de langage non sécurisées (par exemple, les pointeurs) sont autorisées.
Par défaut, les opérations numériques ne sont pas vérifiées, ce qui permet les
dépassements de capacité numérique positifs et négatifs.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
2-12 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Scéna
arios adaptéss aux environ
nnements à plusieurs lan
ngages

Points clés
Lorsquee vous travaillez d
dans un environn nement de prograammation avec plusieurs
p
développpeurs, vous pouvvez être confrontté à des projets ett solutions présen ntant
différen
nts langages de prrogrammation .N NET Framework, telst que Visual Baasic et
Visual C#.
C Par conséqueent, en tant que développeur,
d vouss devez comprend dre au
moins ces
c deux langagess, car il est très prrobable que vouss les utiliserez tou
us deux.
Vous deevrez peut-être co
opier des fonctionnnalités écrites daans un langage ded
programmmation différent de celui que vou us maîtrisez le mieux.
m Selon la quuantité de
code, vo
ous copierez des lignes de code, puis
p les traduirez dans le langage de d
programmmation de votre choix, ou vous ajjouterez un projett à votre solution actuelle.
Si vous ajoutez un projet à la solution acttuelle, celle-ci est alors composée d'au
moins deux
d projets, écrits dans deux langgages de program mmation différentts. Ceci
est une réalité quotidiennne pour de nomb breux développeu urs .NET. C'est pourquoi,
même sis vous ne maîtrissez pas les deux laangages, vous deevez au moins savvoir lire
et compprendre le code écrit dans ces langgages.

Questio
on : dans quels sccénarios réels utiilise-t-on plusieurrs langages ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'applications Web à l'aide de Microsoft® Viisual Studio® 2010 et des langages Microsoft .NET 2-13

Élémeents à prendre en consid dération afin de choisir entre


Visual Basic et Vissual C# pourr une applica
ation

Points clés
Visual Studio
S 2010 incluut les compilateurrs et éditeurs Visu
ual Basic et Visuaal C#, ce
qui vouss permet de choisir le langage de prrogrammation quii vous convient. Cependant,
C
cela imp
plique également que vous choisisssiez un langage de programmation n lorsque
vous déémarrez un nouveeau projet.
Parfois, vous êtes autorissé à choisir le lan ngage de program mmation d'un nou uveau
projet. Toutefois,
T la décision a quelques fois
f déjà été prisee par un architectte ou un
responssable d'équipe, ett vous devez travaailler au sein de l''équipe en appliq quant
cette déécision. Pour des projets d'envergu ure plus modestee, la décision vouss
reviendra peut-être si la société ou le servvice pour lequel vous v travaillez n'aa pas
encore déterminé
d l'usagee exclusif de l'un des langages de programmation. Dans ce
cas-là, ill existe certains ééléments à prendrre en considératio on avant de sélecctionner
le langaage de programm mation le plus adap pté à votre projett.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
2-14 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Visual Basic et Visual C# sont des langages de programmation populaires, utilisés


par les développeurs du monde entier. Dans la mesure où aucune règle ne
s'applique à la sélection d'un langage par rapport à l'autre, vous pouvez vous
décider en fonction des éléments suivants.

Éléments à prendre en considération afin de choisir un langage de


programmation
Lorsque vous sélectionnez un langage de programmation, prenez en compte les
éléments suivants :
• Nombre de lignes de code à écrire
• Réutilisation de code .NET Framework existant
• Portage du code hérité, notamment Classic ASP
• Utilisation de constructions non sécurisées, telles que les pointeurs, et les
dépassements de capacité numérique positifs et négatifs
• Formatage de l'Éditeur de texte
• Utilisation des espaces de noms par défaut
• Respect de la casse
• Paramètres facultatifs
• Fin des instructions

Votre décision peut également être influencée selon que vous préférez la syntaxe
détaillée de Visual Basic, ou la composition plus concise de Visual C# et l'utilisation
d'accolades associée. Très souvent, il s'agit du facteur que les nouveaux
développeurs .NET examinent en premier, en particulier s'ils n'ont pas l'expérience
de Microsoft Visual C++® ou Visual Basic classique.
En définitive, la décision repose généralement sur les préférences.

Question : quels sont les problèmes éventuels que vous devrez gérer dans un
environnement à plusieurs langages ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'applications Web à l'aide de Microsoft® Viisual Studio® 2010 et des langages Microsoft .NET 2-15

Leçon 2
Présenta
ation générale de Visual Studio 201
10

Visual Studio
S 2010 est uun outil complet permettant
p de crééer tous les typess
d'appliccations .NET Fram mework, notamm ment les applicatio
ons et services Web.
W Il est
compossé d'un IDE, intèggre .NET Framew work, et permet laa génération d'app plications
et de services à partir de .NET Framework versions 2.0, 3..0, 3.5 et 4.
L'IDE de
d Visual Studio 22010 consiste en une interface utillisateur commun
ne, et en
un enseemble d'outils que vous pouvez uttiliser pour tous les
l types de projeets et
langagees de programmattion pris en chargge par Visual Studdio 2010.

Objecttifs de la leçon
Au term
me de cette leçon, vous serez à mêm
me d'effectuer less tâches suivantess :
• déccrire les avantagess qu'apporte l'utillisation de Visuall Studio 2010 ;
• iden
ntifier les modèlees de projet dispo
onibles ;
• déccrire les fonctionn
nalités de l'IDE ;
• iden
ntifier les élémen
nts d'une page de démarrage Visuaal Studio 2010.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
2-16 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Avanttages liés à l''utilisation de


d Visual Studio 2010

Points clés
Visual Studio
S 2010 simp plifie le développeement de solution
ns Web d'entreprrise
puissan
ntes et fiables. En outre, Visual Stu
udio 2010 permett d'augmenter l'effficacité
du déveeloppeur grâce à sson environnemeent de développeement familier et partagé.
Lorsquee vous lancez Visual Studio 2010 pour la premièree fois, vous êtes in
nvité à
indiqueer les paramètres de votre environnement de développement.
Visual Studio
S 2010 fourn nit des composan nts prégénérés et des assistants dee
programmmation, et offre la possibilité de réutiliser
r des com mposants écrits dans
d un
langagee de programmatiion quelconque. Cela C permet de rééduire le temps de d
développpement de façon n significative. Grâce à la saisie sem
mi-automatique de
d code
basée suur IntelliSense , vvous pouvez prod duire rapidementt un code correct.. La prise
en chargge du débogage p puissant, de boutt en bout et interllangage permet ded rendre
vos app
plications plus fiab bles.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'applications Web à l'aide de Microsoft® Visual Studio® 2010 et des langages Microsoft .NET 2-17

IDE unique
Grâce à l'IDE unique de Visual Studio 2010, vos projets possèdent une apparence
cohérente, quel que soit le langage de programmation que vous utilisez ou le type
d'application que vous développez. Visual Studio 2010 prend en charge le
développement dans plusieurs langages de programmation .NET Framework. Cette
prise en charge vous permet d'utiliser le langage de programmation que vous préférez,
car vous n'êtes plus obligé d'apprendre un nouveau langage de programmation pour
chaque nouveau projet. Vous pouvez également employer l'IDE lors de la phase de
conception et de test du cycle de vie du développement. Par exemple, Visual Studio
2010 fournit des diagrammes de classes et des tests unitaires.

Langages de programmation multiples


Visual Studio 2010 offre une prise en charge native des langages de programmation
suivants :
• Visual Basic
• Visual C#
• Visual C++
• Visual F#

Types de projets multiples


Visual Studio 2010 prend en charge le développement de plusieurs types de projets,
notamment les applications Web ASP.NET et les services Web XML. Ceci vous
permet de travailler simultanément sur plusieurs projets ; vous n'êtes donc pas
obligé de changer d'environnement de développement ni de vous former à de
nouvelles interfaces d'outils ou à d'autres langages.

Navigateur intégré
Visual Studio 2010 contient un navigateur intégré basé sur Windows Internet
Explorer®. Ce navigateur est intégré à l'IDE, et il est accessible depuis plusieurs
fenêtres et menus. L'accessibilité du navigateur vous permet de consulter votre
site Web pendant le cycle de développement, au lieu de devoir utiliser un autre
programme.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
2-18 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Serveur de développement ASP.NET


Le serveur de développement ASP.NET est conçu pour exécuter les pages Web
ASP.NET sur l'ordinateur local. Il permet de tester efficacement les pages localement
avant de les publier ou de les déployer sur un serveur test, intermédiaire ou de
production.

Prise en charge du débogage


Visual Studio 2010 prend en charge le débogage du code initial à la publication de
l'application. La prise en charge du débogage inclut les points d'arrêt, les expressions
Break, les expressions espionnes, ainsi que la possibilité de parcourir le code pas à
pas, une instruction ou une procédure à la fois.

Remarque : pour plus d'informations sur le débogage, consultez le module 7,


« Résolution des problèmes liés aux applications Web Microsoft ASP.NET ».

Prise en charge du déploiement


Une fois que vous avez terminé de développer un site Web, vous pouvez le déployer
sur un serveur Web. Ce dernier peut être un serveur de test ou de production.
Visual Studio 2010 fournit les options suivantes pour le déploiement d'un site Web :
• Copier le site Web. L'outil Copier le site Web permet de copier le site Web
actuel vers un serveur cible.
• Publier le site Web. L'utilitaire Publier le site Web compile un site Web en un
ensemble de fichiers exécutables que vous pouvez copier sur le serveur cible.

Le déploiement peut s'effectuer sur le système de fichiers local, un site basé sur
Internet Information Services (IIS) ou un serveur FTP. Les deux dernières
possibilités peuvent être locales ou distantes.

Remarque : vous devez utiliser IIS pour héberger l'application Web déployée. IIS est un
serveur Microsoft Web regroupé avec les implémentations client et serveur du système
d'exploitation Windows. Le protocole FTP (File Transfer Protocol) est un protocole réseau
qui permet d'échanger et de manipuler des fichiers sur un réseau. Cela signifie en général
que vous souhaitez ouvrir le site Web cible avec le serveur de développement Web.

Question : quel est le serveur Web utilisé par défaut lorsque vous créez des
applications Web dans Visual Studio 2010 ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'applications Web à l'aide de Microsoft® Viisual Studio® 2010 et des langages Microsoft .NET 2-19

Modè
èles de proje
et disponible
es

Points clés
Visual Studio
S 2010 fourn nit des modèles prenant
p en charge la création de plusieurs
p
types dee projets courantts. Ces modèles co
ontiennent tous les
l fichiers requiss et
permetttent de vérifier qu
ue l'IDE présente la configuration appropriée pourr le projet
sélection
nné.
Lorsquee vous utilisez ces modèles, vous n'êêtes pas obligé de configurer l'infrasstructure.
En d'autres termes, le modèle crée autom matiquement les dossiers
d et fichiers requis
par le tyype de projet spécifique. Par consééquent, vous pou uvez vous concen ntrer sur
l'ajout de
d fonctions à voss projets.

Solutio
ons et projets
Lorsquee vous créez un p projet dans Visual Studio 2010, vo
ous créez égalemeent un
conteneeur plus volumineux, appelé une solution.
s Cette dernière peut conteenir
plusieurrs projets tout co
omme un conteneeur de projets peu ut comporter plu
usieurs
pages.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
2-20 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Les solutions vous permettent de vous concentrer sur le projet ou sur un ensemble
de projets nécessaires pour développer et déployer votre application ; vous n'êtes
pas obligé de vous attarder sur les détails de gestion des objets et des fichiers qui
les définissent.
Une solution vous permet d'effectuer les opérations suivantes :
• travailler sur plusieurs projets dans une même instance de l'IDE ;
• travailler sur des éléments, paramètres et options s'appliquant à un groupe de
projets ;
• gérer divers fichiers en dehors du contexte d'une solution ou d'un projet.

Vous pouvez utiliser l'Explorateur de solutions, qui fournit une vue graphique de
votre solution, pour organiser et gérer tous vos projets et fichiers d'application.

Modèles de projet
Visual Studio 2010 inclut plusieurs modèles de projet triés par langage et par type.
Pour sélectionner le modèle approprié, vous devez au préalable indiquer le langage
que vous souhaitez utiliser.
Le tableau suivant répertorie quelques-uns des modèles de projet Visual Basic et
Visual C# disponibles.

Modèle de projet Description

Bibliothèque de classes Crée des classes et composants réutilisables que vous pouvez
partager avec d'autres projets.

Application Web Crée une application Web ASP.NET avec les fichiers du
ASP.NET serveur de base requis pour votre application.

Site Web ASP.NET Crée un site Web ASP.NET avec les fichiers du serveur de
base requis pour votre site Web.

Application de Crée un service WCF qui peut être utilisé par d'autres
service WCF services ou applications WCF sur un réseau.
Les services WCF sont des composants disponibles sur
Internet. Ils sont conçus pour interagir uniquement avec
d'autres applications Web.

Contrôle serveur Crée des contrôles serveur ASP.NET personnalisés. Ce modèle


ASP.NET ajoute les éléments de projet requis pour créer le contrôle.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'applications Web à l'aide de Microsoft® Visual Studio® 2010 et des langages Microsoft .NET 2-21

(suite)

Modèle de projet Description

Contrôle serveur Crée des contrôles serveur ASP.NET Ajax personnalisés. Ce


ASP.NET AJAX modèle ajoute les éléments de projet requis pour créer le
contrôle.

Projet vide Crée votre propre type de projet. Ce modèle crée la


structure de fichiers requise pour stocker les informations
d'application. Vous devez ajouter les références, fichiers ou
composants manuellement.

Site Web Dynamic Data Crée un site Web ASP.NET avec les fichiers de serveur de
ASP.NET Entities base requis pour votre site Web et offre une prise en charge
de Dynamic Data basée sur un modèle Entity Data Model.

Site Web Dynamic Data Crée un site Web ASP.NET avec les fichiers de serveur de
ASP.NET LINQ To SQL base requis pour votre site Web et offre une prise en charge
de Dynamic Data basée sur un LINQ To SQL Data Model.

Question : quels sont les autres modèles de projet disponibles dans Visual Studio
2010 ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
2-22 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Foncttionnalités de
e l'environne
ement de dé
éveloppemen
nt
intégrré

Points clés
L'IDE de
d Visual Studio 2 2010 contient plu usieurs fenêtres proposant
p une pallette
d'outils et de services. De nombreuses fon nctionnalités de Visual
V Studio 2010 sont
disponiibles dans plusieu urs fenêtres, mennus et barres d'outils de l'IDE. Vou us pouvez
déplacerr ou masquer les ffenêtres de l'IDE, en
e fonction de voss préférences perssonnelles.
Le menu u Affichage vous p permet de sélectioonner les fenêtress à afficher. Pour convertir
c
les fenêtres statiques en fenêtres mobiles, cliquez sur le bo outon Masquer
automa atiquement.

Fenêtree Éditeur
La fenêttre Éditeur est la fenêtre principale de l'interface daans Visual Studioo 2010.
Elle affiche le code pour le processus de modification
m et fo
ournit une interfaace
graphiqque pour le positionnement des co ontrôles sous form me d'interface WY YSIWYG
(What You
Y See Is What Y You Get). Pour crréer la conception n visuelle de votrre
applicattion, vous pouvezz utiliser l'option de modification par glisser-déplacer. Vous
pouvez ensuite gérer la conception logiqu ue de votre applicaation en modifiannt le code
du conttrôle Web par déffaut.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'applications Web à l'aide de Microsoft® Visual Studio® 2010 et des langages Microsoft .NET 2-23

Les options de fenêtre de l'éditeur sont les modes Création, Fractionné et Source :
• En mode Création, vous pouvez utiliser l'éditeur pour déplacer les contrôles
et les éléments graphiques dans la fenêtre par le biais de l'opération de
glisser-déplacer. Lorsque vous ajoutez un contrôle à une page Web en mode
Création, Visual Studio 2010 ajoute le code de prise en charge et les propriétés
par défaut au formulaire Web. Vous pouvez ensuite passer en mode Source
et modifier le code.
• En mode Source, Visual Studio 2010 met votre code en surbrillance afin que les
différents éléments (par exemple, les noms de variable et les mots clés) soient
identifiables instantanément. La fonctionnalité IntelliSense fournit des
suggestions de saisie semi-automatique et permet de créer des fonctions par de
simples sélections dans la liste de syntaxe disponible.
• En mode Fractionné, l'éditeur est divisé en deux fenêtres : une fenêtre pour la
surface de conception de la page Web et une autre pour le code source de la
page Web.

Lorsque vous utilisez la fenêtre Éditeur en mode Source, deux listes déroulantes
apparaissent dans la partie supérieure de celle-ci : la liste Nom de la classe à
gauche et la liste Nom de la méthode à droite. La liste Nom de la classe présente
tous les contrôles du formulaire associé. Si vous cliquez sur un nom de contrôle, la
liste Nom de la méthode affiche tous les événements du contrôle concerné. Les
événements sont des actions que le contrôle peut exécuter et que votre application
peut interpréter. L'utilisation conjointe des listes Nom de la classe et Nom de la
méthode vous permet de localiser et de modifier le code de votre application
rapidement.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
2-24 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Volet Explorateur
E de solutions
Lorsquee vous cliquez su ur l'onglet Exploraateur de solution ns, le volet Explorrateur de
solutionns apparaît ; celuii-ci répertorie unee hiérarchie des fichiers
f de projet.. Dans ce
volet, vo
ous pouvez effecttuer les opération ns suivantes :
• effeectuer une opérattion de glisser-dép
placer pour réorgganiser les élémen
nts ;
• séleectionner un élém
ment dans le volet Explorateur de solutions afin d'en
n afficher
les propriétés dans lla fenêtre Propriéétés.

onctionnalité vous permet de mod


Cette fo difier les propriétéés au niveau du projet
p ou
au niveaau de la page.
Pour affficher les optionss disponibles, nottamment l'ajout, la
l génération et laa
modificcation de pages, ccliquez avec le bouton droit sur le fichier, le projet ou la
solutionn. Voici une liste contenant certain
ns types de fichieers qui apparaisseent dans
le volet Explorateur de ssolutions :
• Réfé
férences de projett répertoriant les classes
c utilisées paar la page et les co
ontrôles
Weeb
• Forrmulaires Web co
ontenus dans le projet
p
• Pagges code-behind ccontenant la logiq que qui prend enn charge les formu
ulaires
Weeb, les dossiers liéés au projet et les sous-éléments
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'applications Web à l'aide de Microsoft® Visual Studio® 2010 et des langages Microsoft .NET 2-25

Volet Propriétés
Visual Studio 2010 vous permet de paramétrer les propriétés de documents, de
classes et de contrôles dans une seule fenêtre Propriétés. Lorsque vous créez ou
sélectionnez un élément, le volet Propriétés affiche automatiquement les propriétés
associées.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
2-26 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Fenêtre Liste des tâches


La fenêtre Liste des tâches vous permet de suivre l'état des tâches lorsque vous
développez votre application. La liste Catégories affiche les tâches utilisateur et les
commentaires :
• Tâches utilisateur. Vous pouvez ajouter des tâches, et établir une description,
la priorité et l'achèvement de ces tâches. Pour ajouter une tâche dans la liste
Catégories, cliquez sur Tâches utilisateur, puis sur Créer une tâche
personnalisée.
• Commentaires. Vous pouvez ajouter des commentaires TODO au code afin
d'identifier les tâches à exécuter. Pour accéder à cette section du code, dans la
liste Catégories, cliquez sur Commentaires, puis double-cliquez sur le
commentaire TODO.

Volet Sortie
Le volet Sortie affiche les messages d'état des différentes fonctionnalités de l'IDE.
Vous pouvez programmer vos propres applications de sorte que les messages de
diagnostic soient écrits dans la fenêtre au moment de l'exécution.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'applications Web à l'aide de Microsoft® Visual Studio® 2010 et des langages Microsoft .NET 2-27

Fenêtre Gérer les styles


La fenêtre Gérer les styles répertorie toutes les règles de style CSS définies dans le
fichier CSS externe de la page. Elle répertorie également les règles de style définies
sur la page, mais pas en tant que styles intraligne. La fenêtre Gérer les styles vous
permet de déplacer des styles à partir d'une feuille de style externe vers un élément
de style sur la page, et inversement. Vous pouvez également utiliser cette fenêtre
pour déplacer l'emplacement d'un style dans l'ensemble de règles de style CSS, et
créer un style CSS en ouvrant la boîte de dialogue Styles et en attachant une feuille
de style existante à la page active.

Fenêtre Appliquer les styles


La fenêtre Appliquer les styles répertorie toutes les règles de style CSS définies
pour une page. Cela comprend les règles de style définies dans des feuilles de style
externes, en tant que styles intraligne et styles définis sur la page. Les règles de style
basées sur la classe et sur l'ID apparaissent sous le nom du fichier .css externe
contenant le style. Si la règle de style est définie sur la page, elle apparaît sous Page
active. Les règles de style basées sur un élément sont organisées de la même façon,
mais elles apparaissent sous un en-tête distinct, intitulé Sélecteurs contextuels.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
2-28 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Volet Boîte à outils


Le volet Boîte à outils vous permet d'utiliser les contrôles de l'opération de glisser-
déplacer dans votre application. Les outils sont regroupés par catégorie dans le volet
Boîte à outils et n'apparaissent que s'ils sont disponibles. Les catégories
d'application Web communes sont les suivantes :
• Standard. Contient des contrôles standard permettant de générer l'interface
utilisateur d'une page Web.
• Données. Contient des objets permettant à votre application de se connecter et
d'accéder aux données contenues dans Microsoft SQL Server® et d'autres
bases de données.
• Validation. Contient plusieurs contrôles de validation distincts permettant de
valider les entrées d'utilisateur dans les contrôles de serveur Web.
• Navigation. Contient les contrôles de navigation d'un site Web.
• Connexion. Contient les contrôles de connexion d'un site Web.
• WebParts. Contient les éléments WebParts d'un site Web.
• AJAX Extensions. Contient un ensemble de contrôles serveur permettant
d'implémenter les fonctionnalités Ajax.
• Dynamic Data. Contient des contrôles à utiliser avec une application Web
Dynamic Data.
• HTML. Contient un ensemble de contrôles HTML (Hypertext Markup
Language) à ajouter à votre page Web. Ces contrôles peuvent s'exécuter côté
serveur ou côté client.
• Rapports. Contient un ensemble de contrôles serveur permettant de créer des
rapports SQL Server.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'applications Web à l'aide de Microsoft® Visual Studio® 2010 et des langages Microsoft .NET 2-29

Question : quels sont les quatre modes disponibles pour les éditeurs et les
concepteurs ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
2-30 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Page de démarrag
ge de Visual Studio 2010
0

Points clés
La pagee de démarrage dee Visual Studio 20102 permet de crréer des projets ou
o d'y
accéderr facilement, de découvrir les versiions de produits et conférences à venir,
v ou
de lire les derniers articlees sur le développement. Par défaaut, la page de dém
marrage
apparaît lorsque vous lan ncez Visual Studiio 2010. Vous po ouvez également y accéder
à partir du menu Afficha age, en cliquant sur
s Page de déma arrage.
Vous poouvez modifier less paramètres de démarrage
d par déffaut de Visual Stu
udio 2010
dans la boîte de dialoguee Options, afin d'activer
d une des actions
a suivantes au
démarraage :
• afficcher la page d'acccueil définie danss votre navigateur ;
• ouvvrir la dernière so
olution chargée ;
• afficcher la boîte de d
dialogue Ouvrir un
u projet ;
• afficcher la boîte de d
dialogue Nouveau
u projet ;
• afficcher un environn
nement vide ;
• afficcher la page de d
démarrage.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'applications Web à l'aide de Microsoft® Visual Studio® 2010 et des langages Microsoft .NET 2-31

Outre les options mentionnées précédemment, deux autres options de la page de


démarrage ont une influence sur la façon dont cette page s'ouvre et se ferme, et sur
le moment où ces deux actions ont lieu. Vous pouvez choisir de fermer la page
après le chargement du projet ou d'afficher la page au démarrage, en activant ou
en désactivant les cases à cocher situées dans le coin inférieur gauche de la page de
démarrage. Ces deux cases sont activées par défaut.

Volet Projets récents


Le volet Projets récents de la page de démarrage affiche la liste des projets
récemment mis à jour. Pour ouvrir un projet ou le supprimer de la liste, cliquez
dessus avec le bouton droit. Vous pouvez également ouvrir le dossier dans lequel
se trouve le projet, à partir du menu contextuel.

Onglet Prise en main


L'onglet Prise en main de la zone Contenu affiche la liste des rubriques d'aide, des
sites Web, des articles techniques et des autres ressources susceptibles de vous aider
à optimiser votre productivité et à en savoir plus sur les fonctionnalités du produit.

Onglet Guide et ressources


Dans la zone Contenu de la page de démarrage, l'onglet Guide et ressources fournit
des informations générales sur le codage et le développement. Il suit le même format
que l'onglet Prise en main. Il inclut les catégories Processus de développement,
Ressources MSDN et Outils supplémentaires.

Onglet Dernières informations


L'onglet Dernières informations affiche la liste des articles issus du flux RSS (Really
Simple Syndication) indiqué en haut du volet. Le flux RSS ASP.NET News est utilisé
par défaut, mais vous pouvez indiquer un flux RSS personnalisé.

Personnalisation de la page de démarrage


Vous pouvez personnaliser la chaîne d'informations utilisée par la page de démarrage
et supprimer les entrées du volet Projets récents. Par ailleurs, vous pouvez empêcher
l'apparition de la page de démarrage à chaque lancement de Visual Studio.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
2-32 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Modification de l'élément affiché au démarrage de l'environnement de


développement
1. Dans le menu Outils, cliquez sur Options.
2. Dans le coin inférieur gauche de la boîte de dialogue Options, assurez-vous
que l'option Afficher tous les paramètres est sélectionnée.
3. Développez Environnement, puis cliquez sur Démarrage.
4. Dans la liste déroulante Au démarrage, sélectionnez une des options disponibles
et cliquez sur OK.

Vos modifications seront implémentées au prochain démarrage de Visual Studio.

Question : quelle zone et quel onglet de la page de démarrage affichent la liste des
rubriques d'aide, des sites Web, des articles techniques et des autres ressources ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'applications Web à l'aide de Microsoft® Viisual Studio® 2010 et des langages Microsoft .NET 2-33

Leçon 3
Création
n d'une ap
pplication
n Web sim
mple

Visual Studio
S 2010 vouss permet de générrer votre propre application
a Web ASP.NET
du débuut à la fin. Lorsqu
ue vous travaillez sur des projets, Visual
V Studio 2010 crée
plusieurrs fichiers prenan
nt en charge votree développementt. Dans cette leçonn, vous
apprenddrez à créer, généérer et afficher un
ne application Weeb ASP.NET simp ple.

Objecttifs de la leçon
Au term
me de cette leçon, vous serez à mêm
me d'effectuer less tâches suivantess :
• déccrire la procéduree de développemeent des pages d'aapplication Web ASP.NET
A ;
• déccrire les fichiers et dossiers de projjet d'application Web
W dans Visuall Studio
20110 ;
• déccrire les fichiers et dossiers de projjet de site Web dans
d Visual Studio
o 2010 ;
• cho
oisir entre un projjet de site Web et un projet d'application Web ;
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
2-34 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• identifier les fichiers d'application Web ;


• expliquer la procédure de création, de génération et d'affichage d'une
application Web ASP.NET ;
• déployer une application Web.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'applications Web à l'aide de Microsoft® Viisual Studio® 2010 et des langages Microsoft .NET 2-35

Proce
essus de déve
eloppement d'une appliccation Web

Points clés
Visual Studio
S 2010 conttient tout ce dont vous avez besoin
n pour générer vootre
propre application
a Web ou site Web ASP P.NET du début à la fin. Pour créerr une
applicattion Web ASP.NE
ET à l'aide de Visuual Studio 2010, procédez commee suit :
1. Crééez une spécificattion de conceptio on. La spécificatio
on de conception est le
modèle à utiliser pou ur créer une appliication Web. Prennez le temps de cooncevoir
votrre application avaant d'écrire le cod
de. Bien que Visuual Studio 2010 fo ournisse
dess outils vous permmettant de dévelo opper une solutioon rapidement, vo ous
pouuvez concevoir vo otre application de
d façon plus efficcace si vous conn
naissez
parrfaitement les bessoins des utilisateeurs et l'ensemblee de fonctionnalittés.
L'uttilisation d'une sp
pécification de coonception vous permettra égalemeent de
gaggner du temps en réduisant au min nimum la possibiilité de réécrire du code
nonn approprié ou reedondant.
Visuual Studio fourniit le Concepteur de d classes qui vou us permet de visu
ualiser la
stru
ucture des classess et leurs relationss. Vous pouvez faccilement créer des classes
et refactoriser les claasses actuelles à l'aide
l de cet envirronnement de connception
visu
uelle.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
2-36 Introduction au développement Web avec Microsoft® Visual Studio® 2010

2. Créez un projet. Lorsque vous sélectionnez un nouveau modèle de projet,


Visual Studio 2010 crée automatiquement les fichiers et le code par défaut
requis pour prendre en charge le projet. Dans le cadre de la création du projet
initial, vous devez transférer les principales tâches de codage de votre spécification
de conception vers la liste des tâches de Visual Studio 2010. Ce transfert vous
permet de suivre votre développement par rapport à la spécification.
3. Créez l'interface et écrivez le code. Pour créer l'interface de votre application Web,
vous devez tout d'abord placer les contrôles et objets sur les pages Web à l'aide
de la fenêtre Éditeur en mode Création. Lorsque vous ajoutez des objets à un
formulaire, vous pouvez en définir les propriétés à l'aide de la table figurant
dans la fenêtre Propriétés ou en saisissant du code dans la fenêtre Éditeur.

Remarque : pour plus d'informations sur l'ajout de contrôles à un formulaire Web


ASP.NET, consultez le module 3, « Création d'un formulaire Web Microsoft ASP.NET ».

Après avoir défini les propriétés initiales du formulaire Web ASP.NET et de ses
objets, vous pouvez écrire les procédures d'événement qui s'exécuteront au
moment de l'application de différentes actions à un contrôle ou à un objet.
Vous devrez peut-être également écrire du code pour ajouter la logique métier
et accéder aux données.

Remarque : pour plus d'informations sur l'écriture de code dans des formulaires Web
ASP.NET, consultez le module 4, « Ajout de fonctionnalités à un formulaire Web
Microsoft ASP.NET ».

4. Générez un projet. Lorsque vous générez un projet, Visual Studio génère tout
le code sur les pages Web et les autres fichiers de classe dans une bibliothèque
de liens dynamiques (DLL), formant ce que l'on appelle un assembly. Visual
Studio 2010 possède deux options de génération : Débogage (Debug) et Version
finale (Release). Lorsque vous développez un projet pour la première fois, vous
générez des versions de débogage. Lorsque vous êtes prêt à publier le projet,
vous créez une version finale de celui-ci.
Vous pouvez générer, régénérer ou nettoyer un projet individuel ou l'intégralité
de la solution.
• Générer. Visual Studio ne compile que les fichiers et composants de projet
ayant été modifiés depuis la dernière génération. En général, vous ne générez
que votre projet ou solution.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'applications Web à l'aide de Microsoft® Visual Studio® 2010 et des langages Microsoft .NET 2-37

• Régénérer. Visual Studio nettoie le projet ou la solution au préalable, puis


génère tous les fichiers et composants de projet. Vous devez procéder à
une régénération lorsque les versions du projet ciblent des composants
non synchronisés.
• Nettoyer. Visual Studio supprime tout fichier intermédiaire et de sortie. Il
ne conserve que les fichiers de projet et de composant, à partir desquels
vous pouvez générer de nouvelles instances de fichiers intermédiaires et
de sortie. Cela signifie que vous n'avez jamais besoin de nettoyer votre
projet ou solution.
5. Testez et déboguez. Le test et le débogage ne constituent pas une étape unique,
mais plutôt une étape répétée tout au long du processus de développement.
Chaque fois que vous apportez une modification majeure au code d'application,
vous devez exécuter une version de débogage de l'application pour garantir un
fonctionnement correct du code. Visual Studio 2010 offre de nombreux outils
de débogage vous permettant de rechercher et de résoudre les erreurs contenues
dans votre application.

Remarque : pour plus d'informations sur le débogage, consultez le module 7,


« Résolution des problèmes liés aux applications Web Microsoft ASP.NET ».

6. Déployer. Lorsque votre projet est entièrement débogué et que vous avez généré
une version finale, vous déployez les fichiers nécessaires dans un serveur Web.

Remarque : pour plus d'informations sur le déploiement d'une application Web ASP.NET,
consultez le module 14, « Configuration et déploiement d'une application Web
Microsoft ASP.NET ».

Question : quelles sont les trois principales phases du processus de développement


d'une application Web ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
2-38 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Fichie
ers et dossierrs de projet d'une
d appliccation Web

Points clés
Dans Viisual Studio 2010
0, vous pouvez crréer une applicatiion Web en utilissant le
modèle de projet d'appliication Web ASP..NET.
Le projeet d'application W Web offre un contrôle plus strict que
q le projet de siite Web
car il dééfinit les ressourcces de façon expliicite.

Fichierrs de modèles d
de projet d'app
plication Web
Lorsquee vous créez une aapplication Web à l'aide du modèlee de projet d'application
Web AS SP.NET, Visual Sttudio 2010 crée un u dossier Solutio on contenant le fiichier
solution
n .sln. Ce fichier cconstitue un map
ppage de l'ensemb ble des fichiers reeliant un
ou plusieurs projets ; il sstocke égalementt des informations globales. En ou utre , le
dossier Solution contien nt les sous-dossierrs et fichiers répeertoriés dans le taableau
suivant..
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'applications Web à l'aide de Microsoft® Visual Studio® 2010 et des langages Microsoft .NET 2-39

Type Name Description

Dossiers App_Data Dossier contenant les fichiers de données


de l'application, notamment les fichiers
MDF, les fichiers XML et les autres fichiers
de magasin de données.

Bin Dossier contenant le fichier d'assembly


du projet.

Obj Dossier contenant les sous-dossiers de


vos configurations de build.

My Project Dossier propre à Visual Basic qui contient


des fichiers de code généré
automatiquement et des fichiers XML
afin de prendre en charge
l'infrastructure du projet (paramètres et
ressources), notamment
Application.Designer.vb,
Application.myapp,
Resources.Designer.vb, Resources.resx,
Settings.Designer.vb et
Settings.settings.
De plus, le dossier comprend le fichier
AssemblyInfo.vb qui contient des
informations générales sur l'assembly,
telles que la version et les attributs de
celui-ci.

Properties Dossier propre à Visual C# qui inclut le


fichier AssemblyInfo.cs. Ce fichier
contient des informations générales sur
l'assembly, telles que la version et les
attributs de celui-ci.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
2-40 Introduction au développement Web avec Microsoft® Visual Studio® 2010

(suite)

Type Name Description

Fichiers Default.aspx Formulaire Web ASP.NET par défaut.

Default.aspx.cs ou Default.aspx.vb Fichier code-behind du formulaire


Web.

Default.aspx.designer.cs ou Classe partielle au moment de la


Default.aspx.designer.vb conception du formulaire Web.

Web.config Fichier de configuration Web contenant


les paramètres de configuration de
l'application Web.

WebApplicationName.csproj ou Document XML contenant les références


WebApplicationName.vbproj à tous les éléments de projet (tels que
les formulaires et les classes), ainsi que
les références de projet et les options
de compilation.

WebApplicationName.csproj.user Paramètres du projet de l'utilisateur.


ou
WebApplicationName.vbproj.user

Remarque : par défaut, les dossiers Bin et Obj sont masqués. Dans l'Explorateur de
solutions, cliquez sur le bouton Afficher tous les fichiers pour afficher les dossiers.

Lorsque vous générez un projet d'application Web ASP.NET, Visual Studio 2010
crée un assembly dans le dossier Bin du projet. Un assembly est un fichier .dll créé
à partir de toutes les pages code-behind constituant une application Web. Un fichier
solution (.sln) est également créé. Ce fichier porte le même nom que le projet, suivi
de l'extension .sln ; il contient des informations sur les projets et divers fichiers qui
ne sont pas propres au projet. Initialement, le fichier solution ne contient que des
informations relatives au projet d'application Web. Pour ouvrir un projet
d'application Web ASP.NET précédemment créé, ouvrez le fichier solution dans
Visual Studio 2010.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'applications Web à l'aide de Microsoft® Visual Studio® 2010 et des langages Microsoft .NET 2-41

Conteneurs : Solutions et projets


Les solutions et projets contiennent des éléments qui représentent les références,
connexions de données, dossiers et fichiers dont vous avez besoin pour créer votre
application. Une solution peut contenir plusieurs projets et un projet comprend
généralement plusieurs éléments. Ces conteneurs vous permettent d'utiliser l'IDE
pour effectuer les opérations suivantes :
• Gérer les paramètres de l'ensemble de votre solution ou de projets individuels.
• Utiliser l'Explorateur de solutions pour gérer les détails de gestion des fichiers,
afin que vous puissiez vous concentrer sur le développement du projet.
• Ajouter des éléments à la solution ou à plusieurs projets de celle-ci, sans
référencer d'élément dans les différents projets.
• Travailler sur divers fichiers indépendants des solutions ou projets.

Éléments : fichiers, références et connexions de données


Les éléments peuvent être des fichiers ou d'autres parties de votre projet, telles que
les références, les connexions de données ou les dossiers. Dans l'Explorateur de
solutions, les éléments peuvent être organisés comme suit :
• En tant qu'éléments de projet, qui correspondent aux éléments constituant
votre projet. Les éléments de projet incluent les formulaires, les fichiers source
et les classes d'un projet dans l'Explorateur de solutions. L'organisation et
l'affichage d'un élément de projet dépendent du modèle de projet que vous
sélectionnez et des modifications que vous apportez.
• En tant qu'éléments de solution pour les fichiers applicables à votre solution
dans son ensemble. Les éléments de solution apparaissent dans le dossier
Éléments de solution de l'Explorateur de solutions.
• En tant que fichiers divers non associés à un projet ou à une solution. Ces
fichiers apparaissent dans le dossier Fichiers divers.

Question : quels sont les conteneurs fournis par Visual Studio ?


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
2-42 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Fichie
ers et dossierrs de projet d'un
d site We
eb

Points clés
Dans Viisual Studio 2010
0, vous pouvez crréer un site Web en utilisant le mo
odèle de
projet de
d site Web ASP.NNET.
En génééral, le modèle dee projet de site Web
W offre plus de fonctionnalités ett une
flexibilitté accrue en matièère de gestion dess applications Weeb par rapport au modèle
de projeet d'application WWeb.

Fichierrs de modèles d
de projet de sitte Web
Lorsquee vous créez un ssite Web à l'aide du d modèle de pro ojet de site Web ASP.NET,
A
Visual Studio
S 2010 crée u
un dossier Solution n pour le projet. Cependant,
C contraairement
au dosssier Solution du pprojet d'applicatio on Web, le fichierr solution .sln n'eest pas
contenu u dans le dossier. En effet, ce fichierr est stocké par défaut
d dans le souss-dossier
Visual Studio
S 2010\Projeets du dossier Do ocuments de l'utiliisateur. Ce fichierr stocke
certainees informations coontenues dans le fichier
f projet, si vous
v créez un projjet
d'appliccation Web. Ceci eest nécessaire à l'iidentification du contenu
c du projet de site
Web.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'applications Web à l'aide de Microsoft® Visual Studio® 2010 et des langages Microsoft .NET 2-43

Le dossier Solution du projet de site Web contient les sous-dossiers et fichiers


répertoriés dans le tableau suivant.

Nom du dossier/fichier Description

Account Ce dossier contient plusieurs fichiers, tous relatifs à


l'authentification utilisateur.

App_Data Ce dossier est destiné au stockage de fichiers de


données, tels que les fichiers de base de données
de SQL Server 2008 Express Edition.

Scripts Ce dossier contient les fichiers de script jQuery,


mais il peut également être utilisé pour tout type
de fichier de script.

About.aspx, et About.aspx.vb ou Il s'agit du formulaire Web About et du fichier


About.aspx.cs code-behind correspondant. Le formulaire Web
affiche un message de type About (À propos de),
relatif au site Web.

Default.aspx, et Default.aspx.vb Il s'agit du formulaire Web Default et du fichier


ou Default.aspx.cs code-behind correspondant. Le formulaire Web
constitue la page d'accueil du site Web.

Global.asax Il s'agit du fichier d'application globale qui contient


plusieurs méthodes associées à l'application Web
ou à la session utilisateur active.

Site.master, et Site.master.vb ou Il s'agit de la page maître et du fichier code-behind


Site.master.cs associé du site Web.

Web.config Il s'agit du fichier de configuration du site Web.

Lorsque vous publiez un projet de site Web, Visual Studio 2010 peut créer plusieurs
assemblys pour ce site Web. Pour ouvrir un projet de site Web ASP.NET
précédemment créé, ouvrez le fichier Solution dans Visual Studio 2010. Vous pouvez
également ouvrir le fichier en passant par le menu Fichier, puis en cliquant sur
Ouvrir et Site Web.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
2-44 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Choisir entre un p
projet de Site
e Web et un projet
plication Web
d'app b

Points clés
Dans Viisual Studio 2010
0, vous pouvez crréer une applicatiion Web en utilissant le
modèle de projet d'appliication Web ASP..NET ou le modèèle de projet de site Web
ET.
ASP.NE
La sélecction d'un modèlee de projet dépen nd de vos besoinss et du flux de traavail de
développpement que vouss préférez. Certain ns développeurs trouveront
t que le modèle
de projeet de site Web estt simple d'utilisattion, car les resso
ources sont définiies de
façon immplicite du fait qu u'elles se trouven
nt dans un dossierr. D'autres dévelooppeurs
préfèrerront utiliser le mo odèle de projet d'application Web b qui leur offre plu
us de
contrôlee sur leur projet, ccar les ressources sont définies exp
plicitement dans le
l fichier
projet.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'applications Web à l'aide de Microsoft® Visual Studio® 2010 et des langages Microsoft .NET 2-45

Applications Web ASP.NET


La principale différence entre les deux types de modèles de projet d'application Web
dans Visual Studio 2010 est l'inclusion d'un fichier projet dans le modèle de projet
d'application Web ASP.NET. Le modèle de projet de site Web ASP.NET crée un
projet basé sur les dossiers, c'est-à-dire que tout le contenu du dossier principal du
projet de site Web fait automatiquement partie intégrante du projet. Cela signifie
que vous pouvez faire glisser des fichiers et les déplacer dans ce dossier, alors
qu'avec un projet d'application Web, vous devez ajouter les nouveaux fichiers au
projet depuis Visual Studio 2010.
Lors de la compilation et de la génération d'un projet d'application Web, tous les
fichiers de classe inclus dans le projet sont compilés dans un assembly unique,
placé dans le dossier Bin. L'assembly constitue l'unité binaire de déploiement, ce
qui signifie qu'aucune partie du code ne doit être déployée, à l'exception du code
écrit dans les fichiers de balisage. Par ailleurs, les fichiers de formulaire Web (.aspx),
les fichiers de contrôle utilisateur (.ascx) et les autres fichiers de contenu static
doivent être déployés.
Lorsque vous générez un projet de site Web, vous compilez le code afin de le tester.
Pour déployer un projet de site Web, vous devez déployer les fichiers source réels,
et vous baser sur la compilation dynamique ASP.NET pour compiler les pages et
classes dans l'application.
Pour exécuter ou déboguer une page dans un projet d'application Web, vous devez
générer le projet dans son intégralité, alors qu'avec un projet de site Web, vous pouvez
configurer les options de génération afin de générer le site, une page individuelle
ou ne rien générer du tout.
L'utilisation de la compilation dynamique confère un avantage exclusif au projet de
site Web si des fichiers nécessitant une compilation sont ajoutés après le déploiement
initial. Toutefois, si le déploiement du code source vous préoccupe, utilisez le projet
d'application Web, car seul l'assembly doit être déployé avec les fichiers de balisage,
de formulaire Web, de contrôle utilisateur et les autres fichiers de contenu static.
Il est également préférable d'utiliser le modèle de projet de site Web si vous souhaitez
générer un assembly pour chaque page, ou ouvrir et convertir un répertoire en
projet Web, sans créer de fichier projet.
En revanche, le modèle de projet d'application Web s'impose si vous devez contrôler
le nom des assemblys de sortie. Cela signifie également que vous pouvez disposer
de classes, de pages de référence et de classes de contrôle utilisateur autonomes.
Par ailleurs, le modèle de projet d'application Web représente le choix idéal si vous
devez générer une application Web contenant plusieurs projets Web, ou si vous
devez ajouter des étapes antérieures ou postérieures à la génération et nécessitez
un plus grand contrôle de la compilation.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
2-46 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Fichie
ers d'applicattion Web

Points clés
Dans Viisual Studio 2010
0, vous pouvez crééer différents typees de fichiers pourr prendre
en chargge le développem
ment de votre appplication Web.

Fichierrs d'application
n Web
Visual Studio
S 2010 prend
d en charge les tyypes et extensionss de fichiers d'app
plication
suivantss :
• Forrmulaires Web AS SP.NET (.aspx). Les
L formulaires WebW ASP.NET vou us
perrmettent de générrer des sites Web dynamiques aux xquels les utilisatteurs
peuuvent accéder direectement. Les forrmulaires Web AS SP.NET sont priss en
chaarge par un fichier code-behind déésigné par l'exten
nsion WebForm.aaspx.vb
ou WebForm.aspx.c
W cs.
• Servvices WCF (.svc)). Les services WCCF permettent dee créer des servicees
aux
xquels seuls d'auttres programmes auront accès. Ils sont basés sur des
d
con
ntrats ou des interrfaces, ainsi que sur
s des fichiers code-behind (.vb ou
o .cs).
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'applications Web à l'aide de Microsoft® Visual Studio® 2010 et des langages Microsoft .NET 2-47

• Classes. Les fichiers de classe utilisent l'extension de Visual C# (.cs) ou de


Visual Basic (.vb). Par exemple, le nom de fichier complet d'un fichier de classe
nommé Test est Test.cs pour un projet Visual C# ou Test.vb pour un projet
Visual Basic.
• Fichiers JavaScript (.js). Ces fichiers contiennent les scripts et méthodes JavaScript
utilisés dans votre application Web.

Remarque : pour plus d'informations sur les pages code-behind, consultez le module 4,
« Ajout de fonctionnalités à un formulaire Web Microsoft ASP.NET ».

• Classes d'application globale (Global.asax). Le fichier Global.asax (également


appelé fichier d'application ASP.NET) est un fichier facultatif contenant le code
de réponse aux événements de niveau application déclenchés par ASP.NET ou
HttpModules. Au moment de l'exécution, le fichier Global.asax est analysé et
compilé sous forme de classe .NET Framework générée dynamiquement,
dérivée de la classe de base HttpApplication.
• Fichiers de page maître (.master). Les pages maître permettent de créer une
disposition cohérente des pages dans votre application. Une page maître
unique définit l'apparence et le comportement standard à appliquer à toutes
les pages (ou à un groupe de pages) dans votre application.

Remarque : pour plus d'informations sur les pages maître, consultez le module 5,
« Implémentation de pages maître et de contrôles utilisateur ».

• Fichiers de ressources (.resx). Une ressource est une donnée non exécutable,
déployée logiquement avec une application. Une ressource peut être affichée
dans une application en tant que message d'erreur ou en tant que partie
intégrante de l'interface utilisateur. Les ressources peuvent contenir des données
sous différentes formes, telles que des chaînes, des images et des objets enregistrés.
Le stockage de vos données dans un fichier de ressources vous permet de modifier
les données sans recompiler l'ensemble de votre application.
• Styles.css. Un style CSS est un mécanisme simple d'ajout de styles (par exemple,
des polices, couleurs et espacements) à des documents Web. Styles.css est la
feuille de style par défaut de l'application Web.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
2-48 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Fichier web.config. Le fichier web.config contient des paramètres de configuration


que le composant CLR lit, tels que la stratégie de liaison d'assembly et les services
WCF. Ce fichier contient également des paramètres que l'application peut lire,
ainsi que les classes d'application globale prenant en charge un projet.
• Fichier Web.sitemap. Le fichier Web.sitemap contient des éléments XML, ou
des éléments permettant d'afficher un menu ou un chemin de navigation dans
votre application Web.

Question : indiquez des exemples de fichiers non basés sur un langage de


programmation, mais qui possèdent leur propre extension.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'applications Web à l'aide de Microsoft® Viisual Studio® 2010 et des langages Microsoft .NET 2-49

Démo
onstration : C
Comment cré
éer un proje
et d'applicatiion
Web simple
s

Points clés
Dans ceette démonstratio
on, vous apprendrez à créer une ap
pplication Web.

Procéd
dure de démonsstration
1. Ouvvrez Visual Studiio 2010.
• Dans le menu D
Démarrer de 10557A-GEN-DEV, pointez
p sur Touss les
programmes, clliquez sur Microsoft Visual Studio 2010, puis surr
Microsoft Visua
al Studio 2010.
2. Crééez un projet d'ap
pplication Web.
a. Sur la page de d
démarrage de la feenêtre Microsoft Visual Studio, daans le
menu Fichier, ccliquez sur Nouveau projet.
b. Dans la boîte dee dialogue Nouveeau projet, dans le
l volet gauche, cliquez
c
sur Visual Basicc ou sur Visual C#.
C
c. b ASP.NET, puis sur OK.
Dans le volet ceentral, cliquez surr Application Web
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
2-50 Introduction au développement Web avec Microsoft® Visual Studio® 2010

3. Ajoutez les contrôles TextBox et Button au formulaire Web par défaut.


a. Dans la fenêtre Default.aspx, cliquez sur Création.
b. En mode Création, cliquez sur le texte Vous pouvez également, puis sur p.
Appuyez sur la flèche droite, puis sur la touche Entrée.
c. Dans la boîte à outils, développez Standard, puis double-cliquez sur le
contrôle Button.
d. Dans la boîte à outils, sous Standard, double-cliquez sur le contrôle
TextBox.
4. Ajoutez du code pour le gestionnaire d'événements Click du contrôle Button.
• Dans la fenêtre Default.aspx, double-cliquez sur le contrôle Button, puis
ajoutez le code suivant au gestionnaire d'événements Click.

[Visual Basic]
TextBox1.Text = "You clicked the button"

[Visual C#]
TextBox1.Text = "You clicked the button";

5. Écrivez du code pour intercepter la publication (PostBack) dans le gestionnaire


d'événements Page Load.
• Dans le gestionnaire d'événements Page_Load, tapez le code suivant :

[Visual Basic]
Protected Sub Page_Load(ByVal sender As Object, ByVal e As
System.EventArgs) Handles Me.Load
If Me.IsPostBack Then
Response.Write("Server roundtrip due to postback")
Else
Response.Write("First time page is loaded")
End If
End Sub
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'applications Web à l'aide de Microsoft® Visual Studio® 2010 et des langages Microsoft .NET 2-51

[Visual C#]
protected void Page_Load(object sender, EventArgs e)
{
if (this.IsPostBack)
{
Response.Write("Server roundtrip due to postback");
}
else
{
Response.Write("First time page is loaded");
}
}

6. Générez et déboguez la solution.


a. Placez le point d'arrêt en cliquant au début du code, à l'endroit où vous
recherchez la publication.
b. Dans WebApplication1, dans la fenêtre Microsoft Visual Studio
(Administrateur), accédez au menu Déboguer, puis cliquez sur Démarrer
le débogage.

Remarque : si le message Débogage non activé apparaît, cliquez sur OK.

c. Exécutez l'application en mode débogage et parcourez les lignes de code


en appuyant sur la touche F10. Lorsque le navigateur s'ouvre après la
première session de débogage, cliquez sur Page dans la barre d'outils, puis
sur Afficher la source pour afficher la source dans Internet Explorer.
d. Cliquez sur Button pour effectuer une publication sur le serveur.
e. Dans la fenêtre de code Default.aspx.vb ou Default.aspx.cs, parcourez les
lignes de code en appuyant sur la touche F10.
f. Dans la fenêtre source http://localhost:1186/Default.aspx-Original, cliquez
sur le bouton Fermer.
g. Dans la fenêtre http://localhost:1186/Default.aspx, cliquez sur le bouton
Fermer.

Question : lorsque vous créez un site Web, quels dossiers ou fichiers l'Explorateur
de solutions affiche-t-il ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
2-52 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Déplo
oiement d'un
ne applicatio
on Web

Points clés
Après avvoir créé et testé votre application
n Web, qu'elle soiit basée sur le mo
odèle de
site Webb ASP.NET ou le modèle d'applicaation Web ASP.N NET, vous devez générer
g et
déployeer l'application WWeb sur un serveu ur de test ou de production. Visual Studio
2010 voous aide à généreer et à déployer vootre application Web.
W

Serveu
urs
Dans un n environnementt de développemeent, vous déployeez l'application Web W sur le
serveur de test après avo oir terminé le dévveloppement et lees tests personnells.
L'appliccation est alors in
ntégralement testéée. Il existe souveent plusieurs servveurs de
test, tou
us dépendants dees différentes phaases de test que su ubit une applicattion Web,
notamm ment un test d'inttégration et un tesst d'acceptation utilisateur
u (UAT).. Une fois
l'applicaation Web entièremment testée et pubbliée, vous pouveez la déployer sur le serveur
de prod duction.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'applications Web à l'aide de Microsoft® Visual Studio® 2010 et des langages Microsoft .NET 2-53

IIS
Microsoft fournit un serveur Web IIS pour l'hébergement des applications Web. IIS
prend en charge la plupart des versions de système d'exploitation Windows®,
notamment toutes les éditions de Windows Server®, ainsi que plusieurs éditions de
Windows XP, Windows Vista® et Windows 7.

Options de déploiement
Plusieurs options de déploiement sont disponibles dans Visual Studio 2010.
Néanmoins, elles seront présentées dans des modules ultérieurs.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
2-54 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Atelier pratique
p : Création
n d'appliccations Web
W à
l'aide de
e Microsooft Visual Studio 2010 et dees
langagess Microsooft .NET

Remarque : dans cet atelie er pratique, vous po


ouvez exécuter les tâches
t en utilisant le langage
de programmation Visual Basic ou Visual C# #. Si vous utilisez Visual
V Basic comme e langage
de programmation, reporttez-vous aux instru uctions fournies da ans la section 1 de e la page
de l'ateliier pratique corresspondant. Si vous utilisez
u Visual C# comme
c langage de e
program mmation, reportez--vous aux instructions fournies dans la section 2 de la page de
l'atelier pratique
p corresponndant.

Introdu
uction
Dans ceet atelier pratiquee, vous créerez un
n projet de site Web
W ASP.NET sim mple, puis
ajoutereez un contrôle serrveur à un formulaire Web et en coonfigurerez les pro
opriétés.
De pluss, vous générerez et déploierez un site Web ASP.NE ET.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'applications Web à l'aide de Microsoft® Visual Studio® 2010 et des langages Microsoft .NET 2-55

Objectifs
Au terme de cet atelier pratique, vous serez à même d'effectuer les tâches suivantes :

1. Créer un projet de site Web ASP.NET simple.


2. Ajouter un contrôle serveur à un formulaire Web et en configurer les propriétés.
3. Générer et déployer un site Web ASP.NET.

Configuration de l'atelier pratique


Pour cet atelier pratique, vous utiliserez l'environnement d'ordinateurs virtuels
disponible. Avant de commencer l'atelier pratique, vous devez :
• Démarrer l'ordinateur virtuel 10557A-GEN-DEV, puis vous connecter à l'aide
du nom d'utilisateur et du mot de passe suivants :
• Nom d'utilisateur : Stagiaire
• Mot de passe : Pa$$w0rd
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
2-56 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Scéna
ario de l'ateliier pratique

Vous êtes développeur cchez Contoso, Ltd d, une grande enttreprise disposan
nt d'une
base de clients mondialee. Votre entreprise utilise des appllications Microsoft .NET
pour crééer, personnaliseer et gérer ses info
ormations client.
mettre une interaction rapide et sim
Elle déccide de créer un siite Web pour perm mple avec
les clien
nts. Outre le site W
Web externe desttiné aux clients, votre
v entreprise prévoit
p de
créer unn site Web permeettant de gérer less données de clients et les servicess dans
ASP.NE ET.
Vous êtes chargé de créeer le site Web à l'aaide du modèle de
d site Web ASP.N
NET, puis
de déployer ce site Web sur un répertoiree virtuel IIS.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'applications Web à l'aide de Microsoft® Visual Studio® 2010 et des langages Microsoft .NET 2-57

Section 1 : Visual Basic


Exercice 1 : Création d'un site Web ASP.NET
Dans cet exercice, les tâches principales sont les suivantes :
1. Créer un site Web ASP.NET vide.
2. Utiliser un port statique avec le serveur de développement ASP.NET.
3. Enregistrer le fichier solution.

4. Ajouter un fichier CSS existant au site Web.

X Tâche 1 : créer un site Web ASP.NET vide


• Connectez-vous à l'ordinateur virtuel 10557A-GEN-DEV avec le nom d'utilisateur
Stagiaire et le mot de passe Pa$$w0rd.
• Ouvrez Microsoft Visual Studio 2010.
• À partir de la boîte de dialogue Nouveau site Web, créez le site Web vide
CustomerManagement avec les paramètres suivants :
• Modèle : Site Web ASP.NET vide
• Nom : CustomerManagement
• Emplacement : système de fichiers
• Chemin : D:\Labfiles\Starter\M2\VB\CustomerManagement
• Langage : Visual Basic
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
2-58 Introduction au développement Web avec Microsoft® Visual Studio® 2010

X Tâche 2 : utiliser un port statique avec le serveur de développement


ASP.NET
• Dans l'Explorateur de solutions, cliquez sur
D:\Labfiles\Starter\M2\VB\CustomerManagement.
• Dans la fenêtre Propriétés, dans la liste Utiliser des ports dynamiques,
cliquez sur la valeur False.
• Dans la fenêtre Propriétés, dans la zone Numéro de port, tapez 1111, puis
appuyez sur Entrée.

Remarque : vous devrez peut-être attendre quelques secondes pour que la propriété
Numéro de port soit prête à être modifiée après que vous avez défini la propriété
Utiliser des ports dynamiques.

X Tâche 3 : enregistrer le fichier solution


• Dans l'Explorateur de solutions, cliquez sur la solution
« CustomerManagement » (1 projet), puis enregistrez le fichier solution sous
D:\Labfiles\Starter\M2\VB\CustomerManagement.sln, en utilisant la
commande Enregistrer sous du menu Fichier.

X Tâche 4 : ajouter un fichier CSS existant au site Web


• Créez un dossier nommé Styles dans le site Web CustomerManagement.
• Ajoutez le fichier D:\Labfiles\Starter\M2\Styles\Site.css au dossier Styles, à l'aide
de la boîte de dialogue Ajouter un élément existant.

Résultats : au terme de cet exercice, vous aurez créé un site ASP.NET basé sur un
système de fichiers et ajouté des styles au site Web.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'applications Web à l'aide de Microsoft® Visual Studio® 2010 et des langages Microsoft .NET 2-59

Exercice 2 : Ajout et configuration de contrôles serveur


dans des formulaires Web
Dans cet exercice, les tâches principales sont les suivantes :
1. Ajouter un formulaire Web par défaut au site Web.
2. Fermer Visual Studio 2010.
3. Ajouter le titre de l'application au formulaire Web par défaut.
4. Définir les propriétés de contrôle du formulaire Web par défaut.
5. Appliquer le style prédéfini au formulaire Web.

X Tâche 1 : ajouter un formulaire Web par défaut au site Web


• Ajoutez le formulaire Web Default.aspx au site Web CustomerManagement,
à partir de la boîte de dialogue Ajouter un nouvel élément.

Remarque : le formulaire Web par défaut apparaît en mode Source, où vous pouvez
remarquer que les éléments tels que form, div et body sont vides.

X Tâche 2 : fermer Visual Studio 2010


• Enregistrez les fichiers modifiés.
• Fermer Visual Studio 2010.

X Tâche 3 : ajouter le titre de l'application au formulaire Web par défaut


• Ouvrez Microsoft Visual Studio 2010 en tant qu'administrateur à l'aide de la
commande Exécuter en tant qu'administrateur du menu contextuel.
• Ouvrez la solution CustomerManagement dans le dossier
D:\Labfiles\Starter\M2\VB, à l'aide de la boîte de dialogue Ouvrir un projet.
• Dans la fenêtre Default.aspx, ajoutez un contrôle Literal de la boîte à outils à
l'élément div. Dans la fenêtre Propriétés, définissez son attribut Text sur
Customer Management et sa propriété ID sur AppTitleLiteral.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
2-60 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Enregistrez les modifications et affichez le formulaire Web par défaut dans un


navigateur Web à l'aide de la commande Afficher dans le navigateur figurant
dans le menu contextuel.

Remarque : vous pouvez désormais afficher le texte saisi dans le contrôle Literal.

X Tâche 4 : définir les propriétés de contrôle du formulaire Web par


défaut
• Ouvrez le formulaire Web par défaut en mode Création.
• Dans la fenêtre Propriétés, définissez la propriété Visible du contrôle Literal
sur la valeur False, puis enregistrez les modifications.
• Affichez le formulaire Web dans le navigateur, puis visualisez la source affichée
dans le navigateur. Pour cela, dans le menu Affichage d'Internet Explorer, utilisez
la commande Source.
• Fermez les fenêtres ouvertes d'Internet Explorer.
• Définissez la propriété Visible du contrôle Literal sur la valeur True.
• Définissez la propriété Styles de l'élément div à l'aide des propriétés de la boîte
de dialogue Modifier le style énumérées ci-après. Vous pouvez accéder à ces
propriétés à partir de la propriété Style de la fenêtre Propriété :
• Font-family : Trebuchet MS
• Font-size : 22
• Color : Gris
• Enregistrez les modifications et affichez le formulaire Web par défaut dans un
navigateur Web.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'applications Web à l'aide de Microsoft® Visual Studio® 2010 et des langages Microsoft .NET 2-61

X Tâche 5 : appliquer le style prédéfini au formulaire Web


• Affichez les modifications en mode Source.
• Ajoutez une référence au fichier Site.css dans le dossier Styles au sein de l'élément
head. Pour cela, faites glisser le fichier Styles/Site.css dans la fenêtre Default.aspx,
en regard de l'élément title.
• Définissez la propriété Class de l'élément div sur appTitle. Ensuite, dans la fenêtre
Propriétés, supprimez les styles spécifiques appliqués pour la propriété Styles.
• Enregistrez les modifications et affichez le formulaire Web par défaut dans un
navigateur Web.

Remarque : vous pouvez désormais afficher les modifications apportées au contrôle Literal.

Résultat : au terme de cet exercice, vous aurez conçu la version initiale du formulaire
Web par défaut de votre site Web.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
2-62 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Exercice 3 : Génération et déploiement d'une application


Web ASP.NET
La principale tâche de cet exercice consiste à générer et à déployer le site Web
CustomerManagement.

X Tâche 1 : générer et déployer le site Web CustomerManagement


• Pour ouvrir l'outil Copier le site Web, sélectionnez le site Web dans
l'Explorateur de solutions, puis utilisez le menu Site Web.
• Connectez-vous à l'IIS local dans l'outil Copier le site Web.
• Créez un répertoire virtuel sous le site Web par défaut. Pour ce faire,
sélectionnez Default Web Site, puis cliquez sur le bouton Créer un répertoire
virtuel. Utilisez les paramètres suivants :
• Nom d'alias : CustomerManagement
• Dossier : C:\inetpub\wwwroot\CustomerManagement
• Dans la boîte de dialogue Ouvrir le site Web, sélectionnez et ouvrez le nouveau
répertoire virtuel.
• Copiez le site Web CustomerManagement dans le nouveau répertoire virtuel
sur l'IIS local. Pour ce faire, sélectionnez tous les fichiers et dossiers dans le volet
gauche de l'outil Copier le site Web, puis cliquez sur le bouton Copier les fichiers
sélectionnés du site Web source vers le site Web distant.
• Affichez le site Web déployé dans Internet Explorer à l'adresse suivante :
http://localhost:1112/CustomerManagement.

X Tâche 2 : Désactiver l'ordinateur virtuel et annuler les modifications.


• Désactivez l'ordinateur virtuel 10557A-GEN-DEV.
• Annulez les modifications apportées à l'ordinateur virtuel 10557A-GEN-DEV.

Résultat : au terme de cet exercice, vous aurez généré et déployé le site Web
CustomerManagement sur l'IIS local.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'applications Web à l'aide de Microsoft® Visual Studio® 2010 et des langages Microsoft .NET 2-63

Section 2 : Visual C#
Exercice 1 : Création d'un site Web ASP.NET
Dans cet exercice, les tâches principales sont les suivantes :
1. Créer un site Web ASP.NET vide.
2. Utiliser un port statique avec le serveur de développement ASP.NET.
3. Enregistrer le fichier solution.

4. Ajouter un fichier CSS existant au site Web.

X Tâche 1 : créer un site Web ASP.NET vide


• Connectez-vous à l'ordinateur virtuel 10557A-GEN-DEV avec le nom
d'utilisateur Stagiaire et le mot de passe Pa$$w0rd.
• Ouvrez Microsoft Visual Studio 2010.
• À partir de la boîte de dialogue Nouveau site Web, créez le site Web vide
CustomerManagement avec les paramètres suivants :
• Modèle : Site Web ASP.NET vide
• Nom : CustomerManagement
• Emplacement : système de fichiers
• Chemin : D:\Labfiles\Starter\M2\CS\CustomerManagement
• Langage : Visual C#

X Tâche 2 : utiliser un port statique avec le serveur de développement


ASP.NET
• Dans l'Explorateur de solutions, cliquez sur
D:\Labfiles\Starter\M2\CS\CustomerManagement.
• Dans la fenêtre Propriétés, dans la liste Utiliser des ports dynamiques,
cliquez sur la valeur False.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
2-64 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Dans la fenêtre Propriétés, dans la zone Numéro de port, tapez 1110, puis
appuyez sur Entrée.

Remarque : vous devrez peut-être attendre quelques secondes pour que la propriété
Numéro de port soit prête à être modifiée après que vous avez défini la propriété
Utiliser des ports dynamiques.

X Tâche 3 : enregistrer le fichier solution


• Dans l'Explorateur de solutions, cliquez sur la solution
« CustomerManagement » (1 projet), puis enregistrez le fichier solution sous
D:\Labfiles\Starter\M2\CS\CustomerManagement.sln, en utilisant la
commande Enregistrer sous du menu Fichier.

X Tâche 4 : ajouter un fichier CSS existant au site Web


• Créez un dossier nommé Styles dans le site Web CustomerManagement.
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le site Web,
puis cliquez sur Nouveau dossier.
• Ajoutez le fichier D:\Labfiles\Starter\M2\Styles\Site.css au dossier Styles,
à l'aide de la boîte de dialogue Ajouter un élément existant.

Résultats : au terme de cet exercice, vous aurez créé un site ASP.NET basé sur un
système de fichiers et ajouté des styles au site Web.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'applications Web à l'aide de Microsoft® Visual Studio® 2010 et des langages Microsoft .NET 2-65

Exercice 2 : Ajout et configuration de contrôles serveur


dans des formulaires Web
Dans cet exercice, les tâches principales sont les suivantes :
1. Ajouter un formulaire Web par défaut au site Web.
2. Fermer Visual Studio 2010.
3. Ajouter le titre de l'application au formulaire Web par défaut.
4. Définir les propriétés de contrôle du formulaire Web par défaut.
5. Appliquer le style prédéfini au formulaire Web.

X Tâche 1 : ajouter un formulaire Web par défaut au site Web


• Ajoutez le formulaire Web Default.aspx au site Web CustomerManagement,
à partir de la boîte de dialogue Ajouter un nouvel élément.

Remarque : le formulaire Web par défaut apparaît en mode Source, où vous pouvez voir
que les éléments tels que form, div et body sont vides.

X Tâche 2 : fermer Visual Studio 2010


• Enregistrez les fichiers modifiés.
• Fermer Visual Studio 2010.

X Tâche 3 : ajouter le titre de l'application au formulaire Web par défaut


• Ouvrez Microsoft Visual Studio 2010 en tant qu'administrateur à l'aide de la
commande Exécuter en tant qu'administrateur du menu contextuel.
• Ouvrez la solution CustomerManagement dans le dossier
D:\Labfiles\Starter\M2\CS, à l'aide de la boîte de dialogue Ouvrir un projet.
• Dans la fenêtre Default.aspx, ajoutez un contrôle Literal de la boîte à outils à
l'élément div. Dans la fenêtre Propriétés, définissez son attribut Text sur
Customer Management et sa propriété ID sur AppTitleLiteral.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
2-66 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Enregistrez les modifications et affichez le formulaire Web par défaut dans un


navigateur Web à l'aide de la commande Afficher dans le navigateur figurant
dans le menu contextuel.

Remarque : vous pouvez désormais afficher le texte saisi dans le contrôle Literal.

X Tâche 4 : définir les propriétés de contrôle du formulaire Web par défaut


• Ouvrez le formulaire Web par défaut en mode Création.
• Dans la fenêtre Propriétés, définissez la propriété Visible du contrôle Literal
sur la valeur False, puis enregistrez les modifications.
• Affichez le formulaire Web dans le navigateur, puis visualisez la source affichée
dans le navigateur. Pour cela, dans le menu Affichage d'Internet Explorer,
utilisez la commande Source.
• Fermez les fenêtres ouvertes d'Internet Explorer.
• Définissez la propriété Visible du contrôle Literal sur la valeur True. Définissez
la propriété Styles de l'élément div à l'aide des propriétés de la boîte de dialogue
Modifier le style énumérées ci-après. Vous pouvez accéder à ces propriétés à
partir de la propriété Style de la fenêtre Propriété :
• Font-family : Trebuchet MS
• Font-size : 22
• Color : Gris
• Enregistrez les modifications et affichez le formulaire Web par défaut dans un
navigateur Web.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'applications Web à l'aide de Microsoft® Visual Studio® 2010 et des langages Microsoft .NET 2-67

X Tâche 5 : appliquer le style prédéfini au formulaire Web


• Affichez les modifications en mode Source.
• Ajoutez une référence au fichier Site.css dans le dossier Styles au sein de
l'élément head. Pour cela, faites glisser le fichier Styles/Site.css dans la fenêtre
Default.aspx, en regard de l'élément title.
• Définissez la propriété Class de l'élément div sur appTitle. Ensuite, dans la fenêtre
Propriétés, supprimez les styles spécifiques appliqués pour la propriété Styles.
• Enregistrez les modifications et affichez le formulaire Web par défaut dans un
navigateur Web.

Remarque : vous pouvez désormais afficher les modifications apportées au contrôle


Literal.

Résultats : au terme de cet exercice, vous aurez conçu la version initiale du formulaire
Web par défaut de votre site Web.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
2-68 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Exercice 3 : Génération et déploiement d'une application


Web ASP.NET
La principale tâche de cet exercice consiste à générer et à déployer le site Web
CustomerManagement.

X Tâche 1 : générer et déployer le site Web CustomerManagement


• Générez le site Web CustomerManagement, puis vérifiez qu'il ne contient
aucune erreur.
• Pour ouvrir l'outil Copier le site Web, sélectionnez le site Web dans l'Explorateur
de solutions, puis utilisez le menu Site Web.
• Connectez-vous à l'IIS local dans l'outil Copier le site Web.
• Créez un répertoire virtuel sous le site Web par défaut. Pour ce faire, sélectionnez
Default Web Site, puis cliquez sur le bouton Créer un répertoire virtuel.
Utilisez les paramètres suivants :
• Nom d'alias : CustomerManagement
• Dossier : C:\inetpub\wwwroot\CustomerManagement
• Dans la boîte de dialogue Ouvrir le site Web, sélectionnez et ouvrez le
nouveau répertoire virtuel.
• Copiez le site Web CustomerManagement dans le nouveau répertoire virtuel
sur l'IIS local. Pour ce faire, sélectionnez tous les fichiers et dossiers dans le volet
gauche de l'outil Copier le site Web, puis cliquez sur le bouton Copier les fichiers
sélectionnés du site Web source vers le site Web distant.
• Affichez le site Web déployé dans Internet Explorer à l'adresse suivante :
http://localhost:1112/CustomerManagement.

X Tâche 2 : désactiver l'ordinateur virtuel et annuler les modifications


• Désactivez l'ordinateur virtuel 10557A-GEN-DEV.
• Annulez les modifications apportées à l'ordinateur virtuel 10557A-GEN-DEV.

Résultats : au terme de cet exercice, vous aurez généré et déployé le site Web
CustomerManagement sur l'IIS local.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'applications Web à l'aide de Microsoft® Viisual Studio® 2010 et des langages Microsoft .NET 2-69

Récap
pitulatif de l'atelier pratiq
que

1. Com
mment avez-vouss créé un site Web
b?
2. Ind
diquez une raison
n pour laquelle un
n fichier code-beh
hind est associé à un
form
mulaire Web ASPP.NET (.aspx) ?
3. Com
mment procéder pour afficher ou masquer un con
ntrôle serveur ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
2-70 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Récapitu
ulatif du m
module et
e élémen
nts à retenir

Parcou
urir les question
ns et les répon
nses
1. Com
mment sélectionn neriez-vous un laangage de program
mmation .NET po
our créer
un projet d'applicatiion Web ?
2. ommon Languagee Runtime dans l''exécution d'une page
Quel rôle joue le Co
P.NET ?
ASP
3. Quel est le rôle de laa compilation JIT
T?
4. Énu
umérez quelques langages actuelleement pris en charrge par .NET Fram
mework.
5. Pou
urquoi procéder à la création d'un
n composant pourr une application
n Web ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'applications Web à l'aide de Microsoft® Visual Studio® 2010 et des langages Microsoft .NET 2-71

Problèmes et scénarios réels


1. Vous souhaitez créer un service WCF. Quelle est la méthode d'implémentation
la plus simple ?
Utilisez le modèle de projet d'application de service WCF.
2. Vous souhaitez créer un composant réutilisable à partager avec d'autres projets.
Quelle est la méthode d'implémentation la plus simple ?
Utilisez le modèle de projet de bibliothèque de classes.

Outils

Outil Fonction Où rechercher

Fenêtre Éditeur Affiche le code pour le processus Visual Studio IDE


de modification, ainsi qu'une
interface graphique pour le
positionnement des contrôles.

Explorateur de Affiche la hiérarchie des fichiers de Visual Studio IDE


solutions projet, et vous permet de déplacer
et de modifier les fichiers.

Fenêtre Propriétés Permet de régler les propriétés des Visual Studio IDE
documents, des classes, et des
contrôles.

Liste des tâches Permet de suivre l'état des tâches Visual Studio IDE
au cours du développement de
votre application.

Sortie Affiche les messages d'état des Visual Studio IDE


différentes fonctionnalités de l'IDE.

Boîte à outils Permet d'utiliser une opération de Visual Studio IDE


glisser-déplacer sur les contrôles
de votre application.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'un formulaire Web Microsoft® ASP.NET 3-1

Module 3
Création d'un formulaire Web
Microsoft® ASP.NET
Table des matières :
Leçon 1 : Création de formulaires Web 3-3
Leçon 2 : Ajout et configuration de contrôles serveur dans un
formulaire Web 3-12
Atelier pratique : Création d'un formulaire Web Microsoft ASP.NET 3-37
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
3-2 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Vue d'en
nsemble du modu
ule

Les formmulaires Web Miccrosoft® ASP.NET T sont les élémentts d'interface utilissateur
détermiinant l'apparence de vos applications Web. Un form mulaire Web préseente les
informaations à l'utilisateu
ur dans tout type de navigateur et implémente
i la loggique
d'appliccation à l'aide du ccode côté serveurr. Microsoft Visuall Studio offre unee interface
intuitivee de type glisser-d
déplacer permettaant de créer l'interface utilisateur dee votre
applicattion Web. Dans cee module, vous ap pprendrez à créerr des formulaires Web et à
les remp plir avec des conttrôles serveur.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
C
Création d'un formulaire Web
W Microsoft® ASP.NET 3-3

Leçon 1
Création
n de form
mulaires Web
W

Les formmulaires Web com mportent un enseemble de balises, de codes et de contrôles


exécutéés sur un serveur Web, tels que less services Interneet (IIS). Ils sont so
ouvent
appelés pages ASP.NET ou pages .aspx. Vous V pouvez créeer des formulairess Web à
l'aide dee Microsoft Visuaal Basic® ou de Microsoft
M Visual C#®.
C Lors de la crééation de
formulaaires Web, vous p pouvez choisir dee placer le code daans un fichier disstinct.
Dans ceette leçon, vous ap
pprendrez ce qu'est un formulairee Web et commen nt en
créer un
n. Vous apprendrrez également à id
dentifier leurs priincipales caractérristiques.

Objecttifs de la leçon
Au term
me de cette leçon, vous serez à mêm
me d'effectuer less tâches suivantess :
• déccrire un formulairre Web ASP.NET ;
• pliquer comment créer un formulaaire Web ASP.NE
exp ET.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
3-4 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Qu'esst-ce qu'un formulaire Web


W ?

Points clés
Les formmulaires Web sontt les conteneurs du d texte et des con ntrôles que vous so ouhaitez
afficher dans le navigateur. Ils génèrent le code
c HTML (Hypeertext Markup Lan nguage)
oient au navigateur. Cependant, les contrôles qui exéccutent l'interface utilisateur
et l'envo u
restent sur
s le serveur Web b. Cette séparationn de l'interface côtté client et du cod
de côté
serveur constitue la princcipale différence enntre les formulairees Web et les pagees Web
traditionnnelles. Sur une page Web tradition nnelle, le navigateu ur côté client traitee le code.
Par conttre, les formulairess Web n'envoient que le balisage et les scripts côté cliient au
navigateeur, tandis que le ttraitement de la paage reste sur le serrveur. Le fait que l'interface
l
côté clieent et le code côté serveur soient sépparés permet d'augmenter le nombrre de
navigateeurs pris en chargee, et améliore la séécurité et les foncttionnalités de la paage Web.

Extenssion .aspx
Les form
mulaires Web possèdent une extension .aspx et co
ontiennent souven
nt
deux ficchiers distincts :
• le fiichier .aspx conteenant l'interface utilisateur
u d'un fo
ormulaire Web ;
• Le fichier
f .aspx.vb (ccode Visual Basicc) ou .aspx.cs (coode Visual C#) co
ontenant
le code
c de prise en ccharge. Ce fichierr est appelé le fich
hier code-behind..
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'un formulaire Web Microsoft® ASP.NET 3-5

Directives, déclarations et éléments de page


Cinq niveaux de directives, de déclarations et d'éléments définissent les fonctions
d'un formulaire Web :
• La directive Page et ses attributs associés définissent les fonctions globales.
• L'élément !DOCTYPE et ses attributs associés indiquent la définition du type
de document (DTD) à laquelle le formulaire Web est conforme.
• L'élément HTML et ses attributs associés vérifient que le formulaire Web
contient les éléments HTML.
• L'élément BODY et ses attributs associés définissent et contiennent tout le
contenu d'une page.
• L'élément FORM et ses attributs associés définissent le traitement des groupes
de contrôles.

Directive et attributs de page


La directive de page @ Page définit les attributs propres à la page utilisés par
l'analyseur et le compilateur de page ASP.NET. Pour chaque formulaire Web,
vous ne devez inclure qu'une seule balise de directive de page. Les exemples
suivants montrent les attributs par défaut de la directive de page, pour un
nouveau formulaire Web Visual C# et Visual Basic.

[Visual Basic]
<%@ Page Title="" Language="VB" CodeFile="Default.aspx.vb"
Inherits="_Default" %>

[Visual C#]
<%@ Page Title="" Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
3-6 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Les attributs d'une directive de page sont les suivants :


• AutoEventWireUp. L'attribut AutoEventWireUp permet d'indiquer si les
événements de niveau de page des méthodes d'événement sont automatiquement
connectés. Cela signifie que l'élément Page_Load, par exemple, est
automatiquement connecté pour être traité et géré dans le fichier code-behind,
si vous associez le gestionnaire d'événements correspondant et que vous
ajoutez du code à ce dernier. Pour Visual C#, la valeur par défaut est True,
mais pour Visual Basic, elle est définie sur False. Lorsque l'attribut
AutoEventWireup a la valeur True, ASP.NET ne requiert pas de liaison explicite
entre les gestionnaires d'événements et les événements de page, tels que Load
ou Init. À la place, les gestionnaires sont automatiquement liés aux événements
au moment de l'exécution, en fonction de leur nom et de leur signature.
Pour chaque événement, ASP.NET recherche une méthode nommée selon le
modèle Page_eventname, telle que Page_Load ou Page_Init. ASP.NET recherche
d'abord une surcharge ayant la signature de gestionnaire d'événements par défaut
Object et EventArgs. Si aucun gestionnaire d'événements avec cette signature n'est
trouvé, ASP.NET recherche une surcharge ne possédant aucun paramètre. Lorsque
l'attribut AutoEventWireup a la valeur False, vous devez lier explicitement les
gestionnaires aux événements. Dans ce cas, les noms de méthode ne doivent pas
nécessairement suivre le modèle.
• CodeBehind. L'attribut CodeBehind spécifie le nom du fichier compilé
contenant la classe associée à la page. Cet attribut est utilisé avec les projets
d'application Web (WAP).
• CodeFile. L'attribut CodeFile spécifie le chemin vers le fichier code-behind
référencé pour une page utilisant la configuration à deux fichiers. Cet attribut est
utilisé avec l'attribut Inherits pour associer le fichier code-behind transmettant la
logique qui prend en charge le formulaire Web. Cet attribut est utilisé avec les
projets de site Web (WSP).
• Inherits. L'attribut Inherits définit le nom de la classe code-behind hérité par la
page. L'attribut Inherits respecte la casse lorsque le langage de la page est
Visual C#, mais il ne la respecte pas lorsque le langage de la page est Visual Basic.
Cet attribut est utilisé avec l'attribut CodeFile, qui contient le chemin vers le
fichier source pour la classe code-behind. Notez que l'attribut CodeFile dans les
exemples précédents indique un fichier commençant par Default, mais que la
valeur de l'attribut Inherits est définie sur _Default. Cela est dû au fait que
Default est un mot clé dans Visual Basic et que Visual Studio 2010 préfixe
automatiquement le nom de classe par un trait de soulignement afin d'éviter les
conflits de nom. Il en est de même pour Visual C#, où il n'existe pas de mot clé
Default dont le premier caractère est en majuscule. Toutefois, sachez que default,
tout en minuscule, est un mot clé dans Visual C#, qui respecte la casse.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'un formulaire Web Microsoft® ASP.NET 3-7

• Language. L'attribut Language spécifie le langage de programmation du code


côté serveur sur le formulaire Web. Cela inclut le fichier code-behind, le code
inline et les blocs de déclaration de code sur la page. Certaines des valeurs de
cet attribut sont en langage Visual C# et Visual Basic, et elles permettent
d'indiquer le compilateur à utiliser pour analyser et compiler la page.
• Title. L'attribut Title spécifie le titre de la page ; il apparaît sous forme de
légende dans le navigateur et sur l'onglet si votre session de navigateur
contient des onglets. La définition de cet attribut a le même effet que l'ajout
d'un l'élément TITLE dans l'élément HTML. Cependant, si ces deux attributs
sont spécifiés, c'est l'attribut title de la directive Page qui est prioritaire.

Remarque : lorsque vous créez un formulaire Web et choisissez de placer le code dans
un fichier distinct (valeur par défaut), les attributs CodeFile et Inherits sont utilisés dans
une configuration à deux fichiers. Les formulaires Web à fichier unique n'utilisent pas ces
attributs.

Élément et attributs !DOCTYPE


L'élément !DOCTYPE et ses attributs associés indiquent la DTD à laquelle le
formulaire Web est conforme. L'exemple suivant illustre un élément !DOCTYPE
type créé par Visual Studio 2010.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

L'élément !DOCTYPE est généralement utilisé pour spécifier la version HTML


ou XHTML (Extensible HTML) à laquelle le formulaire Web est conforme. Vous
trouverez plus d'informations sur l'élément de déclaration !DOCTYPE dans l'aide
de Microsoft Visual Studio 2010.

Éléments et attributs HTML


L'élément HTML et ses attributs associés déterminent que le formulaire Web
contient du langage HTML. En mode conforme aux normes, l'élément HTML
représente l'ensemble de la surface sur laquelle le contenu d'un document peut
être rendu. L'élément HTML devient également le conteneur de positionnement
des éléments positionnés n'ayant pas de parent positionné ; par exemple, un
conteneur ou élément parent ayant un positionnement différent du comportement
par défaut. L'exemple suivant illustre un élément HTML type. Cet élément n'est
pas affiché et il ne contient généralement pas d'attribut.

<html>
...
</html>
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
3-8 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Éléments et attributs BODY


L'élément BODY et ses attributs définissent l'affichage des objets dans le navigateur
du client. En mode non conforme aux normes, l'élément body représente l'ensemble
de la surface sur laquelle vous pouvez afficher le contenu. L'exemple suivant illustre
un élément body type.

<body class="body" title="This page...">


</body>

Les attributs d'un élément BODY sont les suivants :


• class. L'attribut class détermine la classe des feuilles de style en cascade (CSS)
qui fournit les éléments de style dans le corps du formulaire Web.
• title. L'attribut title définit une chaîne servant d'info-bulle lorsque le pointeur
est placé sur un élément HTML ou un contrôle serveur situé dans le corps
d'un formulaire Web.

Remarque : vous pouvez utiliser une feuille de style en cascade (CSS) pour décrire
l'apparence et le formatage d'un formulaire Web, ou pour définir le style des pages Web
HTML, en spécifiant les couleurs, les polices, les bordures et la disposition. Les feuilles de
style en cascade permettent de séparer les balises de la présentation. Vous pouvez ainsi
réutiliser les styles dans plusieurs formulaires Web pour couvrir l'ensemble d'un site Web.
Bien que les styles soient réutilisés, des styles distincts seront généralement appliqués à
des pages différentes. Dans Visual Studio 2010, la fenêtre Appliquer les styles vous permet
d'appliquer des styles à un élément HTML ou un contrôle serveur Web spécifique. Vous
pouvez ensuite utiliser la fenêtre Gérer les styles pour gérer et suivre tous les styles de
votre application Web. Ces deux fenêtres sont accessibles à partir du menu Affichage.

Éléments et attributs FORM


La balise <form> diffère de la balise <html> qui définit la totalité de la page Web.
Les attributs de la balise <form> définissent le traitement des groupes de contrôles.
Bien que plusieurs formulaires HTML puissent apparaître sur une page, vous ne
pouvez afficher qu'un seul formulaire côté serveur sur une page .aspx.
L'exemple suivant illustre un élément FORM type.

<form id="form1" runat="server">


...
</form>
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'un formulaire Web Microsoft® ASP.NET 3-9

Les attributs d'un élément FORM sont les suivants :


• id. L'attribut id identifie le code côté serveur du formulaire lorsque l'accès par
programme est requis.
• method. L'attribut method identifie la méthode de renvoi des valeurs de
contrôle au serveur. Les options de cet attribut sont les suivantes :
• post. Les données sont transmises par paires nom/valeur dans le corps
de la requête HTTP. Il s'agit de la valeur par défaut.
• get. Les données sont transmises dans une chaîne de requête.
• runat. L'attribut runat="server" indique que le formulaire doit être traité sur le
serveur. Avec l'attribut runat="server", le formulaire publie les informations de
contrôle dans la page ASP.NET sur le serveur sur lequel le code de prise en charge
est exécuté. Si l'attribut runat n'est pas défini sur "server" ou s'il est omis, le
formulaire fonctionne comme un formulaire HTML standard.

Question : quels sont les deux composants des formulaires Web ?


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
3-10 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Procé
édure de créa
ation d'un fo
ormulaire Web

Points clés
Lorsquee vous créez une application Web vide ou un site Web W vide dans
Visual Studio
S 2010, un sseul fichier web.cconfig est inclus.

f Créatio
on d'un projet d'application Web
W ASP.NET
1. Dan
ns Visual Studio 2
2010, dans le meenu Fichier, cliqu
uez sur Nouveau projet.
2. Danns la boîte de diallogue Nouveau projet,
p olet gauche, cliquez sur
dans le vo
Visual Basic ou sur Visual C#.
3. Dan
ns le volet centrall, cliquez sur App
plication Web AS
SP.NET vide.
4. Dan
ns les zones Nom m et Emplacemen
nt, indiquez le no
om et l'emplacem
ment du
pro
ojet, puis cliquez ssur OK.
Visu
ual Studio 2010 ccrée une applicattion Web.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'un formulaire Web Microsoft® ASP.NET 3-11

f Création d'un projet de site Web ASP.NET


1. Dans Visual Studio 2010, dans le menu Fichier, cliquez sur Nouveau site Web.
2. Dans la boîte de dialogue Nouveau site Web, dans le volet gauche, cliquez sur
Visual Basic ou sur Visual C#.
3. Dans le volet central, cliquez sur Site Web ASP.NET vide.
4. Dans la zone Emplacement, indiquez l'emplacement du site Web, puis cliquez
sur OK.

Visual Studio 2010 crée un site Web.

f Ajout d'un formulaire Web à une application Web ou un site Web


existant
Si vous développez un projet existant, vous pouvez utiliser l'Explorateur de
solutions pour ajouter d'autres formulaires Web.
1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur un nom de
projet d'application Web ou de site Web, puis cliquez sur Ajouter un nouvel
élément. Vous pouvez également cliquer avec le bouton droit sur un nom de
projet d'application Web ou de site Web, puis accéder au menu Site Web et
cliquer sur Ajouter un nouvel élément (raccourci clavier : CTRL+Maj+A).
2. Dans la boîte de dialogue Ajouter un nouvel élément, dans le volet central,
cliquez sur le modèle Web Form.
3. Dans la zone Nom, indiquez le nom du formulaire Web.
4. Pour créer un fichier code-behind destiné à un projet de site Web, activez la
case à cocher Placer le code dans un fichier distinct et cliquez sur Ajouter.

Visual Studio 2010 crée un formulaire Web et l'ajoute au projet Web ou au site
Web existant.

Question : quel outil pouvez-vous utiliser pour ajouter d'autres formulaires Web si
vous développez un projet existant ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
3-12 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Leçon 2
Ajout et configurration de contrôle
es serveurr
dans un formulaire Web

Les conttrôles serveur ASP P.NET sont exécuttés sur le serveur ; ils encapsulent l'iinterface
utilisateeur et d'autres fon
nctionnalités connexes. Ces contrô ôles serveur, tels que les
boutonss, les zones de tex xte et les listes, sont différents des contrôles
c HTML standard
car la logique de prise en n charge est exécu utée sur le serveurr, et non dans le navigateur
n
de l'utiliisateur.
Dans ceette leçon, vous ap
pprendrez à utiliser les contrôles serveur ASP.NET
T.

Objecttifs de la leçon
Au term
me de cette leçon, vous serez à mêm
me d'effectuer less tâches suivantess :
• déccrire un contrôle serveur ASP.NET
T;
• déccrire les types de contrôles serveurr ;
• enrregistrer l'état d'afffichage des contrrôles serveur ;
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'un formulaire Web Microsoft® ASP.NET 3-13

• ajouter et configurer des contrôles serveur HTML ;


• ajouter et configurer des contrôles serveur Web ;
• déterminer le contrôle serveur approprié pour un formulaire Web.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
3-14 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Qu'esst-ce qu'un ccontrôle serv


veur ?

Points clés
Les con ntrôles serveur ASSP.NET sont exéccutés sur le serveu ur et encapsulentt
l'interface utilisateur. Vous pouvez utiliseer des contrôles serveur dans les
formulaaires Web ASP.NE ET pour répondre aux événementts dans les classess
code-beehind de formulaiire Web ASP.NET T.
L'exemp
ple suivant illustrre un contrôle serrveur Web Butto
on.

<asp:B
Button id="Subm
mitButton" runat
t="server" Text
t="Submit" />

L'exemp
ple suivant illustrre un contrôle serrveur HTML inpu
ut.

<input
t type="text" v
value="Submit" runat="server"
r />
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'un formulaire Web Microsoft® ASP.NET 3-15

runat="server"
Les contrôles serveur possèdent un attribut runat, qui ne peut être défini que sur
la valeur server.

Remarque : Dans certains cas, les contrôles serveur exigent un script client pour pouvoir
fonctionner correctement. Si l'utilisateur désactive les scripts dans le navigateur, les contrôles
peuvent ne pas fonctionner comme vous le souhaitez. Toutefois, la plupart des contrôles
intrinsèques fonctionneront correctement avec ou sans script côté client.

En outre, les contrôles serveur permettent d'enregistrer automatiquement l'état


d'affichage, les paramètres et l'entrée utilisateur du contrôle lorsque la page est
transmise entre le client et le serveur. Les éléments HTML traditionnels sont sans
état et leurs paramètres par défaut sont rétablis lorsque la page retransite du serveur
vers le client.

Remarque : pour plus d'informations sur l'état d'affichage, consultez la rubrique


« Enregistrement de l'état d'affichage », plus loin dans cette leçon.

Fonctionnalités intégrées
La fonctionnalité d'un contrôle serveur est liée à ce qui se passe lorsque l'utilisateur
clique sur un bouton de commande ou une zone de liste. Ces processus sont appelés
gestionnaires d'événements. En tant que programmeur de formulaire Web, vous
devez déterminer les gestionnaires d'événements à implémenter pour chaque contrôle
serveur.

Modèle d'objet commun


Dans ASP.NET, les contrôles serveur utilisent un modèle d'objet commun ; par
conséquent, ils partagent plusieurs attributs. Par exemple, pour définir la couleur
d'arrière-plan d'un contrôle serveur Web, vous utilisez toujours le même attribut
BackColor, quel que soit le contrôle. Le balisage suivant d'un bouton de contrôle
serveur Web présente certains des attributs par défaut d'un contrôle serveur.

<asp:Button id="Button1" runat="server" BackColor="Red" Width="238px"


Height="25px" Text="Web control" />
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
3-16 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Création d'un code HTML propre au navigateur


Lorsqu'une page est affichée pour un navigateur, les contrôles serveur Web
déterminent le type de navigateur consultant la page, puis ils fournissent le
code HTML approprié.
Par exemple, si le navigateur effectuant la demande prend en charge les scripts
côté client, tel que Windows Internet Explorer® 8, les contrôles créent le script
côté client afin d'implémenter leur fonctionnalité. Toutefois, si le navigateur
effectuant la demande ne prend pas en charge le script côté client, les contrôles
créent le code côté serveur et requièrent davantage d'allers-retours vers le serveur
pour obtenir la même fonctionnalité.
L'exemple suivant illustre le script XHTML que vous devez écrire pour créer une
zone de texte contenant le texte par défaut « Enter your Username ».

<asp:TextBox id="UsernameTextBox" runat="server" Width="238px"


Height="25px">Enter your Username</asp:TextBox>

Lorsqu'un utilisateur accède à cette page via Internet Explorer 8, le common


language runtime crée l'élément HTML suivant, qui est personnalisé pour
Internet Explorer 8.

<input name="UsernameTextBox" type="text" value="Enter your Username"


id="UsernameTextBox" style="height:25px;width:238px;" />

Puisque le contrôle serveur crée le code HTML personnalisé adapté aux fonctionnalités
disponibles dans le navigateur du client, vous pouvez écrire le code pour les
navigateurs les plus récents sans vous préoccuper des erreurs de navigateur. Votre
code fonctionnera même si les utilisateurs ne disposent pas des dernières versions
du navigateur.

Question : quel attribut change un contrôle simple en contrôle serveur ?


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
C
Création d'un formulaire Web
W Microsoft® ASP.NET 3-17

Typess de contrôle
es serveur

Points clés
Dans AS SP.NET, vous disp posez de nombreux contrôles servveur. Certains con ntrôles
serveur ressemblent énorrmément aux élém ments HTML trad ditionnels, tandis que
d'autress sont propres à A
ASP.NET. Grâce à ce large éventail de
d contrôles, vouss pouvez
personn naliser votre form
mulaire Web pour qu'il correspondee à votre applicatiion.

Contrô
ôles serveur HT
TML
Par défaaut, les éléments HTML sur un forrmulaire Web nee sont pas dispon nibles
dans le serveur. Les élém
ments HTML son nt traités comme du d texte brut tran
nsmis via
le naviggateur. Cependannt, vous pouvez ajjouter l'attribut ru
unat="server" et sa valeur
pour coonvertir les élémeents HTML en con ntrôles serveur HTML.
H Vous pouvvez alors
program mmer ces élémen nts HTML à l'aide du code côté serrveur.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
3-18 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Le tableau suivant répertorie quelques-uns des éléments HTML les plus communément
utilisés. Les contrôles serveur HTML et les contrôles serveur Web sont affichés sous
forme d'un ou de plusieurs de ces éléments.

Nom de
l'élément Description Exemple
a Élément d'ancrage <a href="/Page2.aspx"
permettant d'accéder title="Go To Page 2.">Page 2</a>
à une autre page, image
ou ressource.

br Élément de fermeture <br />


automatique ajoutant un
saut de ligne à la page.

img Élément à fermeture <img src="/login.png"


automatique qui incorpore alt="Log in to web application."
une image dans la page. />

input Indique les différents types <input type="text"


d'éléments d'entrée, y name="UserName">
compris un bouton de
soumission, une zone de
texte, une case à cocher,
une case d'option, un
contrôle de sélection
de fichier et un contrôle
masqué.

select Crée un menu de sélection <select size="3"


avec au moins une option. name="OptionList">
<option selected
value="Option1">
Option 1</option>
<option value="Option2">
Option 2</option>
<option value="Option3">
Option 3</option>
</select>

title Spécifie le titre de la page. <title>Login Page</title>


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'un formulaire Web Microsoft® ASP.NET 3-19

Contrôles serveur Web


Les contrôles serveur Web incluent les contrôles de type de formulaire, tels que
des boutons, des listes et des zones de texte, et les contrôles à fonctionnalité
spécifique, tels que des calendriers. Ils sont plus abstraits que les contrôles serveur
HTML. Puisque le modèle d'objet ne reflète pas forcément la syntaxe HTML, les
contrôles serveur Web sont plus flexibles et performants que les contrôles serveur
HTML.
Les contrôles serveur Web sont des contrôles serveur créés spécifiquement pour
ASP.NET. Contrairement aux contrôles serveur HTML, ils ne fonctionneront pas
si l'attribut runat="server" est manquant.
Étant donné que les contrôles serveur Web sont basés sur un modèle d'objet commun,
tous les contrôles partagent plusieurs attributs, dont asp:ControlType et un attribut id.
Les contrôles serveur Web existent dans l'espace de noms System.Web.UI.WebControls
et vous pouvez les utiliser dans tout formulaire Web.

Contrôles serveur Web standard


Il existe deux groupes différents de contrôles standard : les contrôles intrinsèques
et les contrôles complexes.
• Contrôles intrinsèques. Les contrôles intrinsèques correspondent aux éléments
HTML simples, tels que les boutons, les listes et les zones de texte. Vous
utilisez ces contrôles de la même façon que les contrôles serveur HTML.
• Contrôles complexes. Les contrôles complexes peuvent fonctionner avec des
données statiques et dynamiques, agir en tant que conteneurs pour d'autres
contrôles ou inclure plusieurs fonctions. À titre d'exemple, le contrôle Calendar
est un contrôle complexe ; il fournit un calendrier de rendez-vous permettant à
l'utilisateur de sélectionner une date au format correct.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
3-20 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Les contrôles serveur Web standard intrinsèques correspondent aux éléments


HTML simples. Le tableau suivant décrit quelques-uns des contrôles serveur
Web intrinsèques les plus fréquemment utilisés.

Fonction du contrôle
Contrôle serveur Web Contrôle HTML équivalent serveur Web
<asp:Button... /> <input type="submit" /> Crée un bouton
permettant d'envoyer
une requête au serveur.

<asp:CheckBox... /> <input type="checkbox"> Crée une case à cocher


pouvant être activée par
l'utilisateur.

<asp:HyperLink... /> <a href="…" /> Crée un lien hypertexte


vers une balise d'ancrage
HTML.

<asp:Image... /> <img src="…" /> Crée une image.

<asp:ImageButton... /> <input type="image" /> Crée un bouton qui


contient une image
à la place d'un texte.

<asp:Label... /> <span> </span> Crée un texte que les


utilisateurs ne peuvent
pas modifier.

<asp:ListBox... /> <select size="5"> Crée la liste des choix


</select> et active les sélections
multiples.

<asp:Panel... /> <div> </div> Crée une division sans


bordure sur le formulaire
servant de conteneur aux
autres contrôles.

<asp:RadioButton... /> <input type="radio"> Crée un contrôle de case


d'option unique.

<asp:Table... /> <table> </table> Crée une table.

<asp:TextBox... /> <input type="text" /> Crée un contrôle de zone


de texte.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'un formulaire Web Microsoft® ASP.NET 3-21

Les contrôles standard complexes insèrent des fonctions élaborées dans votre
formulaire Web. Le tableau suivant décrit quelques-uns de ces contrôles complexes.

Contrôle Fonction

AdRotator Affiche une séquence prédéfinie ou aléatoire d'images.

Calendar Affiche un calendrier graphique dans lequel les utilisateurs peuvent


sélectionner des dates.

FileUpload Permet aux utilisateurs de télécharger un fichier à partir du serveur.

Wizard Fournit la navigation et une interface utilisateur pour collecter des


données associées en plusieurs étapes.

Contrôles de données
Il existe deux groupes différents de contrôles de données : les contrôles liés aux
données et les contrôles de source de données.
• Contrôles liés aux données. Les contrôles liés aux données permettent
d'afficher les données à partir d'une source de données.
• Contrôles de source de données. Les contrôles de source de données sont
utilisés en tant que contrôle intermédiaire entre une source de donnée (par
exemple, une base de données ou un fichier XML) et un ou plusieurs contrôles
de données.

Remarque : pour plus d'informations sur les contrôles de données, consultez le


module 8, « Gestion des données dans une application Web Microsoft ASP.NET 4.0 ».
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
3-22 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Le tableau suivant décrit quelques-uns des contrôles liés aux données les plus
courants.

Contrôle Fonction

Chart Permet de créer des pages ASP.NET avec des graphiques


simples, intuitifs et visuellement convaincants pour des
analyses statistiques ou financières complexes.

DataList Affiche des lignes d'informations de base de données dans un


format personnalisable.

DetailsView Affiche une seule ligne de données issue d'une source de


données sous forme de tableau, où chaque champ de ligne
apparaît comme une ligne indépendante.

FormView Affiche une seule ligne de données issue d'une source de données
en utilisant une disposition définie par un modèle.

GridView Affiche les données tabulaires dans une grille.

ListView Affiche les données dans un format que vous définissez


à l'aide de modèles et de styles. Prend en charge
implicitement les opérations de modification, d'insertion et de
suppression, en plus de la fonctionnalité de tri et de
pagination. C'est également le cas si le contrôle n'est lié à
aucune source de données.

QueryExtender Permet de créer des filtres pour les données extraites à partir
d'une source de données. Ce contrôle peut être utilisé pour
filtrer les données dans le balisage d'une page Web, à l'aide
d'une syntaxe déclarative.

Repeater Affiche les informations issues d'un groupe de données en


utilisant un ensemble d'éléments et de contrôles HTML que
vous spécifiez. Le contrôle Repeater répète l'élément une fois
pour chaque enregistrement du groupe de données.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'un formulaire Web Microsoft® ASP.NET 3-23

Le tableau suivant décrit quelques-uns des contrôles de source de données les plus
fréquemment utilisés.

Contrôle Fonction

AccessDataSource Établit une connexion aux données à partir d'une base de


données Microsoft Access® pour une utilisation avec des
contrôles liés aux données.

EntityDataSource Représente un modèle Entity Data Model (EDM) dans les


contrôles liés aux données d'une application ASP.NET.

LinqDataSource Établit une connexion aux données à partir d'une base de


données ou d'une collecte de données en mémoire (telle
qu'un tableau), et expose la requête LINQ (Language
Integrated Query) aux développeurs Web.

SiteMapDataSource Expose les données de navigation extraites à partir d'un


fournisseur de plan de site.

SqlDataSource Établit une connexion aux données situées dans une base
de données relationnelle, telle que Microsoft SQL Server®.

XmlDataSource Établit une connexion aux données au format XML,


hiérarchique ou tabulaire.

Remarque : pour plus d'informations sur LINQ, consultez le module 9, « Gestion des
tâches d'accès aux données à l'aide de LINQ ».

Contrôles de validation
Les contrôles de validation sont des contrôles masqués validant l'entrée utilisateur
conformément aux modèles prédéterminés. Si l'entrée utilisateur n'est pas conforme
aux exigences, un message d'erreur apparaît.
Les contrôles de validation incorporent une logique vous permettant de tester
l'entrée utilisateur. Pour ce faire, vous pouvez associer un contrôle de validation
au contrôle d'entrée et indiquer les conditions déterminant la validité d'une entrée
utilisateur.

Remarque : pour plus d'informations sur les contrôles de validation, consultez le


module 6, « Validation des entrées utilisateur ».
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
3-24 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Le tableau suivant décrit les contrôles de validation.

Contrôle Fonction

CompareValidator Requiert que l'entrée corresponde à une seconde


entrée ou à un champ existant.

CustomValidator Requiert que l'entrée corresponde à une condition,


telle que des nombres premiers ou impairs.

RangeValidator Requiert que l'entrée soit comprise dans une plage


donnée.

RegularExpressionValidator Requiert que l'entrée corresponde au format


spécifié, tel un numéro de téléphone américain,
ou à un mot de passe fort contenant des chiffres
et des lettres.

RequiredFieldValidator Requiert que l'utilisateur indique des valeurs avant le


traitement du contrôle.

ValidationSummary Collecte tous les messages d'erreur liés aux contrôles


de validation pour un affichage centralisé.

Contrôles de connexion
Les contrôles de connexion fonctionnent ensemble pour offrir une solution de
connexion fiable exigeant très peu de code.

Remarque : pour plus d'informations sur les contrôles de connexion, consultez le


module 15, « Sécurisation d'une application Web Microsoft ASP.NET ».
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'un formulaire Web Microsoft® ASP.NET 3-25

Le tableau suivant décrit les contrôles de connexion.

Contrôle Fonction

ChangePassword Permet aux utilisateurs de modifier le mot de passe du site


Web.

CreateUserWizard Ajoute un nouvel utilisateur au site Web.

Login Affiche une interface utilisateur en vue de l'authentification


utilisateur, y compris les zones de texte du nom et du mot
de passe, et un bouton Connexion.

LoginName Affiche le nom de connexion d'un utilisateur, si ce dernier est


connecté.

LoginStatus Affiche un lien de connexion pour les utilisateurs souhaitant


ouvrir une session et un lien de déconnexion pour ceux déjà
connectés.

LoginView Affiche des informations différentes pour les utilisateurs


anonymes et ceux déjà connectés.

PasswordRecovery Permet d'extraire les mots de passe utilisateur.

Contrôles de navigation
Les contrôles de navigation permettent de créer des aides à la navigation sur les
pages Web ASP.NET, notamment des menus et des chemins de navigation. Le
tableau suivant décrit les contrôles de navigation.

Contrôle Fonction
Menu Prend en charge l'affichage d'un menu principal et de
sous-menus, et permet également de définir des menus
dynamiques.

SiteMapPath Affiche un chemin de navigation indiquant l'emplacement de


la page active.

TreeView Affiche les données hiérarchiques dans une arborescence.


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
3-26 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Exemple de contrôles équivalents


L'exemple suivant affiche le code HTML pour trois contrôles Button : un bouton
HTML, un bouton de contrôle serveur HTML et un bouton de contrôle serveur
Web. Tous les contrôles Button ont une apparence identique dans le navigateur
de l'utilisateur. Le bouton HTML génère uniquement les événements côté client,
tandis que le bouton de contrôle serveur HTML et le bouton de contrôle serveur
Web génèrent les événements côté serveur.
L'exemple suivant illustre un contrôle Button HTML.

<input type="button" value="HTML Button" />

Lorsque vous ajoutez l'attribut runat="server", le contrôle Button HTML précédent


devient un contrôle serveur HTML qui sera exécuté sur le serveur. Notez qu'en
plus de l'attribut runat="server", vous devez ajouter un attribut id pour que le
contrôle fonctionne comme un contrôle serveur.
L'exemple suivant illustre un bouton de contrôle serveur HTML.

<input type="button" value="HTML Server Control" id="Button1"


runat="server" />

L'exemple suivant illustre un bouton de contrôle serveur Web.

<asp:Button id="Button1" runat="server" Text="Web control" />

Question : quels types de contrôles serveur existent pour ASP.NET ?


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
C
Création d'un formulaire Web
W Microsoft® ASP.NET 3-27

Enreg
gistrement de l'état d'afffichage

Points clés
L'une des difficultés des sites Web résidee dans l'enregistreement de l'état dees
contrôlees (paramètres ett entrée utilisateuur) pendant les allers-retours du coode
HTML entre
e le client et lle serveur. Pour toutes
t les technollogies HTTP, les
formulaaires Web sont saans état par naturre, ce qui signifie que le serveur nee
conservve aucune information entre les reequêtes clients.
Web Fo orms ASP.NET en nregistre l'état dess contrôles en ajo
outant le contrôlee
masquéé __VIEWSTATE,, qui enregistre l'éétat des contrôless sur le formulaire Web.
Plus parrticulièrement, W
Web Forms ajoutee __VIEWSTATE à l'élément de forrmulaire
côté serrveur et enregistree l'état des contrô
ôles uniquement dans cette section. Au fur
et à messure que la page ttransite entre le client
c et le server,, l'état du contrôle serveur
est consservé avec la pagee et peut être mis à jour à l'extrémitté du client ou du u serveur
de la traansaction.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
3-28 Introduction au développement Web avec Microsoft® Visual Studio® 2010

L'état d'affichage est la méthode utilisée par l'infrastructure de page ASP.NET pour
préserver les valeurs de page et de contrôle entre les allers-retours. Lorsque le balisage
HTML de la page est affiché, l'état actuel de la page et les valeurs devant être conservées
lors de la publication sont sérialisés en chaînes codées en base 64. Ces valeurs sont
ensuite entrées dans le champ masqué d'état d'affichage. Grâce à ce processus, les
contrôles serveur conservent automatiquement leurs valeurs entre les allers-retours
plus facilement, sans codage. L'état d'affichage n'est utile que dans le même
formulaire Web, au fur et à mesure qu'il transite entre le client et le serveur. Vous ne
pouvez pas utiliser l'état d'affichage entre différents formulaires Web. L'état d'affichage
diminue la charge du serveur, mais les performances peuvent être affectées par la taille
croissante du code HTML. Autrement dit, l'affichage de la page nécessite plus de temps
sur le client.
L'état de la page Web étant conservé dans le formulaire du serveur, la page Web
peut être routée de façon aléatoire dans une batterie de serveurs Web et ne doit
pas toujours revenir au même serveur. L'avantage du processus d'état d'affichage
est que le programmeur peut se concentrer sur la conception de la page ; il n'a pas
besoin de générer une infrastructure pour suivre l'état de la page.
Vous pouvez utiliser l'état d'affichage pour conserver les données d'application
propres à une seule page, y compris l'ID de produit ou l'ID d'utilisateur. Vous
pouvez également l'utiliser dans d'autres circonstances, par exemple pour des
raisons statistiques, lorsque vous souhaitez connaître le nombre de fois qu'un
utilisateur publie la même page en séquence sur le serveur.

Désactivation et activation de l'état d'affichage (ViewState)


Par défaut, un formulaire Web enregistre l'état d'affichage des contrôles sur le
formulaire Web. Toutefois, pour les formulaires Web dotés de plusieurs contrôles,
la taille du champ de valeur de propriétés __VIEWSTATE peut ralentir les
performances. Pour optimiser les performances de la page, vous voudrez peut-être
désactiver l'attribut __VIEWSTATE au niveau de la page et activer l'état d'affichage
pour les contrôles sélectionnés uniquement.
Pour désactiver l'état d'affichage au niveau de la page Web, définissez l'attribut
EnableViewState de la directive Page sur False. Le code suivant illustre cette
opération.

<%@ Page EnableViewState="false" %>


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'un formulaire Web Microsoft® ASP.NET 3-29

Pour désactiver l'état d'affichage d'un contrôle spécifique, définissez l'attribut


EnableViewState de ce contrôle sur False. Le code suivant illustre cette opération.
N'oubliez pas que si l'attribut EnableViewState de la directive Page est défini sur
False, vous ne pouvez pas passer outre pour un contrôle individuel sur cette page.

<asp:ListBox id="ListBox1" EnableViewState="false" runat="server" />

Vous pouvez également utiliser la propriété ViewStateMode pour l'activation de


l'état d'affichage des contrôles individuels, comme lorsque l'état d'affichage est
désactivé pour une page.

<%@ Page ViewStateMode="Disabled" %>


...
<asp:ListBox id="ListBox1" " runat="server" ViewStateMode="Enabled" />

Vous pouvez utiliser la propriété ViewStateMode pour activer l'état d'affichage


d'un contrôle individuel, même s'il est désactivé pour la page (comme indiqué
dans l'exemple de code ci-dessus), ou pour désactiver l'état d'affichage d'un
contrôle individuel lorsqu'il est activé pour la page.
La propriété ViewStateMode peut être définie sur l'une des valeurs suivantes :

Valeur Description

Inherit Hérite de la valeur de la propriété ViewStateMode de la page ou du


contrôle parent.

Enabled Active l'état d'affichage de ce contrôle même s'il est désactivé pour le
contrôle parent.

Disabled Désactive l'état d'affichage de ce contrôle même s'il est activé pour le
contrôle parent.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
3-30 Introduction au développement Web avec Microsoft® Visual Studio® 2010

État de contrôle
L'état de contrôle ASP.NET vous permet de stocker des informations propres au
contrôle et ne peut pas être désactivé.
Les contrôles peuvent disposer à la fois de l'état d'affichage et de l'état de contrôle.
Vous utilisez l'état d'affichage pour gérer le contenu du contrôle et l'état de contrôle
pour gérer le comportement principal du contrôle. Pour les contrôles qui relancent
le remplissage de leur contenu chaque fois que l'utilisateur demande une page (par
exemple, un contrôle affichant une grille de données), vous pouvez désactiver l'état
d'affichage, mais pas l'état de contrôle.

Contrôle HiddenField
Vous pouvez utiliser le contrôle serveur Web HiddenField comme méthode
supplémentaire pour stocker une valeur à rendre persistante dans les publications
sur le serveur. Vous utilisez la propriété Value pour spécifier la valeur du contrôle
et créer un gestionnaire d'événements pour l'événement ValueChanged. Cet
événement est appelé chaque fois que la valeur du contrôle est modifiée entre deux
publications sur le serveur. Le code suivant montre comment déclarer un contrôle
HiddenField avec la valeur 1.

<asp:HiddenField id="HiddenField1" runat="server" value="1"/>


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
C
Création d'un formulaire Web
W Microsoft® ASP.NET 3-31

Ajoutt et configura
ation de con
ntrôles serveur HTML

Points clés
Les conntrôles HTML d'uun formulaire Web ne sont pas dissponibles sur le serveur.
Lorsquee vous convertisssez les contrôles HTML
H en contrôlles serveur HTML L, vous
pouvez les exposer en taant qu'éléments dans
d votre code côté
c serveur. Cettee
converssion vous permet d'utiliser les con
ntrôles pour décleencher des événem ments
gérés su
ur le serveur.
Les con
ntrôles serveur HT
TML incluent l'atttribut runat="serrver" et doivent résider
r
dans un
n élément FORM conteneur.
Grâce aux contrôles servveur HTML, vouss pouvez mettre à jour rapidement les
pages ex xistantes sur les fformulaires Web. En outre, vous pouvez
p optimiserr les
performmances d'une page en déterminantt et en adaptant lees contrôles de so orte
qu'ils fo
onctionnent localement sur le navigateur, tout en étant
é traités sur lee serveur.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
3-32 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Exemple de contrôle serveur HTML


Vous pouvez utiliser l'opération de glisser-déplacer pour faire passer des éléments
HTML de l'onglet HTML de la boîte à outils vers le formulaire Web. Vous pouvez
ensuite configurer les contrôles en définissant les propriétés dans la fenêtre Propriétés.
L'exemple suivant illustre le code d'un contrôle de zone de texte HTML simple
traité par le navigateur côté client.

<input id="Text1" type="text" />

Le code suivant est généré lorsque vous utilisez l'opération de glisser-déplacer pour
faire passer le contrôle de la boîte à outils vers le formulaire Web.

<input id="Text1" type="text" />

Lorsque vous ajoutez l'attribut runat="server", l'élément est converti en contrôle


serveur HTML, traité côté serveur par ASP.NET.

<input id="Text1" type="text" runat="server" />

Question : quelles sont les fonctionnalités offertes par les contrôles serveur HTML ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
C
Création d'un formulaire Web
W Microsoft® ASP.NET 3-33

Ajoutt et configura
ation de con
ntrôles serveur Web

Ajout et
e configuration
n de contrôles serveur Web
Pour ajo
outer et configureer des contrôles serveur
s Web, vou
us devez effectuerr les
étapes suivantes
s :
1. Ouvvrez Visual Stud
dio 2010 et, dans le menu Fichier, cliquez sur Nou
uveau
sitee Web.
2. Dan
ns le volet de gau
uche, cliquez sur Visual
V Basic.
3. Dan
ns le volet centrall, cliquez sur Sitee Web ASP.NET vide.
v
4. Dan
ns la liste Emplaccement Web, cliq
quez sur Systèmee de fichiers. Dan
ns la
zon
ne de texte, entrezz C:\WebSite1\S
SampleWebSite, puis cliquez sur OK.
5. Dan ns l'Explorateur d
de solutions, cliqu
uez avec le bouto
on droit sur le pro
ojet de
sitee Web SampleWeebSite, puis cliqu uez sur Ajouter un nouvel élémen nt.
6. Danns la boîte de diallogue Ajouter un
n nouvel élément, dans le panneaau du
milieu, cliquez sur W
Web Form. Dans la zone Nom, en ntrez Default.asppx, puis
quez sur Ajouter.
cliq
7. Dan
ns la fenêtre Defaault.aspx, cliquez sur Création.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
3-34 Introduction au développement Web avec Microsoft® Visual Studio® 2010

8. Dans la fenêtre Default.aspx, cliquez sur Boîte à outils.


9. Dans la boîte à outils, développez Standard, puis double-cliquez sur le
contrôle TextBox.
10. Dand la fenêtre Propriétés, changez la valeur de la propriété (ID) en
SampleTextBox et la valeur de la propriété Text en Sample.
11. Dans la boîte à outils, développez Standard, puis double-cliquez sur le
contrôle Calendar.
12. Dans la fenêtre Propriétés, changez la valeur de la propriété (ID) en
SampleCalendar.

Une fois affiché dans le client, le contrôle TextBox ressemble à l'exemple de code
suivant.

<input name="SampleTextBox" type="text" value="Sample"


id="SampleTextBox" />

Le code ci-dessus est un exemple de conversion directe d'un contrôle serveur


TextBox en élément HTML INPUT de type text.

Question : quelles sont les fonctionnalités supplémentaires offertes par les


contrôles serveur Web ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
C
Création d'un formulaire Web
W Microsoft® ASP.NET 3-35

Discussion : choixx du contrôle


e serveur app
proprié

Points clés
Lorsquee vous créez des ppages ASP.NET, vous
v pouvez utiliiser les éléments HTML,
les conttrôles serveur HT
TML ou les contrô ôles serveur Webb. Il est possible de
d
combinner différents typees de contrôles su
ur la même page pour
p mettre à jou
ur
rapidemment une page HT TML.
À titre d'exemple
d pour l'u
utilisation simultaanée de plusieurs types de contrôlees, votre
page AS SP.NET peut inclu ure un élément d'éétendue HTML (sspan) répertorian nt l'heure
locale, un
u bouton de con ntrôle serveur HT TML converti à paartir d'un élémennt HTML
et une zone
z de texte de ccontrôle serveur Web
W accédant au ux données du seerveur.
Toutefois, la meilleure prratique consiste à éviter les contrôlles serveur HTML
L. Les
contrôlees serveur Web sont plus perform mants et possèden nt un modèle d'ob bjet plus
riche quue les contrôles serveur HTML.

Contrô
ôles serveur HT
TML
Même s'il
s est recomman ndé d'éviter les contrôles serveur HTML
H et de privillégier
les conttrôles serveur Weeb, les contrôles serveur
s HTML do oivent parfois êtree utilisés.
Les conntrôles serveur HT TML sont des élééments HTML mo odifiés qui sont exécutés
e
sur le seerveur, et non dan
ns le navigateur client.
c
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
3-36 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Vous devez utiliser les contrôles serveur HTML dans les situations suivantes :
• Vous préférez un modèle d'objet HTML. Le code HTML des contrôles serveur
HTML est presque le même que celui des contrôles HTML de base.
• Vous souhaitez utiliser des pages HTML existantes et ajouter la fonctionnalité
de formulaire Web rapidement. Puisque les contrôles serveur HTML
correspondent exactement aux éléments HTML, vous n'avez pas besoin de
remplacer les contrôles, éliminant ainsi les risques d'erreur de substitution
ou les problèmes de formatage de page.
• La bande passante est limitée et vous devez effectuer un grand nombre de
traitements côté client afin de réduire son utilisation.

Contrôles serveur Web


Les contrôles serveur Web ASP.NET ressemblent aux contrôles HTML. En outre,
ils incluent un certain nombre de nouveaux contrôles qui n'existent pas encore en
HTML.
Vous devez utiliser les contrôles serveur Web dans les situations suivantes :
• Vous préférez un modèle de programmation orienté objet. Vous pouvez
utiliser la programmation orientée objet, identifier les contrôles par leur
attribut ID et séparer facilement la logique de page de l'interface utilisateur.
En utilisant les contrôles serveur Web, vous pouvez également créer des
applications avec des contrôles imbriqués et intercepter les événements au
niveau du conteneur.
• Vous devez créer un page Web pouvant être affichée via différents navigateurs.
La logique dans les contrôles serveur Web est capable de créer un code HTML
destiné aux fonctionnalités disponibles dans le navigateur du client. Vous
pouvez écrire le code pour les navigateurs les plus récents sans vous préoccuper
des erreurs de navigateur qui pourraient empêcher les utilisateurs ne disposant
pas des dernières versions de navigateur d'accéder à toutes les fonctions de la
page Web.
• Vous avez besoin d'une fonctionnalité spécifique, comme un calendrier ou une
annonce, disponible uniquement en tant que contrôle serveur Web.
• Votre bande passante n'est pas limitée et les cycles de demande-réponse des
contrôles serveur Web n'entraîneront pas de problème de bande passante.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
C
Création d'un formulaire Web
W Microsoft® ASP.NET 3-37

Atelier pratique
p : Création
n d'un forrmulaire Web
W
Microsofft ASP.NEET

Remarq que : dans cet ateliier pratique, vous pouvez


p exécuter lees tâches en utilisa
ant le
langage de programmatio on Visual Basic ou Visual
V C#. Si vous utilisez Visual Basiic comme
langage de programmatio on, reportez-vous aux ournies dans la section 1 de
a instructions fo
la page ded l'atelier pratiqu
ue correspondant. Si vous utilisez Vissual C# comme lan ngage de
program mmation, reportez--vous aux instructions fournies dans la section 2 de la page de
l'atelier pratique
p correspon ndant.

Introdu
uction
Dans ceet atelier pratiquee, vous ajouterez d'abord
d un formuulaire Web à unee
applicattion Web ASP.NE ET, puis des contrrôles serveur au formulaire
f Web ete
configurerez enfin ses prropriétés.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
3-38 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Objectifs
Au terme de cet atelier pratique, vous serez à même d'effectuer les tâches suivantes :
• créer un formulaire Web ;
• appliquer une feuille de style au formulaire Web ;
• créer une disposition de type tableau dans le formulaire Web ;
• ajouter un contrôle serveur au formulaire Web et en configurer les propriétés ;
• appliquer des styles aux contrôles serveur et éléments HTML.

Configuration de l'atelier pratique


Pour cet atelier pratique, vous utiliserez l'environnement d'ordinateurs virtuels
disponible. Avant de commencer l'atelier pratique, vous devez :
• Démarrer l'ordinateur virtuel 10557A-GEN-DEV, puis vous connecter à l'aide
des informations d'identification suivantes :

• Nom d'utilisateur : Stagiaire

• Mot de passe : Pa$$w0rd


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
C
Création d'un formulaire Web
W Microsoft® ASP.NET 3-39

Scéna
ario de l'ateliier pratique

Vous êtes développeur cchez Contoso, Ltd d, une grande enttreprise disposan
nt d'une
base de clients mondialee. Votre entreprise utilise des appllications Microsoft .NET
pour crééer, personnaliseer et gérer ses info
ormations client. Votre organisatio
on a créé
un site Web
W pour gérer lles données et serrvices clients dan ns ASP.NET.
Contosoo, Ltd souhaite créer une applicatio on permettant de gérer et mettre à jour ses
informaations clients. Vou
us devez personnaaliser l'application n de façon à réponndre aux
besoins spécifiques de l'ééquipe de vente. La
L mise à jour dess informations clieents est
un proccessus continu pour l'équipe de ven nte, et l'applicatio
on requiert des miises à
jour en fonction des commmentaires des dééveloppeurs princcipaux et autres parties
prenanttes. Vous devez géénérer une interfacce utilisateur réponndant aux besoins définis.
Vous deevez créer une ap pplication et généérer une interface utilisateur facile à mettre
à jour et à modifier, à l'aiide des contrôless serveur ASP.NETT.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
3-40 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Section 1 : Visual Basic


Exercice 1 : Création d'un formulaire Web
Dans cet exercice, les tâches principales sont les suivantes :
1. Ouvrir un site Web ASP.NET existant.

2. Ajouter un formulaire Web au site Web.

f Tâche 1 : ouvrir un site Web ASP.NET existant


• Ouvrez une session sur 10557A-GEN-DEV en tant que Stagiaire avec le mot
de passe Pa$$w0rd.
• Ouvrez Visual Studio 2010.
• Ouvrez la solution CustomerManagement située dans le dossier
D:\Labfiles\Starter\M3\VB .

f Tâche 2 : ajouter un formulaire Web au site Web


• Ajoutez le formulaire Web InsertCustomer.aspx au site Web
CustomerManagement, à partir de la boîte de dialogue Ajouter
un nouvel élément.

Résultats : Au terme de cet exercice, vous aurez ouvert le site Web


CustomerManagement existant et ajouté le formulaire Web InsertCustomer.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'un formulaire Web Microsoft® ASP.NET 3-41

Exercice 2 : Ajout et configuration de contrôles serveur


dans un formulaire Web
Dans cet exercice, les tâches principales sont les suivantes :
1. Ajouter une feuille de style existante au formulaire Web.
2. créer une disposition de type tableau dans le formulaire Web ;
3. Ajouter des contrôles serveur au formulaire Web et en configurer les
propriétés de base.
4. Définir des propriétés de contrôle complexes.
5. Appliquer un style prédéfini au formulaire Web.

Remarque : Dans cet exercice, vous créerez un tableau à deux colonnes à l'aide d'une
feuille de style en cascade (CSS). Celle-ci devra contenir différents contrôles relatifs à
l'affichage et à la gestion des données clients.

f Tâche 1 : ajouter une feuille de style existante au formulaire Web


• Référencez le fichier Styles/Site.css dans le formulaire Web InsertCustomer,
par rapport au dossier racine, via la fenêtre Gérer les styles.
• Appuyez sur les touches CTRL+S pour enregistrer InsertCustomer.aspx.
• Affichez les styles ajoutés dans la feuille de style à l'aide de la fenêtre Gérer les
styles.

f Tâche 2 : créer une disposition de type tableau dans le formulaire Web


• Dans la fenêtre InsertCustomer.aspx, placez le curseur entre les balises div
d'ouverture et de fermeture.
• Ajoutez un nouvel élément div de la boîte à outils à l'élément div existant.

<div>
<div>
</div>
</div>
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
3-42 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Ajoutez deux nouveaux éléments div de la boîte à outils à l'élément div


récemment ajouté.

<div>
<div>
<div>
</div>
<div>
</div>
</div>
</div>

• Enregistrez les modifications apportées au formulaire Web InsertCustomer.


• Utilisez la fenêtre Appliquer les styles pour appliquer le style customerTable à
l'élément div le plus éloigné. Appliquez div.customerTable à partir de la
section Sélecteurs contextuels de la fenêtre Appliquer.
• Cliquez sur la balise d'ouverture de l'élément div, qui est un élément enfant de
l'élément div avec une valeur d'attribut class de customerTable.
• Créez un style dans la fenêtre Appliquer les styles à l'aide du bouton Nouveau
style.
• Nommez le nouveau style div.customerTableRow en utilisant la zone
Sélecteur de la boîte de dialogue Nouveau style.
• Appliquez le style à la sélection de document active à l'aide de la case à cocher
Appliquer un nouveau style à la sélection de document.
• Définissez le nouveau style dans le fichier CSS Styles/Site.css existant.
• Définissez la disposition du nouveau style sur table-row en utilisant la liste
d'affichage de la catégorie Disposition, puis fermez la boîte de dialogue
Nouveau style.
• Utilisez la fenêtre Appliquer les styles pour appliquer le style customerTableLeftCol
au premier élément div enfant de l'élément div avec une valeur d'attribut class
de customerTableRow.
• Utilisez la fenêtre Appliquer les styles pour appliquer le style customerTableRightCol
au deuxième élément div enfant de l'élément div avec une valeur d'attribut
class de customerTableRow.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'un formulaire Web Microsoft® ASP.NET 3-43

• Ajoutez 11 lignes supplémentaires en copiant l'élément div existant avec une


valeur d'attribut class de customerTableRow.

<div class="customerTableRow">
<div class="customerTableLeftCol">
</div>
<div class="customerTableRightCol">
</div>
</div>

• Ajoutez un nouvel élément div de la boîte à outils à l'élément div avec une valeur
d'attribut class de customerTable. Placez le nouvel élément div immédiatement
avant la balise div de fermeture de l'élément div customerTable.

<div class="customerTable">
<div class="customerTableRow">
<div class="customerTableLeftCol">
</div>
<div class="customerTableRightCol">
</div>
</div>
...
<div>
</div>
</div>

• Affichez le formulaire Web InsertCustomer en mode Création.

Remarque : Notez que deux colonnes de taille identique sont ajoutées à l'élément div.

• Affichez le formulaire Web InsertCustomer en mode Source.


• Utilisez la fenêtre Appliquer les styles pour appliquer le style customerTableFooter
au dernier élément div enfant de l'élément div avec une valeur d'attribut class
de customerTable.
• Enregistrez les modifications apportées au formulaire Web InsertCustomer
et au fichier Site.css.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
3-44 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Dans la fenêtre CustomerManagement — Microsoft Visual Studio


(Administrateur), dans le menu Fichier, cliquez sur Enregistrer tout.
• Affichez le formulaire Web InsertCustomer dans un navigateur Web.

Remarque : Bien que vous ayez ajouté des styles au formulaire Web via le fichier CSS,
aucun changement n'apparaît. Cela est dû au fait que les éléments div sont vides.

f Tâche 3 : ajouter des contrôles serveur au formulaire Web et en


configurer les propriétés de base
• Affichez le formulaire Web InsertCustomer en mode Création.
• Ajoutez le contrôle Label de la boîte à outils à la première cellule de la
colonne de gauche dans l'élément div. Changez la propriété (ID) en
CustomerFirstNameLabel, puis définissez la propriété Text sur First Name.
• Ajoutez le contrôle TextBox de la boîte à outils à la première cellule de la
colonne de droite dans l'élément div. Changez ensuite la propriété (ID) en
CustomerFirstNameTextBox.
• Ajoutez le contrôle Label de la Boîte à outils à la deuxième cellule de la
colonne de gauche dans l'élément div. Changez la propriété (ID) en
CustomerLastNameLabel, puis définissez la propriété Text sur Last Name.
• Ajoutez le contrôle TextBox de la Boîte à outils à la deuxième cellule de la
colonne de droite dans l'élément div. Changez ensuite la propriété (ID) en
CustomerLastNameTextBox.
• Ajoutez le contrôle Label de la Boîte à outils à la troisième cellule de la
colonne de gauche dans l'élément div. Changez la propriété (ID) en
CustomerAddressLabel, puis définissez la propriété Text sur Address.
• Ajoutez le contrôle TextBox de la Boîte à outils à la troisième cellule de la
colonne de droite dans l'élément div. Changez ensuite la propriété (ID) en
CustomerAddressTextBox.
• Ajoutez le contrôle Label de la Boîte à outils à la quatrième cellule de la
colonne de gauche dans l'élément div. Changez la propriété (ID) en
CustomerZipCodeLabel, puis définissez la propriété Text sur Zip Code.
• Ajoutez le contrôle TextBox de la Boîte à outils à la quatrième cellule de la
colonne de droite dans l'élément div. Changez ensuite la propriété (ID) en
CustomerZipCodeTextBox.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'un formulaire Web Microsoft® ASP.NET 3-45

• Ajoutez le contrôle Label de la Boîte à outils à la cinquième cellule de la


colonne de gauche dans l'élément div. Changez la propriété (ID) en
CustomerCityLabel, puis définissez la propriété Text sur City.
• Ajoutez le contrôle TextBox de la Boîte à outils à la cinquième cellule de la
colonne de droite dans l'élément div. Changez ensuite la propriété (ID) en
CustomerCityTextBox.
• Ajoutez le contrôle Label de la Boîte à outils à la sixième cellule de la
colonne de gauche dans l'élément div. Changez la propriété (ID) en
CustomerStateLabel, puis définissez la propriété Text sur State.
• Ajoutez le contrôle TextBox de la Boîte à outils à la sixième cellule de la
colonne de droite dans l'élément div. Changez ensuite la propriété (ID)
en CustomerStateTextBox.
• Ajoutez le contrôle Label de la Boîte à outils à la septième cellule de la
colonne de gauche dans l'élément div. Changez la propriété (ID) en
CustomerCountryLabel, puis définissez la propriété Text sur Country.
• Ajoutez le contrôle DropDownList de la Boîte à outils à la septième cellule de
la colonne de droite dans l'élément div. Changez ensuite la propriété (ID) en
CustomerCountryDropDownList.
• Ajoutez le contrôle Label de la Boîte à outils à la huitième cellule de la
colonne de gauche dans l'élément div. Changez la propriété (ID) en
CustomerPhoneLabel, puis définissez la propriété Text sur Phone.
• Ajoutez le contrôle TextBox de la Boîte à outils à la huitième cellule de la
colonne de droite dans l'élément div. Changez ensuite la propriété (ID) en
CustomerPhoneTextBox.
• Ajoutez le contrôle Label de la Boîte à outils à la neuvième cellule de la
colonne de gauche dans l'élément div. Changez la propriété (ID) en
CustomerEmailAddressLabel, puis définissez la propriété Text sur Email
Address.
• Ajoutez le contrôle TextBox de la Boîte à outils à la neuvième cellule de la
colonne de droite dans l'élément div. Changez ensuite la propriété (ID) en
CustomerEmailAddressTextBox.
• Ajoutez le contrôle Label de la Boîte à outils à la dixième cellule de la
colonne de gauche dans l'élément div. Changez la propriété (ID) en
CustomerWebAddressLabel, puis définissez la propriété Text sur Web
Address.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
3-46 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Ajoutez le contrôle TextBox de la Boîte à outils à la dixième cellule de la


colonne de droite dans l'élément div. Changez ensuite la propriété (ID)
en CustomerWebAddressTextBox.
• Ajoutez le contrôle Label de la Boîte à outils à la onzième cellule de la
colonne de gauche dans l'élément div. Changez la propriété (ID) en
CustomerCreditLimitLabel, puis définissez la propriété Text sur Credit Limit.
• Ajoutez le contrôle TextBox de la Boîte à outils à la onzième cellule de la
colonne de droite dans l'élément div. Changez ensuite la propriété (ID) en
CustomerCreditLimitTextBox.
• Ajoutez le contrôle Label de la Boîte à outils à la douzième cellule de la
colonne de gauche dans l'élément div. Changez la propriété (ID) en
CustomerNewsSubscriberLabel, puis définissez la propriété Text sur
News Subscriber.
• Ajoutez le contrôle CheckBox de la Boîte à outils à la douzième cellule de la
colonne de droite dans l'élément div. Changez ensuite la propriété (ID) en
CustomerNewsSubscriberCheckBox.
• Enregistrez les modifications et affichez le formulaire Web InsertCustomer
dans un navigateur Web.
• Ajoutez le contrôle Button de la boîte à outils au pied de page du tableau
dans l'élément div. Changez la propriété (ID) en CustomerInsertButton
et définissez la propriété Text sur Insert.
• Ajoutez le contrôle Button de la Boîte à outils au pied de page du tableau
dans l'élément div. Changez la propriété (ID) en CustomerCancelButton
et définissez la propriété Text sur Cancel.
• Enregistrez les modifications et affichez le formulaire Web InsertCustomer
dans un navigateur Web.

f Tâche 4 : définir des propriétés de contrôle complexes


• Définissez la propriété MaxLength des contrôles CustomerFirstNameTextBox,
CustomerAddressTextBox et CustomerEmailAddressTextBox sur 50.
• Définissez la propriété MaxLength des contrôles CustomerLastNameTextBox,
CustomerCityTextBox, CustomerStateTextBox et CustomerPhoneTextBox
sur 30.
• Définissez la propriété MaxLength des contrôles CustomerZipCodeTextBox
et CustomerCreditLimitTextBox sur 10.
• Ouvrez le formulaire Web InsertCustomer en mode Source.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'un formulaire Web Microsoft® ASP.NET 3-47

• Définissez la propriété MaxLength du contrôle CustomerWebAddressTextBox


sur 80.
• Enregistrez les modifications et affichez le formulaire Web InsertCustomer
dans un navigateur Web.

f Tâche 5 : appliquer un style prédéfini au formulaire Web


• Appliquez le style de modèle prédéfini à l'élément body du formulaire Web
InsertCustomer.
• Enregistrez les modifications et affichez le formulaire Web InsertCustomer
dans un navigateur Web.

• Tâche 6 : désactiver l'ordinateur virtuel et annuler les modifications


• Désactivez l'ordinateur virtuel 10557A-GEN-DEV.
• Annulez les modifications apportées à l'ordinateur virtuel 10557A-GEN-DEV.

Résultats : au terme de cet exercice, vous aurez conçu la version initiale du


formulaire Web InsertCustomer de votre site Web.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
3-48 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Section 2 : Visual C#
Exercice 1 : Création d'un formulaire Web
Dans cet exercice, les tâches principales sont les suivantes :
1. Ouvrir un site Web ASP.NET existant.
2. Ajouter un formulaire Web au site Web.

f Tâche 1 : ouvrir un site Web ASP.NET existant


• Connectez-vous à l'ordinateur virtuel 10557A-GEN-DEV avec le nom
d'utilisateur Stagiaire et le mot de passe Pa$$w0rd.
• Ouvrez Visual Studio 2010.
• Ouvrez la solution CustomerManagement située dans le dossier
D:\Labfiles\Starter\M3\CS.

f Tâche 2 : ajouter un formulaire Web au site Web


• Ajoutez le formulaire Web InsertCustomer.aspx au site Web
CustomerManagement, à partir de la boîte de dialogue Ajouter
un nouvel élément.

Résultats : Au terme de cet exercice, vous aurez ouvert le site Web CustomerManagement
existant et ajouté le formulaire Web InsertCustomer.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'un formulaire Web Microsoft® ASP.NET 3-49

Exercice 2 : Ajout et configuration de contrôles serveur


dans un formulaire Web
Dans cet exercice, les tâches principales sont les suivantes :
1. Ajouter une feuille de style existante au formulaire Web.
2. créer une disposition de type tableau dans le formulaire Web ;
3. Ajouter des contrôles serveur au formulaire Web et en configurer les
propriétés de base.
4. Définir des propriétés de contrôle complexes.
5. Appliquer un style prédéfini au formulaire Web.

Remarque : Dans cet exercice, vous créerez un tableau à deux colonnes à l'aide d'une
feuille de style en cascade (CSS). Celle-ci devra contenir différents contrôles relatifs à
l'affichage et à la gestion des données clients.

f Tâche 1 : ajouter une feuille de style existante au formulaire Web


• Référencez le fichier Styles/Site.css dans le formulaire Web InsertCustomer,
par rapport au dossier racine, via la fenêtre Gérer les styles.
• Appuyez sur les touches CTRL+S pour enregistrer InsertCustomer.aspx.
• Affichez les styles ajoutés dans la feuille de style à l'aide de la fenêtre Gérer les
styles.

f Tâche 2 : créer une disposition de type tableau dans le formulaire Web


• Dans la fenêtre InsertCustomer.aspx, placez le curseur entre les balises div
d'ouverture et de fermeture.
• Ajoutez un nouvel élément div de la boîte à outils à l'élément div existant.

<div>
<div>
</div>
</div>
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
3-50 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Ajoutez deux nouveaux éléments div de la Boîte à outils à l'élément div


récemment ajouté.

<div>
<div>
<div>
</div>
<div>
</div>
</div>
</div>

• Enregistrez les modifications apportées au formulaire Web InsertCustomer.


• Utilisez la fenêtre Appliquer les styles pour appliquer le style customerTable
à l'élément div le plus éloigné. Appliquez div.customerTable à partir de la
section Sélecteurs contextuels de la fenêtre Appliquer.
• Cliquez sur la balise d'ouverture de l'élément div, qui est un élément enfant de
l'élément div avec une valeur d'attribut class de customerTable.
• Créez un style dans la fenêtre Appliquer les styles à l'aide du bouton Nouveau
style.
• Nommez le nouveau style div.customerTableRow en utilisant la zone
Sélecteur de la boîte de dialogue Nouveau style.
• Appliquez le style à la sélection de document active à l'aide de la case à cocher
Appliquer un nouveau style à la sélection de document.
• Définissez le nouveau style dans le fichier CSS Styles/Site.css existant.
• Définissez la disposition du nouveau style sur table-row en utilisant la liste
d'affichage de la catégorie Disposition, puis fermez la boîte de dialogue
Nouveau style.
• Utilisez la fenêtre Appliquer les styles pour appliquer le style customerTableLeftCol
au premier élément div enfant de l'élément div avec une valeur d'attribut class de
customerTableRow.
• Utilisez la fenêtre Appliquer les styles pour appliquer le style customerTableRightCol
au deuxième élément div enfant de l'élément div avec une valeur d'attribut class
de customerTableRow.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'un formulaire Web Microsoft® ASP.NET 3-51

• Ajoutez 11 lignes supplémentaires en copiant l'élément div existant avec une


valeur d'attribut class de customerTableRow.

<div class="customerTableRow">
<div class="customerTableLeftCol">
</div>
<div class="customerTableRightCol">
</div>
</div>

• Ajoutez un nouvel élément div de la Boîte à outils à l'élément div avec une valeur
d'attribut class de customerTable. Placez le nouvel élément div immédiatement
avant la balise div de fermeture de l'élément div customerTable.

<div class="customerTable">
<div class="customerTableRow">
<div class="customerTableLeftCol">
</div>
<div class="customerTableRightCol">
</div>
</div>
...
<div>
</div>
</div>

• Affichez le formulaire Web InsertCustomer en mode Création.

Remarque : Notez que deux colonnes de taille identique sont ajoutées à l'élément div.

• Affichez le formulaire Web InsertCustomer en mode Source.


• Utilisez la fenêtre Appliquer les styles pour appliquer le style
customerTableFooter au dernier élément div enfant de l'élément
div avec une valeur d'attribut class de customerTable.
• Enregistrez les modifications apportées au formulaire Web InsertCustomer et
à la feuille de style CSS Site.css.
• Affichez le formulaire Web InsertCustomer dans un navigateur Web.

Remarque : Bien que vous ayez ajouté des styles au formulaire Web via le fichier CSS,
aucun changement n'apparaît. Cela est dû au fait que les éléments div sont vides.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
3-52 Introduction au développement Web avec Microsoft® Visual Studio® 2010

f Tâche 3 : ajouter des contrôles serveur au formulaire Web et en


configurer les propriétés de base
• Affichez le formulaire Web InsertCustomer en mode Création.
• Ajoutez le contrôle Label de la Boîte à outils à la première cellule de la colonne de
gauche dans l'élément div. Changez la propriété (ID) en CustomerFirstNameLabel,
puis définissez la propriété Text sur First Name.
• Ajoutez le contrôle TextBox de la boîte à outils à la première cellule de la
colonne de droite dans l'élément div. Changez ensuite la propriété (ID) en
CustomerFirstNameTextBox.
• Ajoutez le contrôle Label de la Boîte à outils à la deuxième cellule de la
colonne de gauche dans l'élément div. Changez la propriété (ID) en
CustomerLastNameLabel, puis définissez la propriété Text sur Last Name.
• Ajoutez le contrôle TextBox de la Boîte à outils à la deuxième cellule de la
colonne de droite dans l'élément div. Changez ensuite la propriété (ID) en
CustomerLastNameTextBox.
• Ajoutez le contrôle Label de la Boîte à outils à la troisième cellule de la colonne
de gauche dans l'élément div. Changez la propriété (ID) en CustomerAddressLabel,
puis définissez la propriété Text sur Address.
• Ajoutez le contrôle TextBox de la Boîte à outils à la troisième cellule de la
colonne de droite dans l'élément div. Changez ensuite la propriété (ID) en
CustomerAddressTextBox.
• Ajoutez le contrôle Label de la Boîte à outils à la quatrième cellule de la
colonne de gauche dans l'élément div. Changez la propriété (ID) en
CustomerZipCodeLabel, puis définissez la propriété Text sur Zip Code.
• Ajoutez le contrôle TextBox de la Boîte à outils à la quatrième cellule de la
colonne de droite dans l'élément div. Changez ensuite la propriété (ID) en
CustomerZipCodeTextBox.
• Ajoutez le contrôle Label de la Boîte à outils à la cinquième cellule de la
colonne de gauche dans l'élément div. Changez la propriété (ID) en
CustomerCityLabel, puis définissez la propriété Text sur City.
• Ajoutez le contrôle TextBox de la Boîte à outils à la cinquième cellule de la
colonne de droite dans l'élément div. Changez ensuite la propriété (ID) en
CustomerCityTextBox.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'un formulaire Web Microsoft® ASP.NET 3-53

• Ajoutez le contrôle Label de la Boîte à outils à la sixième cellule de la colonne


de gauche dans l'élément div. Changez la propriété (ID) en CustomerStateLabel,
puis définissez la propriété Text sur State.
• Ajoutez le contrôle TextBox de la Boîte à outils à la sixième cellule de la
colonne de droite dans l'élément div. Changez ensuite la propriété (ID) en
CustomerStateTextBox.
• Ajoutez le contrôle Label de la Boîte à outils à la septième cellule de la colonne
de gauche dans l'élément div. Changez la propriété (ID) en CustomerCountryLabel,
puis définissez la propriété Text sur Country.
• Ajoutez le contrôle DropDownList de la Boîte à outils à la septième cellule de
la colonne de droite dans l'élément div. Changez ensuite la propriété (ID) en
CustomerCountryDropDownList.
• Ajoutez le contrôle Label de la Boîte à outils à la huitième cellule de la colonne
de gauche dans l'élément div. Changez la propriété (ID) en CustomerPhoneLabel,
puis définissez la propriété Text sur Phone.
• Ajoutez le contrôle TextBox de la Boîte à outils à la huitième cellule de la
colonne de droite dans l'élément div. Changez ensuite la propriété (ID) en
CustomerPhoneTextBox.
• Ajoutez le contrôle Label de la Boîte à outils à la neuvième cellule de la
colonne de gauche dans l'élément div. Changez la propriété (ID) en
CustomerEmailAddressLabel, puis définissez la propriété Text sur Email
Address.
• Ajoutez le contrôle TextBox de la Boîte à outils à la neuvième cellule de la
colonne de droite dans l'élément div. Changez ensuite la propriété (ID) en
CustomerEmailAddressTextBox.
• Ajoutez le contrôle Label de la Boîte à outils à la dixième cellule de la
colonne de gauche dans l'élément div. Changez la propriété (ID) en
CustomerWebAddressLabel, puis définissez la propriété Text sur Web
Address.
• Ajoutez le contrôle TextBox de la Boîte à outils à la dixième cellule de la
colonne de droite dans l'élément div. Changez ensuite la propriété (ID) en
CustomerWebAddressTextBox.
• Ajoutez le contrôle Label de la Boîte à outils à la onzième cellule de la
colonne de gauche dans l'élément div. Changez la propriété (ID) en
CustomerCreditLimitLabel, puis définissez la propriété Text sur Credit Limit.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
3-54 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Ajoutez le contrôle TextBox de la Boîte à outils à la onzième cellule de la


colonne de droite dans l'élément div. Changez ensuite la propriété (ID) en
CustomerCreditLimitTextBox.
• Ajoutez le contrôle Label de la Boîte à outils à la douzième cellule de la
colonne de gauche dans l'élément div. Changez la propriété (ID) en
CustomerNewsSubscriberLabel, puis définissez la propriété Text sur News
Subscriber.
• Ajoutez le contrôle CheckBox de la Boîte à outils à la douzième cellule de la
colonne de droite dans l'élément div. Changez ensuite la propriété (ID) en
CustomerNewsSubscriberCheckBox.
• Enregistrez les modifications et affichez le formulaire Web InsertCustomer
dans un navigateur Web.
• Ajoutez le contrôle Button de la boîte à outils au pied de page du tableau
dans l'élément div. Changez la propriété (ID) en CustomerInsertButton
et définissez la propriété Text sur Insert.
• Ajoutez le contrôle Button de la Boîte à outils au pied de page du tableau
dans l'élément div. Changez la propriété (ID) en CustomerCancelButton
et définissez la propriété Text sur Cancel.
• Enregistrez les modifications et affichez le formulaire Web InsertCustomer
dans un navigateur Web.

f Tâche 4 : définir des propriétés de contrôle complexes


• Définissez la propriété MaxLength des contrôles
CustomerFirstNameTextBox, CustomerAddressTextBox et
CustomerEmailAddressTextBox sur 50.
• Définissez la propriété MaxLength des contrôles CustomerLastNameTextBox,
CustomerCityTextBox, CustomerStateTextBox et CustomerPhoneTextBox
sur 30.
• Définissez la propriété MaxLength des contrôles CustomerZipCodeTextBox
et CustomerCreditLimitTextBox sur 10.
• Ouvrez le formulaire Web InsertCustomer en mode Source.
• Définissez la propriété MaxLength du contrôle
CustomerWebAddressTextBox sur 80.
• Enregistrez les modifications et affichez le formulaire Web InsertCustomer
dans un navigateur Web.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Création d'un formulaire Web Microsoft® ASP.NET 3-55

f Tâche 5 : appliquer un style prédéfini au formulaire Web


• Appliquez le style de modèle prédéfini à l'élément body du formulaire Web
InsertCustomer.
• Enregistrez les modifications et affichez le formulaire Web InsertCustomer
dans un navigateur Web.

f Tâche 6 : désactiver l'ordinateur virtuel et annuler les modifications


• Désactivez l'ordinateur virtuel 10557A-GEN-DEV.
• Annulez les modifications apportées à l'ordinateur virtuel 10557A-GEN-DEV.

Résultats : au terme de cet exercice, vous aurez conçu la version initiale du


formulaire Web InsertCustomer de votre site Web.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
3-56 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Récap
pitulatif de l'atelier pratiq
que

1. Quels sont les avanttages des contrôlees de formulaire Web ?


2. Queel type de contrôlle serveur Web esst utilisé dans le cadre
c de l'atelier p
pratique ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
C
Création d'un formulaire Web
W Microsoft® ASP.NET 3-57

Récapitu
ulatif du m
module et
e élémen
nts à retenir

Parcou
urir les question
ns et les répon
nses
1. Com
mment pouvez-vo ous vérifier qu'un
ne page Web ayan
nt une extension .aspx
dan
ns un site Web AS
SP.NET est un forrmulaire Web ?
2. Com
mment pouvez-vo ous vérifier qu'un
ne page Web ayan nt une extension .aspx
con
ntient des contrôlles serveur Web ASP.NET
A intrinsèèques ?
3. Quel type de balisagge ou de script un
n contrôle serveu
ur Web génère-t-ill sur le
clieent ?
Less types de balisage ou de script gén L et JavaScript, if the Web
nérés sont HTML
servver
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
3-58 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Problèmes et scénarios réels


1. Vous souhaitez ajouter à votre application Web une page que vous pouvez
utiliser à l'aide du code côté serveur. Quelle est la méthode d'implémentation
la plus simple ?
Ajoutez un nouvel élément en utilisant le modèle d'élément de formulaire Web.
2. Vous souhaitez ajouter un titre à un formulaire Web. Quelle est la méthode
d'implémentation la plus simple ?
Indiquez une valeur pour l'attribut title de la directive Page.

Meilleures pratiques
• Les formulaires Web doivent exposer un titre de page affiché sous forme de
légende de navigateur et sur l'onglet, si votre session de navigation contient
des onglets. Cela permet aux utilisateurs d'identifier plus facilement une page
spécifique.
• Utilisez toujours le contrôle serveur Web approprié à la tâche ; par exemple,
le contrôle Label à la place du contrôle TextBox, pour afficher le texte en
lecture seule.
• Utilisez une convention d'affectation de noms lorsque vous nommez vos éléments
HTML et contrôles serveur Web. Dans ce cours, une convention d'affectation de
noms est constituée du contenu du contrôle ou de l'élément, et elle est suffixée
avec le type de contrôle utilisé ; par exemple, FirstNameTextBox pour un
contrôle TextBox exposant le prénom d'une personne. De cette façon, vous
pouvez également avoir un contrôle Label FirstNameLabel indiquant à
l'utilisateur ce que le contrôle TextBox contient. En général, un nom ou un ID
doit être affecté à tous les éléments HTML et contrôles serveur Web, car vous
devrez peut-être faire référence aux contrôles depuis d'autres contrôles, ou depuis
le code côté client ou côté serveur.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-1

Module 4
Ajout de fonctionnalités à un formulaire Web
Microsoft® ASP.NET
Table des matières :
Leçon 1 : Utilisation des fichiers code-behind 4-4
Leçon 2 : Gestion des événements de contrôle serveur 4-14
Leçon 3 : Création de classes et de composants à l'aide de
Visual Studio 2010 4-37
Leçon 4 : Gestion des événements relatifs aux pages 4-61
Atelier pratique : Ajout de fonctionnalités à un formulaire Web
Microsoft ASP.NET 4-72
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-2 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Vue d'en
nsemble du modu
ule

Vous po ouvez ajouter du code à votre appplication Web Miccrosoft® ASP.NET T via
différenntes méthodes, seelon vos besoins. Vous pouvez utilliser le code inlin
ne et
le code mixte, mais pourr ajouter du codee aux formulaires Web, il est conseeillé
d'utiliseer les fichiers code-behind dans Microsoft®
M Visual Studio®
S 2010.
Les gesttionnaires d'événnements sont des procédures qui gèrentg un événem ment ;
par exemmple, lorsqu'une page est chargéee sur le serveur ou u qu'un utilisateuur clique
sur un bouton.
b Les gestiionnaires d'événeements pour les contrôles
c serveur Web
sont génnéralement décleenchés par une in ntervention de l'utilisateur et fourn nissent
des foncctionnalités à vottre application. Poour créer des gesstionnaires d'évén nements
de façonn efficace, vous d
devez comprendree le cycle de vie de d la page. Vous devez
d
égalemeent le connaître sis vous développeez des contrôles personnalisés.
p Ceela est
particulièrement vrai si vvous devez initialisser des contrôles,, remplir leurs pro
opriétés
avec les données d'état d'affichage, puis exxécuter un code réégissant le compo ortement
des contrôles.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-3

Dans ce module, seul le code serveur est traité. Cela signifie que le code est exécuté
sur le serveur et que l'intégralité du traitement du code est effectuée avant le renvoi
au client de la page demandée. C'est également le cas même lorsque des contrôles
serveur transmettent automatiquement le code côté client de sorte qu'un utilisateur
puisse interagir avec le contrôle sur le côté client, sans aller-retour vers le serveur.
Dans ce module, vous découvrirez les différentes méthodes permettant d'ajouter
du code à votre application Web ASP.NET. Vous apprendrez également à utiliser
les contrôles serveur Web, les gestionnaires d'événements, les fichiers code-behind
et les composants. Enfin, vous apprendrez à utiliser les événements relatifs aux
pages, particulièrement l'événement OnLoad, qui est géré par le gestionnaire
d'événements Page_Load.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-4 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Leçon 1
Utilisatio
on des ficchiers cod
de-behind
d

Vous po ouvez ajouter du ccode mixte à votrre formulaire Web b dans le même fichier que
le conteenu Web. Vous po ouvez également ajouter
a du code dans
d une section de
d script
différen
nte du même fichieer ou dans un fich hier distinct. Le co
ode inline utilise à la fois
le HTML L et le code dans des sections difféérentes du même fichier .aspx. Les fichiers
code-behind contiennentt la logique de pro ogrammation pou ur une seule page Web.
Dans ceette leçon, vous d
découvrirez les tro
ois méthodes perrmettant d'ajouterr du code
via Visu
ual Studio 2010. VVous apprendrezz également en qu uoi elles se différeencient.

Objecttifs de la leçon
Au term
me de cette leçon, vous serez à mêm
me d'effectuer less tâches suivantess :
• déccrire les méthodess permettant d'ajouter du code ;
• déccrire la différence entre le code mix
xte et le code inliine ;
• déccrire les fichiers code-behind ;
• exppliquer comment ajouter des foncttionnalités aux fo
ormulaires Web à l'aide de
fich
hiers code-behind
d.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web
W Microsoft® ASP.NET 4-5

Méthodes d'implé
émentation du code

Points clés
Vous po
ouvez ajouter du code à votre form
mulaire Web des trois façons suivaantes :
• de mixte. Le codee est placé dans le même fichier que le contenu Weeb,
Cod
méllangé avec le baliisage.
• Cod
de inline. Le codee est placé dans un
u ou plusieurs éléments
é de script, dans le
mêm
me fichier que le contenu de balissage.
• Codde-behind. Le codde est placé dans un nt du contenu de balisage.
u fichier différen
Le fichier
f de code est appelé fichier co
ode-behind. Danss Visual Studio 20
010, la
métthode par défaut consiste à placer tout le code danss un fichier code-b
behind.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-6 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Code mixte et cod


de inline

Code mixte
m
Le codee mixte est égalem ment appelé « bloccs de code intégréé ». Certains dévelloppeurs
utilisentt le code mixte, m
mais cette méthodee est déconseilléee car un fichier de code
mixte peut être difficile à lire et à gérer.

Code in
nline
Bien quue la méthode parr défaut d'implém mentation du code côté serveur daans
Visual Studio
S 2010 conssiste à utiliser un fichier code-behiind, il existe des pages
p
utilisantt le code inline.
Lorsquee vous utilisez le code inline pour une page Web, le l balisage et le co
ode sont
situés dans
d des sections différentes d'un même
m fichier .asp
px. L'objectif de cette
c
séparatiion est la clarté. C
Cependant, quant au fonctionnem ment, le code et le HTML
peuventt se trouver n'imp porte où sur la paage. Même si le coode inline séparee le code
du balissage, ces dernierss sont tout de même mélangés dan ns le même fichieer,
rendantt difficile leur utillisation par deux développeurs en n même temps.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-7

Les exemples suivants illustrent du code inline.

[Visual Basic]
<html xmlns="http://www.w3.org/1999/xhtml">
...
<asp:Button ID="Button1" runat="server" Text="Button" />
...
</html>
<script Language="VB" runat="server">
Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) _
Handles Button1.Click
...
End Sub
</script>

[Visual C#]
<html xmlns="http://www.w3.org/1999/xhtml">
...
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click"
Text="Button" />
...
</html>

<script Language="C#" runat="server">


private void Button1_Click(object sender, System.EventArgs e)
{
...
}
</script>

Question : comment pouvez-vous utiliser la même méthode dans Visual Basic et


Visual C#, alors que dans chacun d'entre eux, l'événement OnClick est connecté
différemment ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-8 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Fichie
ers code-beh
hind

Points clés
La méth hode par défaut d d'implémentation n du code côté serrveur dans Visual
Studio 2010
2 consiste à uutiliser des fichierrs code-behind. Ainsi,
A la logique de
d
program mmation est consservée dans un ficchier différent des éléments visuells
de la paage. La séparation n de la logique et de la conception n vous permet de
travailleer sur le fichier co
ode-behind pendaant que les conceepteurs d'interfacce
utilisateeur travaillent surr la page ASP.NET T.
Les fich
hiers code-behindd contiennent la lo ogique de prograammation pour un u
seul formulaire Web. Ch haque formulaire Web d'une appliication Web conttient
son proopre fichier code-b
behind. Par défau ut, un fichier codee-behind présentte le
même nom
n que le formu
ulaire Web auqueel il est associé. Toutefois, il comporte
l'extension .aspx.vb ou .aaspx.cs, selon le langage
l utilisé daans ce fichier. Parr
exemplee, le formulaire W
Web Form1.aspx aura un fichier co ode-behind Visuaal C#
nomméé Form1.aspx.cs o ou un fichier codee-behind Visual Basic
B nommé
Form1.aaspx.vb.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-9

Grâce aux fichiers code-behind, il est également possible d'implémenter une classe
dans au moins deux fichiers de code distincts à l'aide du mot clé Partial/partial.
Le code suivant montre comment le mot clé Partial/partial permet d'utiliser des
classes partielles.

[Visual Basic]
Partial Public Class _Default

[Visual C#]
public partial class _Default

Remarque : Un fichier code-behind ne peut contenir du code que dans un seul langage.
Vous ne pouvez pas mélanger Visual C# et Visual Basic dans le même fichier code-behind.
Toutefois, vous pouvez mélanger les formulaires Web et les fichiers de différents langages
au sein du même site Web.

Le fichier code-behind constitue la méthode d'écriture par défaut du code pour les
formulaires Web ASP.NET. Il s'agit également d'une méthode prisée par de nombreux
développeurs (si ce n'est la grande majorité). Un fichier code-behind contient
généralement une classe unique dont le nom est celui du formulaire Web utilisé.
Le code suivant illustre le formulaire Web par défaut (Default.aspx), où la classe
est nommée _Default.

[Visual Basic]
Partial Class _Default
Inherits System.Web.UI.Page

End Class
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-10 Introduction au développement Web avec Microsoft® Visual Studio® 2010

[Visual C#]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page


{
protected void Page_Load(object sender, EventArgs e)
{

}
}

L'intégralité du contenu des fichiers code-behind Default.aspx.vb et Default.aspx.cs


a été affichée, et pas seulement la définition de classe. Cependant, le code généré
est différent pour Visual Basic et Visual C#. Visual Basic n'ajoute pas les espaces de
noms utilisés pour un formulaire Web car ils sont automatiquement référencés ou
importés à l'aide des paramètres du projet. Visual C# ajoute également la méthode
du gestionnaire d'événements pour l'événement Page.OnLoad car il est plus difficile
d'ajouter ce code manuellement dans Visual C# que dans Visual Basic. Ce gestionnaire
d'événements est utilisé dans la plupart des formulaires Web.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web
W Microsoft® ASP.NET 4-11

Utilisa
ation de fich
hiers code-be
ehind

Points clés
Pour qu ue les formulairess Web basés sur lesl fichiers code-b
behind fonctionn
nent
correcteement, chaque paage .aspx doit êtree associée à un fichier code-behind et
celui-ci doit être compiléé avant que les innformations ne so
oient renvoyées au
u
navigateeur client à l'origiine de la requête..
Chaque page de formulaiire Web contient deux d fichiers distin
ncts, la page .aspx
x et le
fichier code-behind, qui foorment une entitéé unique lorsque l''application Web est e
exécutéee. Le formulaire WWeb code-behind peutp être précomp pilé par Visual Stu
udio 2010
lorsque vous générez le p projet d'applicationn Web ou compiléé juste-à-temps (JIT T, just in
time) lorrsqu'un utilisateurr accède à la page pour la première fois.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-12 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Liaison des fichiers .aspx et code-behind


Le fichier .aspx doit être associé au fichier code-behind. Pour ce faire, Visual Studio 2010
ajoute les trois attributs suivants à la directive Page de la page .aspx :
• CodeBehind. Cet attribut spécifie le nom du fichier compilé contenant la
classe associée à la page. CodeBehind est utilisé avec les formulaires Web
dans un projet d'application Web (WAP).
• CodeFile. Cet attribut spécifie un chemin vers le fichier code-behind référencé
pour une page de formulaire Web. Il est utilisé avec l'attribut Inherits pour
associer un fichier source code-behind à une page Web. CodeFile est utilisé
avec les formulaires Web dans un projet de site Web (WSP).
• Inherits. Cet attribut permet à la page .aspx d'hériter d'une classe dans le
fichier code-behind. L'attribut Inherits définit une classe code-behind de
laquelle hérite la page. Il peut s'agir de toute classe dérivée de la classe Page.
Cet attribut est utilisé avec l'attribut CodeFile, qui contient le chemin vers le
fichier source pour la classe code-behind.

Remarque : L'attribut Inherits respecte la casse dans Visual C#, mais pas dans Visual Basic.

Outre ces trois attributs, l'attribut AutoEventWireup indique si la connexion


automatique de l'événement relatif aux pages est activée pour une page Web Forms.

Remarque : Dans Visual C#, l'attribut AutoEventWireUp est défini sur True par défaut.
Le concepteur génère automatiquement le code permettant de lier les événements à
leurs méthodes de gestionnaire d'événements. Dans Visual Basic, cet attribut est défini
sur False par défaut. Le concepteur exécute cette liaison d'événement à l'aide de
l'instruction Handles dans la déclaration de la méthode de gestionnaire d'événements.

L'exemple suivant illustre le code de la directive Page pour un formulaire Web


nommé Default.aspx.

[Visual Basic]
<%@ Page Language="VB" AutoEventWireup="false"
CodeFile="Default.aspx.vb" Inherits="_Default" %>

[Visual C#]
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-13

Compilation et déploiement
Visual Studio 2010 prend en charge deux types de projets d'application Web :
WAP et WSP. Tous deux offrent différents types de compilation.
• WAP. Lors de la création de votre projet, le code est compilé en langage
Microsoft Intermediate Language (MSIL) et situé dans un seul assembly,
qui est généralement placé dans le sous-dossier Bin du dossier du projet.
Cela facilite le déploiement du balisage et de l'assembly compilé. Lors de la
première demande d'application, l'assembly compilé est copié dans le dossier
de fichiers ASP.NET temporaire, où il est compilé juste-à-temps (JIT) en code
binaire pouvant être exécuté par le système d'exploitation. Cette opération
entraîne un léger retard de la réponse à la première demande par rapport aux
demandes ultérieures.
• WSP. Par défaut, un site Web ASP.NET n'est pas précompilé. À la place,
ASP.NET compile votre site Web la première fois que la page est demandée.
Cette opération est également appelée compilation sur place. L'application est
compilée lors de la première demande dans un ou plusieurs assemblys, dans
le dossier de fichiers ASP.NET temporaire. Le déploiement d'un site Web
ASP.NET Web est pratique car il permet d'apporter des modifications à un
formulaire Web ou un fichier code-behind, et de déployer le formulaire Web
sur le serveur sans compiler le code source.

Précompilation
Vous pouvez précompiler un projet de site Web ASP.NET en un ou plusieurs
assemblys à déployer, au lieu de déployer le code source réel. Pour ce faire,
accédez au menu Générer et utilisez l'option Publier le site Web. Autrement,
dans l'Explorateur de solutions, cliquez avec le bouton droit sur le site Web et
cliquez sur Publier le site Web.

Pour plus d'informations sur le déploiement de site Web, consultez le


module 14, « Configuration et déploiement d'une application Web
Microsoft ASP.NET ».
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-14 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Leçon 2
Gestion des
d événements de
d contrô
ôle serveu
ur

Les gesttionnaires d'évén nements vous perrmettent de gérer les interventionss


de l'utiliisateur sur un forrmulaire Web. Il existe deux typess de gestionnaires
d'événements : côté clien nt et côté serveur. Les gestionnairees d'événements
côté clieent sont des événnements gérés surr l'ordinateur effeectuant la demande
de formmulaire Web. Les ggestionnaires d'évvénements côté serveur
s exigent que
q
les inforrmations soient eenvoyées au serveeur Web en vue de d leur traitementt.
Ils sont généralement plus puissants quee les gestionnairess d'événements côté
client, particulièrement
p llorsqu'il s'agit d'aaccéder aux resso
ources côté serveu
ur,
telles quu'une base de don nnées.
Lorsquee vous développeez vos application ns ASP.NET, vouss devez utiliser lees
gestionn naires d'événemeents côté client ett côté serveur commme il convient. Pour
P
ce faire, vous devez conn naître les avantagges et les inconvén nients inhérents à
l'utilisattion des gestionn
naires d'événemen nts côté client et côté
c serveur, afin
n de
détermiiner le type d'évén nement appropriié pour vos appliccations ASP.NET. Vous
devez éggalement savoir ccomment ajouterr des gestionnairees d'événements aux a
contrôlees serveur Web.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-15

Objectifs de la leçon
Au terme de cette leçon, vous serez à même d'effectuer les tâches suivantes :
• décrire les gestionnaires d'événements ;
• décrire les gestionnaires d'événements côté client ;
• décrire les gestionnaires d'événements côté serveur ;
• expliquer le traitement des gestionnaires d'événements côté client et côté serveur ;
• décrire la procédure de création de gestionnaires d'événements côté serveur ;
• expliquer la création de gestionnaires d'événements côté serveur ;
• utiliser des contrôles serveur Web à l'aide des gestionnaires d'événements.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-16 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Présentation des g
gestionnaire
es d'événeme
ents

Points clés
Les form mulaires Web dyn namiques et interractifs répondentt aux événementss ou aux
entrées utilisateur. Vous pouvez utiliser les gestionnaires d'événements
d poour gérer
les événnements déclench hés par l'intervenntion de l'utilisateeur sur un formullaire Web.
ASP.NET est une plateforrme de développeement orientée ob bjet et les objets exposent
e
le plus souvent des événements. Ces évvénements sont déclenchés d lorsqqu'un
utilisateeur lance ou quittte l'application, cllique sur un boutton ou place le po ointeur
sur un lien
l dans l'applicaation. Lorsqu'un événement surviient, il ne déclencche pas
automatiquement une acction dans l'appliication ; pour celaa, vous devez écrrire le
code peermettant de géreer l'événement.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-17

Lorsqu'un utilisateur intervient sur un formulaire Web, un événement est déclenché.


Vous devez concevoir l'application Web de façon à exécuter les tâches appropriées
lors du déclenchement d'un événement. Un gestionnaire d'événements est l'action
produite en réponse à l'événement déclenché. Les formulaires Web sont pilotés par
les événements, mais pas de façon directe car les événements ne se produisent pas
dans l'ordre prévu pour leur traitement linéaire. Les événements vous permettent
de séparer les tâches. Par exemple, vous pouvez faire en sorte que l'application
effectue une tâche de tri séparément de l'application principale. Si un utilisateur
annule la tâche de tri, l'application peut intercepter un événement d'annulation qui
demande l'arrêt du processus de tri.

Exemples de gestionnaire d'événements


De nombreux formulaires Web permettent à l'utilisateur d'entrer des informations,
puis de cliquer sur un bouton Envoyer, ce qui génère un événement. Un gestionnaire
d'événements écrit pour cet événement Click peut envoyer les informations utilisateur
vers une base de données Microsoft SQL Server®, télécharger un fichier sur le serveur
Web ou simplement rediriger l'utilisateur vers une autre page. Les exemples suivants
illustrent du code de gestionnaire d'événement.

[Visual Basic]
<html>
...
<body>
<form runat="server">
...
<asp:Button ID="Button1" Text="Home" runat="server"/>
...
</form>
</body>
</html>

''' <summary>
''' Redirects to home page
''' </summary>
''' <param name="sender"></param>
''' <param name="e"></param>
''' <remarks></remarks>
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As
System.EventArgs) Handles Button1.Click
' Redirect to home page
Response.Redirect("~/Default.aspx")
End Sub
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-18 Introduction au développement Web avec Microsoft® Visual Studio® 2010

[Visual C#]
<html>
...
<body>
<form runat="server">
...
<asp:Button ID="Button1" Text="Home" OnClick="Button1_Click"
runat="server"/>
...
</form>
</body>
</html>

/// <summary>
/// Redirects to home page
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void Button1_Click(object sender, EventArgs e)
{
// Redirect to home page
Response.Redirect("~/Default.aspx");
}

Question : quels sont les différents types d'événements pour ASP.NET ?


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web
W Microsoft® ASP.NET 4-19

Présentation des g
gestionnaire
es d'événeme
ents côte clie
ent

Points clés
Il existe deux types de geestionnaires d'évéénements : côté cliient et côté serveu ur. Les
gestionn naires d'événemen nts côté client son
nt des événementts gérés sur l'ordin nateur
client efffectuant la demannde de formulairee Web. Lorsqu'un n événement est déclenché,
d
les inforrmations ne sont pas envoyées au serveur.
s À la placee, le navigateur cllient
interprèète le code et exéccute l'action.
Les gesttionnaires d'événnements côté clien nt ne peuvent êtrre utilisés qu'avecc des
élémentts HTML. Il peut exister des événeements côté clien nt pour les contrô ôles
serveur,, mais uniquemen nt pour la partie du contrôle serveeur qui est affichéée et
toujours constituée d'un n ou de plusieurs éléments HTML. Vous pouvez atttacher
les gestiionnaires d'événeements côté cliennt directement à un
u contrôle serveu ur
Web en n le spécifiant dan
ns l'attribut d'évén
nement (voir l'événement onmou useover
indiquéé dans le code suiivant).
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-20 Introduction au développement Web avec Microsoft® Visual Studio® 2010

...
<script type="text/javascript">
function changeColor()
{
window.event.srcElement.style.color = "#FF0000";
}
</script>
...
<asp:Button id="Button1" runat="server" text="Button1"
onmouseover="changeColor();" />

Vous pouvez également assigner un gestionnaire d'événements par programme via


la méthode Add de la propriété Attributes, comme indiqué dans le code suivant.

[Visual Basic]
Button1.Attributes.Add("onmouseover", "changeColor();")

[Visual C#]
Button1.Attributes.Add("onmouseover", "changeColor();");

Le code requiert que la fonction JavaScript fasse partie du balisage. Vous pouvez
l'associer de façon explicite, comme indiqué dans l'exemple ci-dessus, ou en
l'inscrivant en tant que script côté serveur. La fonction JavaScript peut également se
trouver dans un fichier lié extérieurement. Utilisez la méthode ClientScriptManager.
RegisterClientScriptBlock, qui est placée dans le gestionnaire d'événements Page
Load, comme indiqué dans le code suivant.

[Visual Basic]
Dim buttonClientScriptManager As ClientScriptManager = Me.ClientScript
buttonClientScriptManager.RegisterClientScriptBlock(Button1.GetType(),
"changeColorScript",
"function changeColor() { window.event.srcElement.style.color =
'#FF0000'; }", True)

[Visual C#]
ClientScriptManager buttonClientScriptManager = this.ClientScript;
buttonClientScriptManager.RegisterClientScriptBlock(Button1.GetType(),
"changeColorScript",
"function changeColor() { window.event.srcElement.style.color =
'#FF0000'; }", true);
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-21

Vous pouvez extraire une référence à la classe ClientScriptManager à partir de la


propriété ClientScript de l'objet Page. Les gestionnaires d'événements côté client
ne disposent jamais d'un accès direct aux ressources du serveur. Par exemple, vous
ne pouvez pas utiliser de script côté client pour accéder directement à une base de
données SQL Server.

Usages des gestionnaires d'événements côté client


Les gestionnaires d'événements côté client sont utiles pour les événements que
vous souhaitez générer immédiatement. Ils ne requièrent pas d'aller-retour vers
le serveur Web. Il n'est donc pas nécessaire d'envoyer les informations au serveur
Web et d'attendre une réponse.
Par exemple, il se peut que vous souhaitiez valider des informations situées dans
une zone de texte avant de les soumettre au serveur. Les scripts côté client vous
permettent de valider ces informations rapidement et en toute efficacité avant de
les envoyer au serveur Web pour un traitement supplémentaire. Le script côté
client peut être utilisé pour améliorer l'expérience utilisateur grâce à des pages
Web plus riches et réactives, dont le comportement est presque identique à celui
des applications clientes traditionnelles.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-22 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Présentation des g
gestionnaire
es d'événeme
ents côté serrveur

Points clés
À l'inverrse des gestionnaiires d'événementss côté client, les gestionnaires d'évéénements
côté servveur requièrent q
que les informatio ons soient envoyéees au serveur Web b en vue
de leur traitement.
t Bien q
que l'utilisation dees gestionnaires d'événements
d côtéé serveur
nuise auux performances een raison des alleers-retours vers le serveur, ces gestiionnaires
sont génnéralement plus p puissants que les gestionnaires d'évvénements côté cllient,
particulièrement lorsqu'ill s'agit d'accéder aux
a ressources cô ôté serveur, telles qu'une
base de données.

Gestion
nnaires d'événements côté seerveur
Les gesttionnaires d'événeements côté serveeur sont composéés du code compillé
résidantt sur le serveur W
Web. Ils vous perm
mettent de gérer lees événements gén nérés à
partir dees contrôles serveeur Web et HTML L. En outre, ils on
nt accès à des resso
ources
du serveeur qui sont génééralement indispoonibles pour les geestionnaires d'évéénements
côté clieent.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-23

Les exemples suivants spécifient un gestionnaire d'événements côté serveur à l'aide


de l'attribut runat="server" dans la balise <script> d'ouverture.

[Visual Basic]
<script type="text/VB" runat="server">...</script>

[Visual C#]
<script type="text/C#" runat="server">...</script>

Prise en charge des événements


Les gestionnaires d'événements côté serveur prennent en charge un nombre
réduit de types d'événements de contrôle à cause des allers-retours nécessaires
vers le serveur Web. Avec les gestionnaires d'événements côté client, vous pouvez
inclure du code pour traiter les événements Mouse-key et onChange. Bien que les
gestionnaires d'événements côté serveur prennent en charge les événements Click
et une version spéciale de l'événement onChange, ils ne prennent pas en charge les
événements qui se produisent fréquemment, tels que les événements Mouse-key.
Sinon, les performances de la page Web seraient sévèrement affectées, et surtout,
l'application deviendrait inutile.
Le tableau suivant indique quelques-unes des différences entre les gestionnaires
d'événements côté client et côté serveur.

Côté client Côté serveur

Langage de JavaScript Tout langage .NET Framework, tel que


programmation Visual Basic ou Visual C#

Traité sur le client Oui Non

Traité sur le serveur Non Oui

Compilé Non Oui

Interprété Oui Non

Accès direct aux Non Oui


ressources côté serveur
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-24 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Bien que JavaScript ne soit disponible que dans certaines implémentations, il reste
le seul langage de programmation compatible sur tous les navigateurs. Si vous
utilisez Windows® Internet Explorer® exclusivement pour accéder à un portail
Intranet, vous pouvez également utiliser Microsoft Visual Basic Scripting Edition
(VBScript) pour créer votre code côté client et vos gestionnaires d'événements.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web
W Microsoft® ASP.NET 4-25

Procé
édure de traitement des gestionnaire
es d'événeme
ents
côté client
c et côté
é serveur

Points clés
Dans ceette animation, vo ous verrez comment les gestionnaaires d'événementts côté
client ett côté serveur son
nt traités, à la foiss sur le client et su
ur le serveur.
1. Le client
c demande u
une page Web Fo
orms ASP.NET au
u server Web.
2. Le serveur
s renvoie aau client une pagee contenant le baalisage et le scriptt. Par
exeemple, cette page inclut un contrôle TextBox et un n bouton Envoyerr. La
pagge contient égalemment le script côtté client qui valide le contenu de laa zone
de texte.
t
3. L'uttilisateur entre dees informations non
n valides dans la zone de texte et e le
scriipt côté client gén
nère une boîte de message. Le traiteement côté client diminue
le trrafic réseau et am
méliore les temps de
d réponse car aucune information n n'est
envvoyée au serveur.
4. L'uttilisateur corrige les informations dans la zone de texte et clique su
ur le
bouuton Envoyer.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-26 Introduction au développement Web avec Microsoft® Visual Studio® 2010

5. Les informations sont validées sur le côté client et envoyées au serveur, sur
lequel le traitement côté serveur est exécuté.
6. Le serveur répète la validation, puis stocke les informations de la zone de texte
dans une base de données.
7. Les ressources côté serveur peuvent être utilisées pour d'autres traitements de
données car le script côté client n'accède pas directement aux ressources du
serveur.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web
W Microsoft® ASP.NET 4-27

Création de gestio
onnaires d'év
vénements côté
c serveur

Points clés
Pour crééer un gestionnaiire d'événements côté serveur dan
ns Visual Studio 2010,
2
vous deevez effectuer les trois étapes suivaantes :
1. créeer le contrôle quii génère l'événem
ment sur le formullaire Web.
2. fournir le code du gestionnaire d'évéénements dans le fichier code-behiind qui
gèree l'événement.
3. lier le gestionnaire d'événements à l'évvénement de contrôle. Ces étapes peuvent
p
êtree effectuées dans n
n'importe quel orrdre, selon vos mééthodes de travaill.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-28 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Création d'un gestionnaire d'événements côté serveur


Lorsque vous double-cliquez sur un contrôle dans Visual Studio 2010, Visual
Studio crée un gestionnaire d'événements vide. Lorsque vous utilisez Visual Basic,
Visual Studio 2010 ajoute également le mot clé Handles, qui lie le gestionnaire
d'événements aux événements de contrôle. Le mot clé Handles vous permet de
créer plusieurs gestionnaires d'événements pour un seul événement, ou un seul
gestionnaire d'événements pour plusieurs événements.

Création d'un gestionnaire d'événements côté serveur dans Visual Basic


Dans Visual Basic, l'attribut runat="server" et l'instruction Handles permettent de
créer les gestionnaires d'événements ASP.NET. L'exemple suivant illustre le code
HTML pour un formulaire Web comportant un bouton avec l'attribut ID Button1,
et l'attribut runat="server" indique que l'événement Click pour le bouton sera géré
sur le serveur.

[Visual Basic]
<form id="form1" method="post" runat="server">
<asp:Button ID="Button1" runat="server"/>
</form>

Dans le code Visual Basic suivant montrant le gestionnaire d'événements pour


l'événement Click, le mot clé Handles indique que le gestionnaire d'événements
est exécuté en réponse à l'événement Click du contrôle Button1.

[Visual Basic]
Protected Sub Button1_Click(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles Button1.Click
...
End Sub

Création d'un gestionnaire d'événements côté serveur dans Visual C#


Dans le code Visual C#, vous ajoutez le gestionnaire d'événements à la propriété
d'événement du contrôle. L'exemple suivant illustre le code HTML pour un
formulaire Web comportant un bouton avec l'attribut ID Button1, et l'événement
Click pour le bouton qui sera géré sur le serveur.

[Visual C#]
<form id="form1" method="post" runat="server">
<asp:Button ID="Button1" onclick="Button1_Click" runat="server"/>
</form>
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-29

L'attribut onclick est défini sur le nom du gestionnaire d'événements. Dans le


fichier code-behind, la propriété Click de la variable Button1 est gérée comme suit.

[Visual C#]
protected void Button1_Click(object sender, System.EventArgs e)
{
...
}

Si vous souhaitez contrôler davantage la façon dont les gestionnaires d'événements


sont liés aux événements de contrôle, créez manuellement le paramètre de liaison
comme suit.

[Visual C#]
Button1.Click += new EventHandler(Button1_Click);

Grâce à cette méthode, vous pouvez créer plusieurs gestionnaires d'événements


pour un seul événement, ou créer un seul gestionnaire d'événements pour
plusieurs événements.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-30 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Démoonstration : ccomment cré


éer des gestiionnaires
d'événements côtté serveur

Points clés
Dans ceette démonstrationn, l'instructeur vou
us montrera comm ment créer un gesstionnaire
d'événements pour un b bouton de page Web W permettant de d modifier le textte d'une
étiquettte. Vous pouvez eeffectuer cette démmonstration à l'aiide de Visual C# ou
Visual Basic.
B

Procéd
dure de démonsstration
1. Ouvvrez une session sur 10557A-GEN
N-DEV en tant qu
u'utilisateur Stagiiaire avec
le mot
m de passe Pa$$w0rd.
• Pour ouvrir unee session sur 10557A-GEN-DEV, utilisez
u les inform
mations
d'identification de l'utilisateur su
uivantes :
• Nom d'utiliisateur : Stagiairee
• Mot de passse : Pa$$w0rd
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-31

2. Créez un site Web à l'aide de Visual Studio 2010.


• Dans le menu Démarrer de 10557A-GEN-DEV, pointez sur Tous les
programmes, cliquez sur Microsoft Visual Studio 2010, puis sur
Microsoft Visual Studio 2010.
• Sur la page de démarrage, dans la fenêtre Microsoft Visual Studio
(Administrateur), accédez au menu Fichier, puis cliquez sur Nouveau site
Web.
• À partir de la boîte de dialogue Nouveau site Web, dans le volet gauche,
cliquez sur Visual Basic ou Visual C#. Dans le volet central, assurez-vous
que l'option Site Web ASP.NET vide est sélectionnée et cliquez sur OK.
3. Ajoutez un nouveau formulaire Web nommé Default.aspx au site Web.
• Dans l'Explorateur de solutions, cliquez avec le bouton droit de la souris
sur le site Web, puis cliquez sur Ajouter un nouvel élément.
• Dans la boîte de dialogue Ajouter un nouvel élément, dans le volet
central, veillez à sélectionner Web Form. Dans la zone Nom, tapez
Default.aspx, puis cliquez sur Ajouter.
4. Ajoutez les contrôles Button et Label au formulaire Web.
• Dans la fenêtre Default.aspx, cliquez sur Design et pointez sur Boîte à
outils.
• Dans la boîte à outils, développez Standard, puis double-cliquez sur le
contrôle Button.
• Dans la boîte à outils, sous Standard, double-cliquez sur le contrôle Label.
5. Affichez le code du gestionnaire d'événements Click par défaut.
• Dans la fenêtre Default.aspx, double-cliquez sur le contrôle Button pour
ouvrir le fichier code-behind.
• Dans la fenêtre Default.aspx.vb ou Default.aspx.cs, affichez le gestionnaire
d'événements vide créé par Visual Studio 2010.

[Visual Basic]
Protected Sub Button1_Click(ByVal sender As Object,
ByVal e As System.EventArgs) Handles Button1.Click
...
End Sub
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-32 Introduction au développement Web avec Microsoft® Visual Studio® 2010

[Visual C#]
protected void Button1_Click(object sender, System.EventArgs e)
{
...
}

6. Ajoutez le code suivant dans le gestionnaire d'événements Click du contrôle


Button.

[Visual Basic]
Label1.Text = "You clicked the button"

[Visual C#]
Label1.Text = "You clicked the button";

7. Affichez le gestionnaire d'événements en cours de connexion.


• Dans le langage de programmation Visual Basic, notez l'instruction
Handles dans le gestionnaire d'événements Button1_Click.

[Visual Basic]
Protected Sub Button1_Click(ByVal sender As Object,
ByVal e As System.EventArgs) Handles Button1.Click

• Dans le langage de programmation Visual C#, la procédure est liée au


gestionnaire d'événements en ajoutant l'attribut onclick au balisage. Vous
pouvez afficher le code suivant à partir du mode Source du formulaire Web
Default.aspx.

[Visual C#]
...
<asp:Button ID="Button1" runat="server" Text="Button"
onclick="Button1_Click"/>
...
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-33

8. Enregistrez les modifications et affichez le formulaire Web dans le navigateur.


• Appuyez sur les touches CTRL+SHIFT+S.
• Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le
formulaire Web Default.aspx et cliquez sur Afficher dans le navigateur.

Remarque : ouvrez la source affichée en cliquant sur Afficher la source dans le menu
Page ; le code du gestionnaire d'événements n'est pas affiché sur le client.

9. Déclenchez le gestionnaire d'événements à l'aide du contrôle Button.


• Dans la fenêtre Internet Explorer
http://localhost:49157/WebSite1/Default.aspx, cliquez sur le contrôle
Button du formulaire Web. Notez que le texte de l'étiquette a été modifié.
• Dans la fenêtre Internet Explorer
http://localhost:49157/WebSite1/Default.aspx, cliquez sur le bouton
Fermer.
• Dans Visual Studio 2010, cliquez sur la fenêtre Default.aspx, puis sur
Design.
• Dans la fenêtre Default.aspx, cliquez sur le contrôle Button.
• Dans la fenêtre Propriétés du contrôle Button, changez la propriété ID en
SubmitButton.
• Dans la fenêtre Default.aspx, double-cliquez sur le contrôle Button pour
ouvrir le fichier code-behind. Notez que Button1 a été modifié en
SubmitButton dans le fichier code-behind.

Remarque : dans le langage de programmation Visual Basic, dans le fichier code-behind,


le mot clé Handles a été mis à jour de façon à refléter le nouveau nom d'objet,
SubmitButton.Click. La liaison au gestionnaire d'événements correct est ainsi conservée.
Le nom du gestionnaire d'événements n'a pas été modifié ; il s'agit toujours de
Button1_Click.
Dans le langage de programmation Visual C#, dans le fichier code-behind, le nouveau
nom de bouton a été modifié dans le balisage. L'attribut onclick reste défini sur
Button1_Click. Visual Studio modifie uniquement la propriété ID du contrôle, mais pas
la liaison d'événement dans la procédure.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-34 Introduction au développement Web avec Microsoft® Visual Studio® 2010

10. Enregistrez et affichez le formulaire Web dans le navigateur.


• Dans le menu Fichier, cliquez sur Enregistrer Default.aspx.vb ou
Enregistrer Default.aspx.cs.
• Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le
formulaire Web Default.aspx et cliquez sur Afficher dans le navigateur.
11. Déclenchez le gestionnaire d'événements à l'aide du contrôle Button.
• Dans la fenêtre Internet Explorer
http://localhost:49157/WebSite1/Default.aspx, cliquez sur le contrôle
Button du formulaire Web.

Remarque : Notez que le gestionnaire d'événements Click se déclenche toujours lorsque


vous utilisez le nouveau nom du contrôle.

• Dans la fenêtre Internet Explorer


http://localhost:49157/WebSite1/Default.aspx, cliquez sur le bouton Fermer.
• Dans la fenêtre Microsoft Visual Studio WebSite1, cliquez sur le bouton Fermer.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web
W Microsoft® ASP.NET 4-35

Utilisa
ation de con
ntrôles serveu
ur Web à l'aiide des
gestioonnaires d'év
vénements

Points clés
Dans dee nombreuses applications Web, vous v devez écriree du code pour la lecture
à partir des contrôles surr un formulaire et e l'écriture dans les
l contrôles sur le même
formulaaire. Pour ce faire, utilisez les gestiionnaires d'événeements côté serveeur.

Lecture des propriétéés à partir d'un


n contrôle serveeur Web
Dans unn gestionnaire d'éévénements côté serveur, vous pouvez lire les inforrmations
depuis un
u contrôle serveu nt contient un forrmulaire avec un contrôle
ur. Le code suivan
Textboxx et Button.

<form id="form1" run


nat="server">
<as
sp:TextBox ID="NameTextBox" ru
unat="server" />
/
<as
sp:Button ID="S
SubmitButton" ru
unat="server" />
/
</form
m>
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-36 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Lorsque l'utilisateur clique sur le bouton, ce qu'il a tapé dans la zone de texte
apparaît. Le code suivant assigne la variable de chaîne greetingString à une
concaténation de « Hello » et du contenu de la zone de texte NameTextBox.
Le texte indiqué dans le contrôle NameTextBox est extrait en l'assignant à la
variable greetingString.

[Visual Basic]
Dim greetingString As String = "Hello " & NameTextBox.Text

[Visual C#]
string greetingString = "Hello " + NameTextBox.Text;

Par exemple, si un utilisateur entre le texte « Sarah » dans le contrôle NameTextBox,


la variable greetingString contiendra la chaîne de texte « Hello Sarah ».

Définitions des propriétés de contrôle serveur Web


Vous pouvez extraire les informations directement vers un contrôle serveur Web
en utilisant les propriétés du contrôle. Par exemple, vous pouvez avoir un contrôle
serveur Web Label sur la page ASP.NET, comme suit.

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

Le code côté serveur assigne la propriété Text du contrôle serveur Web GreetingLabel
à une chaîne de texte.

[Visual Basic]
GreetingLabel.Text = "new text"

[Visual C#]
GreetingLabel.Text = "new text";

La lecture et la définition des propriétés de contrôle dans les événements de contrôle


côté serveur sont généralement effectuées lorsqu'une manipulation ou un calcul
quelconque du résultat doit être exécuté côté serveur. Sinon, l'interaction côté client
constitue éventuellement une meilleure option.
Dans la plupart des cas, les gestionnaires d'événements relatifs aux pages et les
gestionnaires d'événements de contrôle serveur sont utilisés ensemble pour la
lecture des propriétés de contrôle et l'écriture dans celles-ci, durant le cycle de
vie d'une page.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web
W Microsoft® ASP.NET 4-37

Leçon 3
Création
n de classe
es et de composa
c nts à l'aid
de
de Visual Studio 2
2010

Lorsquee vous développeez une applicationn à l'aide d'un lan


ngage orienté objet, vous
pouvez utiliser les types et composants existants. Vous po ouvez également utiliser
Visual Studio
S 2010 pourr créer un compoosant, qui vous seervira dans d'autres
applicattions.
découvrirez les claasses et les composants. Vous app
Dans ceette leçon, vous d prendrez
égalemeent à créer un commposant à l'aide de
d Visual Studio 2010 et à utiliserr ce
compossant dans d'autress applications.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-38 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Objectifs de la leçon
Au terme de cette leçon, vous serez à même d'effectuer les tâches suivantes :
• décrire les types, les composants et les classes ;
• créer un composant ;
• expliquer comment créer une classe dans Visual Studio 2010 ;
• ajouter des constantes et des variables membres à une classe ;
• ajouter des propriétés et des méthodes à une classe ;
• ajouter des constructeurs de classe ;
• accéder aux composants d'un formulaire Web ASP.NET.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web
W Microsoft® ASP.NET 4-39

Typess, composantts et classes

Points clés
Lorsquee vous développeez une application n à l'aide d'un lan
ngage orienté objet tel que
Visual Basic
B ou Visual C#, vous pouvez utiliser
u les types et
e composants existants.
Par exem mple, la bibliothèèque de classes .N
NET Framework contient de nombreux
types, teels que System.String et System.O Object.

Définittion des types


Les typees sont des group pes d'instructionss de code sans interface utilisateurr. Ils se
répartisssent en deux catéégories distinctes : les structures et les classes. Une structure
s
est un tyype valeur enregiistré dans la pile ou le code inlinee ; elle est désallou
uée
lorsqu'eelle devient hors d de portée. Par contre, une classe est
e un type référeence
enregisttré sur le tas, et lee garbage collecto
or gère la mémoirre des classes. Enn général,
les typees valeur sont moins coûteux à allo ouer et désalloueer.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-40 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Les types fournissent les fonctionnalités dans une application. Vous pouvez les
utiliser pour organiser les fonctions et leur donner un nom unique pour les
référencer. Les types possèdent également des propriétés et des méthodes. Les
propriétés permettent de définir les caractéristiques d'un type, tandis que les
méthodes permettent d'appeler les actions d'un type. Si vous souhaitez utiliser
un type et ses méthodes, vous devez instancier une instance du type.

Définition des composants


Les composants comportent un ou plusieurs types qui sont compilés dans un
assembly de bibliothèque de liens dynamiques (DLL, Dynamic Link Libraries).
Puisque le composant est une unité de déploiement, et qu'il s'agit généralement
d'un seul fichier, vous pouvez le réutiliser dans différentes parties d'une application
ou dans des applications distinctes. Vous pouvez référencer un composant à partir
d'une application et accéder aux types du composant.

Partage du type et du composant


Si vous créez un type qui calcule l'augmentation de salaire attribuée à un employé, ce
calcul repose sur de nombreuses formules propres à votre organisation, notamment
le salaire de base actuel, l'évaluation des performances et l'ancienneté dans la société.
Ces calculs sont très complexes et leur développement nécessite du temps. En outre,
la société modifie fréquemment la formule selon laquelle les augmentations de salaire
sont calculées.
Une fois que vous avez créé le type, vous pouvez l'utiliser avec d'autres applications
en l'incluant dans un projet. Par exemple, le service de ressources humaines utilise
une application Windows afin de déterminer le nouveau salaire d'un employé pour
la prochaine paie. Vous pouvez également créer une application Web utilisant le
même type pour permettre aux employés de déterminer leur nouveau salaire. Un
service Windows Communication Foundation (WCF) peut également avoir recours
au même type.
Si vous utilisez un type pour gérer les calculs, vous ne devez créer l'algorithme
compliqué qu'une seule fois. Après cela, toutes les applications peuvent utiliser cet
algorithme.
Toutefois, dans ce scénario, réutiliser la classe pose problème, car vous devez
également gérer les modifications apportées à la classe. Si un groupe modifie la
classe dans l'application qu'il utilise, ces modifications ne sont pas automatiquement
partagées avec les autres groupes de développeurs. De plus, il est peu probable que
votre organisation partage votre code source avec d'autres organisations. Par conséquent,
vous devez créer un composant qui contient le type. Ainsi, en cas de modifications,
seul le type doit être mis à jour. Il n'est pas nécessaire de mettre à jour les applications
utilisant ce type.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-41

Classe
Dans les langages orientés objet, le concept d'abstraction est important. L'abstraction
est une sorte d'organisation dans laquelle sont regroupées les méthodes, les données
et les fonctions ayant un objectif commun. La création et l'utilisation des classes sont
des composants essentiels de l'abstraction. Une classe représente un modèle d'objet.
Ce modèle définit les attributs de stockage des données, ainsi que les opérations de
manipulation des données. Une classe définit également un ensemble de restrictions
permettant d'autoriser et de refuser l'accès à ses attributs et opérations.
Vous pouvez créer une classe dans tout projet Visual Studio 2010. Vous pouvez
également créer une bibliothèque de classes, qui ne contient par défaut qu'une seule
classe et ses méthodes, mais pas d'interface utilisateur. Si vous créez une classe dans
un projet existant, la classe existe dans l'espace de noms du projet. Si vous créez
une bibliothèque de classes indépendante, Visual Studio 2010 crée un espace de
noms par défaut, puis place la nouvelle classe dans cet espace de noms.
Lorsque vous créez une classe dans un projet, le fichier de classe est compilé dans
un assembly d'application et ne peut pas être réutilisé par d'autres applications. Si
vous créez une bibliothèque de classes, vous créez un composant réutilisable.

Question : quelles sont les différences entre une structure, une classe, une propriété,
une méthode, un objet et un composant ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-42 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Création d'un com


mposant

f Pour créer un compo


osant
1. Dan
ns Visual Studio 2
2010, dans le meenu Fichier, cliqu
uez sur Nouveau projet.
2. Danns la boîte de diallogue Nouveau projet,
p olet gauche, cliquez sur
dans le vo
Visual Basic ou sur Visual C#.
3. Dan
ns le volet centrall, cliquez sur Bib
bliothèque de cla
asses.
4. Danns la zone de textte Nom, indiquezz le nom de la bib
bliothèque de claasses,
puiis cliquez sur OK
K.
5. Dan
ns le menu Généérer, cliquez sur Générer
G la solutiion pour créer le
com
mposant de la nou
uvelle classe.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-43

Modification de l'espace de noms


Dans Visual C#, l'espace de noms est contenu par défaut dans le fichier de classe
et vous pouvez le changer en modifiant le fichier. Dans Visual Basic, un espace de
noms est créé par défaut pour la classe avec le même nom que le projet. Vous
pouvez également utiliser le mot clé Namespace dans Visual Basic, comme suit.

[Visual Basic]
Namespace YourComponentNamespace
Public Class Class1
End Class
End Namespace

f Pour modifier le nom de l'espace de noms du projet dans Visual Basic


1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le projet, puis
cliquez sur Propriétés.
2. Dans l'onglet Application, définissez l'espace de noms racine sur le nouveau
nom de votre composant.

Les espaces de noms fournissent un regroupement logique des classes, utilisable


par tous les langages de développement compatibles .NET. Chaque espace de
noms contient des types que vous pouvez utiliser dans votre application. Les
espaces de noms sont classés hiérarchiquement, ce qui permet de réduire les
conflits de nom et d'augmenter les possibilités de réutilisation du code. Tous les
espaces de noms fournis par Microsoft commencent par Microsoft ou System ;
par exemple, Microsoft.VisualBasic ou System.Web.
Les concepts suivants sont essentiels et seront décrits dans les prochains modules
et travaux pratiques :
• Propriété : spécifie le comportement des objets.
• Constructeur : initialise un objet lors de sa création.
• Champs de stockage : également appelés variables membres, ils fournissent le
stockage des propriétés.
• Méthodes : elles permettent d'effectuer des actions sur les données dans le
type contenu.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-44 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Démoonstration : C
Comment cré
éer une classse dans Visual
Studio
o 2010

Points clés
Dans ceette démonstratio
on, vous découvriirez comment crééer une bibliothèq
que de
classes, puis comment l'aappeler depuis une application Web.
W

Procéd
dure de démonsstration
1. Crééez un projet de b
bibliothèque de classes
c nommé HelloWorld dans la
solu
ution Visual Stud
dio 2010.
a. Démarrer de 10557A-GEN-DEV, pointez
Dans le menu D p sur Touss les
programmes, clliquez sur Microsoft Visual Studiio 2010, puis surr
Microsoft Visua
al Studio 2010.
b. Dans le menu F
Fichier de Visual Studio 2010, cliq
quez sur Nouveau
u site
Web.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-45

c. Dans la boîte de dialogue Nouveau site Web, dans le volet gauche, cliquez sur
Visual Basic ou Visual C#. Dans le volet central, assurez-vous que l'option
Site Web ASP.NET vide est sélectionnée. Dans la liste Emplacement Web,
cliquez sur Système de fichiers. Enfin, dans la zone de texte, entrez
C:\WebSite1, puis cliquez sur OK.
d. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur Solution
WebSite1 (1 projet). Pointez sur Ajouter, puis cliquez sur Nouveau projet.
e. Dans la boîte de dialogue Ajouter un nouveau projet, dans le volet
gauche, cliquez sur Visual Basic ou Visual C#. Dans le volet central,
cliquez sur Bibliothèque de classes. Enfin, dans la zone Nom, entrez
HelloWorld, puis cliquez sur OK.

Remarque : Une classe par défaut (Class1.vb ou Class1.cs) est créée dans l'Explorateur
de solutions et s'ouvre dans la fenêtre de l'éditeur de code.

2. Renommez le fichier Class1.vb ou Class1.cs en Hello.vb ou Hello.cs.


a. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur Class1.vb
ou Class1.cs et cliquez sur Renommer. Changez le texte en Hello.vb ou
Hello.cs, puis appuyez sur Entrée.
b. Dans la boîte de message Microsoft Visual Studio, cliquez sur Oui.
3. Créez une méthode qui renvoie une chaîne sur le fichier de classe.
• Créez une méthode SayHello qui renvoie une chaîne à l'aide du code
suivant.

[Visual Basic]
Function SayHello() As String
Return "Hi from Visual Basic component."
End Function

[Visual C#]
public string SayHello()
{
return "Hi from C# component.";
}
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-46 Introduction au développement Web avec Microsoft® Visual Studio® 2010

4. Générez le projet de bibliothèque de classes.


• Dans le menu Générer de Visual Studio 2010, cliquez sur Générer la
solution.
5. Ajoutez une référence au projet de bibliothèque de classes HelloWorld.
a. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur
C:\...\WebSite1\, puis cliquez sur Ajouter une référence.
b. Dans l'onglet Projets de la boîte de dialogue Ajouter une référence, sous
Nom du projet, assurez-vous que HelloWorld est sélectionné, puis
cliquez sur OK.
c. Dans l'Explorateur de solutions, dans le dossier Bin, vérifiez que
l'assembly HelloWorld.dll a été copié.
d. Dans la fenêtre Microsoft Visual Studio WebSite1, cliquez sur le bouton
Fermer.
e. Dans la boîte de message Microsoft Visual Studio, cliquez sur Oui.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web
W Microsoft® ASP.NET 4-47

Ajoutt de constanttes et de varriables memb


bres à une cllasse

Points clés
Après avvoir créé la classee, ajoutez les constantes et les variiables membres, qui sont
habituellement privées. N N'oubliez pas que l'ajout de consttantes et de variabbles
membrees est un processsus continu, tout au long du développement de vottre classe.
Les variiables membres ssont souvent utiliisées en tant que champs de stock kage pour
les prop
priétés publiques car elles stocken nt les valeurs définnies ou obtenuess par une
propriété. Les exemples suivants illustren nt la classe Custo
omer contenant trois
t
constanntes et variables m
membres privées. L'espace de nom ms a été omis.

[Visua
al Basic]
Public
c Class Custome
er
' The default cr
redit limit
Pr
rivate Const cr
reditLimit As In
nteger = 50000
' Current custom
mer ID (nullable
e)
Pr
rivate customer
rID? As Guid = Nothing
N
' Current custom
mer name
Pr
rivate customer
rName As String = Nothing
End Cl
lass
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-48 Introduction au développement Web avec Microsoft® Visual Studio® 2010

[Visual C#]
class Customer
{
// The default credit limit
private const int creditLimit = 50000;
// Current customer ID (nullable)
private Guid? customerID = null;
// Current customer name
private string customerName = null;
}

Remarque : L'ajout de constantes et de variables membres, de constructeurs, de


propriétés et de méthodes à une classe peut être effectué dans n'importe quel ordre,
et pas uniquement dans l'ordre dans lequel ces éléments sont traités dans cette section.
Toutefois, il est logique de commencer par les variables membres car elles sont souvent
référencées par les constructeurs, les méthodes et les propriétés. N'oubliez pas qu'il s'agit
d'un processus continu et itératif, particulièrement pour les classes vastes, où vous pouvez
avoir des doutes concernant les données et les opérations à ajouter.

Le champ de stockage customerID est un type d'identificateur global unique


(GUID), mais il est également nullable et se distingue par l'utilisation du suffixe « ? ».
Un GUID est un type valeur ; par conséquent, il contient toujours une valeur. Il se
différencie des types référence qui peuvent être définis sur null (ou Nothing dans
Visual Basic), auquel cas ils ne contiennent rien ; ils ne comportent aucune valeur.
Cependant, les types valeur peuvent être rendus nullables. Autrement dit, ils
peuvent être définis sur null ou Nothing, tout comme les types référence. Vous
pouvez ainsi déterminer plus facilement si une valeur initiale à été assignée à une
variable d'un type nullable.

Remarque : Un type de données est un type valeur si sa propre allocation de mémoire


sur la pile contient des données. Un type référence contient un pointeur sur la pile
indiquant un autre emplacement de mémoire sur le tas qui contient les valeurs réelles.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-49

Lors de l'ajout de groupes de code à une classe, particulièrement si un groupe ou


bloc de code est long, il est souvent conseillé de le placer dans une région, qui peut
être réduite ou développée si nécessaire. Pour créer une région, utilisez les mots clés
Region/region, suivis de End Region/endregion. Vous devez préfixer la région avec
un symbole dièse (#), comme indiqué dans l'exemple suivant.

[Visual Basic]
#Region "Member fields"
' The default credit limit
Private Const creditLimit As Integer = 50000
...
#End Region

[Visual C#]
#region Member fields
// The default credit limit
private const int creditLimit = 50000;
...
#endregion

Le code contient souvent des valeurs de constante qui sont utilisées dans un type.
Les valeurs de constante (souvent appelées constantes) permettent également de
donner un nom convivial à certains nombres difficiles à retenir ou sans signification
évidente. Dans de tels cas, vous pouvez améliorer la lisibilité de votre code et faciliter
sa gestion à l'aide des constantes. Une constante est un nom explicite prenant la place
d'un nombre ou d'une chaîne qui ne change pas. Les constantes stockent les valeurs
qui, comme le nom l'indique, restent constantes au cours de l'exécution d'une
application.
Vous déclarez une constante avec l'instruction Const/const, en utilisant les mêmes
indications que pour la création d'un nom de variable. Avec Visual Basic, si Option
Strict a la valeur On, vous devez déclarer explicitement le type de constante.
La portée d'une constante est identique à celle d'une variable déclarée au même
emplacement. Pour créer une constante qui existe dans la portée d'une procédure
particulière, déclarez-la dans cette procédure. Pour créer une constante disponible
dans une application, déclarez-la à l'aide du mot clé Public dans la section des
déclarations de la classe. Bien que les constantes ressemblent aux variables, vous
ne pouvez pas les modifier ou leur assigner de nouvelles valeurs, comme vous le
feriez pour des variables. Les constantes de votre code peuvent être intrinsèques
au modèle d'objet pour les contrôles ou les composants que vous utilisez, ou elles
peuvent être définies par l'utilisateur.

Question : que sont les constantes et les variables membres ?


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-50 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Ajoutt de propriéttés et de métthodes à une


e classe

Points clés
Une foiss que vous avez créé la classe et ajo
outé les variables membres, vous pouvez
p
ajouter les
l propriétés d'acccès public ou priivé à ces variabless membres. Les ex
xemples
suivantss illustrent deux p
propriétés pour laa classe Customerr.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-51

[Visual Basic]
''' <summary>
''' The unique customer ID
''' </summary>
''' <value></value>
''' <returns></returns>
''' <remarks></remarks>
Public Property ID() As Guid?
Get
Return Me.customerID
End Get
Private Set(ByVal value As Guid?)
Me.customerID = value
End Set
End Property

''' <summary>
''' The full customer name
''' </summary>
''' <value></value>
''' <returns></returns>
''' <remarks></remarks>
Public Property Name() As String
Get
Return Me.customerName
End Get
Set(ByVal value As String)
' Null value?
If value Is Nothing Then
Me.customerName = ""
Else
' Only get the first 50 characters
If (value.Length > 50) Then
Me.customerName = value.Substring(0, 50)
Else
Me.customerName = value
End If
End If
End Set
End Property
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-52 Introduction au développement Web avec Microsoft® Visual Studio® 2010

[Visual C#]
/// <summary>
/// The unique customer ID
/// </summary>
public Guid? ID
{
get
{
return this.customerID;
}
private set
{
this.customerID = value;
}
}

/// <summary>
/// The full customer name
/// </summary>
public string Name
{
get
{
return this.customerName;
}
set
{
// Null value?
if (value == null)
this.customerName = "";
else
// Only get the first 50 characters
if (value.Length > 50)
this.customerName = value.Substring(0, 50);
else
this.customerName = value;
}
}
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-53

Les deux propriétés en lecture-écriture, ID et Name, sont publiques pour tous les
utilisateurs de la classe. Notez que les accesseurs Get et les méthodes setter, utilisés
pour définir et obtenir la valeur de la propriété ou le champ de stockage de la
propriété, peuvent avoir un modificateur d'accès différent de celui de la propriété
proprement dite. Pour la propriété Name, aucun modificateur d'accès n'a été spécifié
pour l'accesseur Get ou la méthode setter ; le modificateur d'accès à la propriété
public est donc appliqué. Toutefois, pour la propriété ID, seul l'accesseur Get hérite
du modificateur d'accès de la propriété, tandis que la méthode setter est privée. La
méthode setter étant privée, vous pouvez uniquement définir la propriété à partir
de la classe. Cela permet de garantir que l'ID n'est pas modifié après l'instanciation
de la classe.

Ajout de méthodes pour une classe


De nombreuses classes nécessitent au moins une méthode pour réaliser les opérations
internes sur les données. À cet effet, vous pouvez utiliser les propriétés, mais il ne s'agit
pas de l'objectif ni de la meilleure pratique. Les exemples suivants illustrent une seule
méthode pour la classe Customer.

[Visual Basic]
''' <summary>
''' Returns the total order amount for the current customer until
today
''' </summary>
''' <param name="startDate">Start accumulating from this date</param>
''' <returns>The total order amount</returns>
''' <remarks></remarks>
Public Function GetTotalOrderAmount(ByVal startDate As DateTime) As
Double
' Get total order amount from database
Return dbObject.GetOrderTotal(ID, startDate)
End Function

[Visual C#]
/// <summary>
/// Returns the total order amount for the current customer until
today
/// </summary>
/// <param name="startDate">Start accumulating from this date</param>
/// <returns>The total order amount</returns>
public double GetTotalOrderAmount(DateTime startDate)
{
// Get total order amount from database
return dbObject.GetOrderTotal(ID, startDate);
}
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-54 Introduction au développement Web avec Microsoft® Visual Studio® 2010

L'objet dbObject est un objet privé qui accède à la table Customers de la base de
données, en transmettant l'ID du client et la date de début pour le cumul du montant
de commande, puis en renvoyant le montant total de commande du client.
Si vous n'avez pas besoin de contrôler l'affectation de noms du champ de stockage
ou la façon dont la valeur est assignée à un stockage dans une propriété, vous pouvez
utiliser les propriétés implémentées automatiquement. Ces dernières vous permettent
d'écrire votre code plus rapidement et de le rendre plus lisible. L'exemple suivant
illustre une propriété implémentée automatiquement.

[Visual Basic]
Public Property Name() As String

[Visual C#]
public string Name { get; set; }

Lorsque le compilateur voit le code, il génère automatiquement le code du champ


de stockage et celui des accesseurs Get et des méthodes setter.

La différence entre les propriétés et les méthodes est importante et doit être
évidente dans leurs noms ; par exemple, Name pour une propriété et GetName
pour une méthode. De manière générale, faites précéder une méthode d'un verbe.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web
W Microsoft® ASP.NET 4-55

Ajoutt de construccteurs de classe

Points clés
Toute cllasse, sauf si elle eest rendue abstraiite, nécessite au moins
m un construccteur
pour insstancier une instaance de la classe. Les
L classes abstraaites ne peuvent pas p être
instanciiées et sont initialeement créées commme type génériqu ue à partir duqueel vous
devez dériver vos proprees classes ou en héériter. Un constru ucteur sert à instan
ncier et
initialiseer la classe. Les ex
xemples suivants illustrent deux co onstructeurs pourr la classe
Custom mer.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-56 Introduction au développement Web avec Microsoft® Visual Studio® 2010

[Visual Basic]
''' <summary>
''' Default parameterless constructor
''' </summary>
''' <remarks></remarks>
Public Sub New()
' Initialize member backing fields with default values
Me.ID = Guid.NewGuid()
End Sub

Public Sub New(ByVal id As Guid?)


' Initialize member backing fields with passed values
Me.ID = id
End Sub

[Visual C#]
/// <summary>
/// Default parameterless constructor
/// </summary>
public Customer()
{
// Initialize member backing fields with default values
this.ID = Guid.NewGuid();
}

public Customer(Guid? id)


{
// Initialize member backing fields with passed values
this.ID = id;
}

Notez comment les constructeurs assignent les valeurs aux champs de stockage via
les propriétés, et non directement. Il est recommandé de procéder de cette façon car
les propriétés peuvent contenir une logique visant à restreindre les valeurs pouvant
être assignées aux champs de stockage. Vous pouvez ajouter la même logique aux
constructeurs, ce qui dupliquerait toutefois le code.
Si plusieurs développeurs utilisent le même type de code, et potentiellement de
grandes parties de code (tels les constructeurs génériques), il est conseillé de créer
et de distribuer un extrait de code. Ce dernier est disponible à partir des éditeurs
de texte et des éditeurs de code dans Visual Studio, à l'emplacement correspondant.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web
W Microsoft® ASP.NET 4-57

Accèss aux composants d'un fo


ormulaire Web
W ASP.NET

Points clés
Une foiss que vous avez créé des types pub blics dans un commposant, vous pou uvez
rendre ces
c composants d disponibles pour d'autres
d programm mes. Pour ce fairee, vous
devez d'abord référencer le composant DL LL. (Ce n'est pas forcément
f un commposant
.NET Frramework ; il peut s'agir d'un autree projet de la soluttion ou d'un DLL L de
modèle COM (Componeent Object Model))). Ensuite, pour accéder a aux méthhodes de
la classee, vous devez instaancier l'objet de classe
c en référençaant son espace dee noms et
son nom m de classe.

Référen
ncement de la D
DLL
Pour poouvoir utiliser les types dans un co
omposant, vous devez
d d'abord ajo
outer une
référencce au projet du coomposant.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-58 Introduction au développement Web avec Microsoft® Visual Studio® 2010

f Pour ajouter une référence au projet du composant


Si votre solution contient à la fois l'application Web et le projet du composant,
vous pouvez ajouter une référence au projet.
1. Ouvrez Visual Studio 2010.
2. Dans le menu Fichier, cliquez sur Ouvrirun projet.
3. Dans la boîte de dialogue Ouvrir un projet, dans la zone Nom, tapez
D:\Labfiles\Starter\M4\VB\CustomerManagement.sln.
4. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur
D:\Labfiles\Starter\M4\VB\CustomerManagement, puis cliquez sur
Ajouter une référence.
5. Dans la boîte de dialogue Ajouter une référence, dans l'onglet Projets,
double-cliquez sur le projet de bibliothèque de classes, puis cliquez sur OK.
Le composant est ajouté au dossier References dans l'Explorateur de solutions.
La référence rend l'espace de noms du composant accessible à l'application.

Remarque : Si vous conservez le projet d'application Web et le projet de bibliothèque


de classes dans la même solution, la référence reflète automatiquement les modifications
que vous apportez au composant.

f Pour ajouter une référence à la DLL du composant


1. Ouvrez votre projet dans Visual Studio 2010.
2. Dans l'Explorateur de solutions, cliquez sur le projet avec le bouton droit, puis
cliquez sur Ajouter une référence.
3. Dans la boîte de dialogue Ajouter une référence, affichez les onglets suivants :
• .NET. Affiche les composants faisant partie de la bibliothèque de classes
du .NET Framework et autres composants inscrits.
• COM. Affiche les DLL COM inscrits sur votre ordinateur.
• Projet. Affiche la liste de tous les composants réutilisables qui ont été
créés à partir de projets locaux.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-59

• Parcourir. Si un composant n'a pas été inscrit en tant que composant .NET
ou COM, vous pouvez accéder à l'emplacement du composant en question.
• Récent. Affiche la liste des composants récemment ajoutés aux projets sur
votre ordinateur.
4. Sélectionnez le composant requis, puis cliquez sur OK.
Le composant est ajouté au dossier References (WAP) ou au dossier Bin (WSP)
dans l'Explorateur de solutions. La référence rend l'espace de noms du composant
accessible à l'application.

Instanciation de l'objet
Après avoir ajouté une référence au composant, vous pouvez instancier
l'objet de classe. Les lignes de code suivantes déclarent une nouvelle variable
nommée currentCustomer, de la classe Customer, dans l'espace de noms
ComponentNamespace.

[Visual Basic]
Dim currentCustomer As New ComponentNamespace.Customer

[Visual C#]
ComponentNamespace.Customer currentCustomer = new
ComponentNamespace.Customer();

Vous pouvez également utiliser l'instruction using (Visual C#) ou Imports


(Visual Basic) pour importer l'espace de noms, puis instancier la classe
directement. Le code suivant illustre cette opération.

[Visual Basic]
Imports ComponentNamespace
...
Dim currentCustomer As New Customer

[Visual C#]
using ComponentNamespace;
...
Customer currentCustomer = new Customer();
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-60 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Accès à l'objet
Une fois l'objet instancié, vous pouvez l'utiliser comme tout autre objet de votre
projet. Vous disposez de toutes les méthodes et propriétés publiques de la classe. Par
exemple, le code suivant transmet un paramètre à la fonction GetTotalOrderAmount
de la classe Customer et assigne la valeur renvoyée à la variable total.

[Visual Basic]
Dim total as Double = currentCustomer.GetTotalOrderAmount(startDate)

[Visual C#]
double total = currentCustomer.GetTotalOrderAmount(startDate);
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web
W Microsoft® ASP.NET 4-61

Leçon 4
Gestion des
d événements relatifs
r au
ux pages

Lorsqu'une page ASP.NE ET est exécutée, la


l page passe par un cycle de vie au a cours
duquel elle
e effectue une ssérie d'étapes de trraitement. Ces étappes incluent l'initiialisation
de la paage et des contrôlles, l'instanciation
n des contrôles, laa restauration et la
conservvation de l'état, l'ex
xécution du codee de gestionnaire d'événements
d et l''affichage.
Vous deevez comprendree le cycle de vie de la page pour po ouvoir écrire le co ode
correspo ondant à la phasee de cycle de vie appropriée
a et obteenir l'effet désiré. En
E outre,
si vous développez des ccontrôles personn nalisés, vous deveez connaître le cyycle de
vie de laa page pour correectement initialiseer les contrôles, remplir
r les proprriétés de
contrôlee avec les donnéees d'état d'affichagge et exécuter le code de comporttement
de contrrôle.
Dans ceette leçon, vous appprendrez à utiliser les gestionnaiires d'événementts relatifs
aux pagges. Vous découvrrirez le cycle de vie
v de la page, le processus
p de pub blication
et l'ordrre des événementss. Vous apprendrez également à uttiliser la propriétéé
Page.IsP PostBack pour co
ontrôler l'exécutio
on du code de conntrôle lors de la demande
d
initiale de
d la page.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-62 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Objectifs de la leçon
Au terme de cette leçon, vous serez à même d'effectuer les tâches suivantes :
• décrire un cycle de vie des événements relatifs aux pages ;
• décrire le processus de publication ;
• gérer les publications ;
• expliquer comment gérer les événements relatifs aux pages.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web
W Microsoft® ASP.NET 4-63

Cycle de vie des é


événements relatifs aux pages
p

Points clés
Lors de la demande d'un ne page ASP.NET T, une série d'évén
nements relatifs aux
a pages
surviennnent. Ces événemments se produiseent toujours danss le même ordre ; c'est ce
que l'on
n appelle le cycle de vie des événem
ments relatifs aux
x pages.

Cycle de
d vie des événements relatifss aux pages
ux pages inclut lees événements suivants,
Le cyclee de vie des événeements relatifs au
qui survviennent dans l'ordre ci-dessous :
1. Pag
ge_Init. Se produ ous les contrôles ont été initialiséss.
uit une fois que to
2. Pag
ge_Load. Se prod duit après l'initialiisation des contrô
ôles et le chargem
ment de
tou
us les contrôles.
3. Pagge_LoadComplette. Se produit aprrès le chargement de tous les conttrôles de
la page.
p Vous pouveez utiliser cet évén
nement pour fairee référence à des valeurs
ou assigner des valeeurs à tous les con
ntrôles.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-64 Introduction au développement Web avec Microsoft® Visual Studio® 2010

4. Événements de contrôle. Consistent en des événements de modification (par


exemple, Textbox1_Changed) et des événements d'action (par exemple,
Button1_Click).
5. Page_Unload. Se produit lorsque la page est fermée ou que le contrôle est
transmis à une autre page.

La fin du cycle de vie des événements relatifs aux pages supprime la page de la
mémoire.
La plupart des événements de contrôle ne se produisent pas tant que le formulaire Web
n'est pas publié sur le serveur. Par exemple, les événements Change sont gérés dans
un ordre aléatoire sur le serveur une fois que le formulaire est publié. À l'inverse, les
événements Click peuvent entraîner l'envoi immédiat du formulaire au serveur.
Par exemple, si un utilisateur entre un texte dans plusieurs contrôles sur un
formulaire, puis qu'il clique sur le bouton Envoyer, les événements Change
associés aux contrôles de texte ne seront pas traités tant que le formulaire
n'est pas envoyé au serveur en réponse à l'événement Click.

Question : quels sont les événements de cycle de vie de page les plus fréquemment
utilisés ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web
W Microsoft® ASP.NET 4-65

Proce
essus de publication

Points clés
Pour coomprendre le processus de publicaation, vous devezz connaître le
fonctionnnement des form mulaires dans ASP.NET, la manièrre de n'exécuter
le code du gestionnaire dd'événements Page_Load que lorsqu'une page est
affichéee pour la premièree fois, et la définition des contrôlees pour effectuer
une pub blication immédiaate sur le serveurr.
• La première
p mande une page au serveur, le tesst
fois qu'un utilisateur dem
de Page.IsPostBack
P k dans l'événemen nt Page_Load estt effectué et le cod
de
du bloc est exécuté.
• Le serveur
s renvoie aalors la page à l'uttilisateur.
• Lorrsque l'utilisateurr modifie la sélecttion dans la zone de liste, puis qu''il
cliq
que sur le bouton n Envoyer, les infoformations sont renvoyées au servveur.
• Le serveur
s peut déteerminer qu'il s'agiit d'une page en cours
c de publicattion
sur lui-même. Par co
onséquent, le testt de Page.IsPostB Back dans l'événeement
ge_Load échoue et le code du bloc n'est pas exécuté.
Pag
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-66 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• À la place, les gestionnaires d'événements pour les contrôles du formulaire


(la zone de liste et le bouton) sont exécutés. Dans ce scénario, le gestionnaire
d'événements de la zone de liste modifie l'étiquette de façon à refléter la nouvelle
sélection de la zone de liste.
• Le serveur renvoie alors les informations mises à jour au client. L'utilisateur voit
la même page, mais l'étiquette a chargé et reflète la sélection de la zone de liste.
• Si vous souhaitez envoyer immédiatement la nouvelle valeur de la zone de liste
au serveur, sans attendre que l'utilisateur clique sur le bouton Envoyer, vous
pouvez définir la propriété AutoPostBack du contrôle de zone de liste sur True.
• Lorsque la propriété AutoPostBack est définie sur True, les informations sont
envoyées au serveur dès que l'utilisateur modifie la sélection dans la zone de liste.
• Le serveur met à jour l'étiquette de façon à refléter la modification, puis renvoie
les informations mises à jour au client.

Question : quelle propriété peut être utilisée dans tous les événements, et pas
seulement l'événement Load ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web
W Microsoft® ASP.NET 4-67

Gestio
on des publications

Points clés
L'événement Page_Load d est exécuté sur toutes les deman
ndes d'une page, qu'il
q
s'agisse de la première d
demande ou d'unee publication.

Propriéété Page.IsPosttBack
Puisquee l'événement Pag ge_Load est exéccuté à chaque dem mande de page, tout le
code dee cet événement ssera exécuté chaq que fois que la paage sera demandéée.
Toutefo
ois, si vous utilisezz des événements de publication, il n'est pas nécesssaire
de réexéécuter tout le cod
de. Vous pouvez utiliser
u la propriéété Page.IsPostBa
ack
pour gaarantir que le codde n'est exécuté quue lors de la dem
mande initiale de la
l page.
Le codee suivant illustre ccette opération.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-68 Introduction au développement Web avec Microsoft® Visual Studio® 2010

[Visual Basic]
Protected Sub Page_Load(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles Me.Load

If Not Page.IsPostBack Then


' Executes only on initial page load.
End If

' This code executes on every request.


...
End Sub

[Visual C#]
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
// Executes only on initial page load.
}

// This code executes on every request.


...
}
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web
W Microsoft® ASP.NET 4-69

Démoonstration : ccomment gé
érer les événe
ements relattifs aux
pagess

Points clés
Dans ceette démonstration n, vous afficherezz l'ordre des événeements relatifs au
ux pages,
y comprris les gestionnairres d'événements et la sortie de la page.
p

Procéd
dure de démonsstration

f Pour afficher le codee simple et le gestionnaire


g d'é
événements
1. Ouvvrez la solution E
EventOrder à parrtir du dossier D:\Demofiles\M4\VB ou
D:\
\Demofiles\M4\\CS.
2. Exéécutez l'applicatio
on Web.
3. Bassculez vers Visual Studio 2010, puiis affichez le code simple et le gestiionnaire
d'évvénements Page__Unload.
4. Bassculez vers Intern
net Explorer et véérifiez l'événemen
nt Postback.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-70 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Dans la démonstration suivante, vous verrez l'ordre des événements relatifs aux
pages, y compris les gestionnaires d'événements et la sortie de la page. Vous pouvez
effectuer ces tâches à l'aide de Visual Basic ou Visual C#.
Il est important de comprendre l'ordre dans lequel les événements sont déclenchés,
et lorsque vous devez faire la différence entre une publication et une non-publication
de page.

Remarque : Le fichier solution EventOrder.sln du dossier D:\Demofiles\M4\CS ou


D:\Demofiles\M4\VB contient une solution complète pour cette démonstration.

f Pour afficher l'ordre des événements relatifs aux pages


1. Ouvrez la solution EventOrder à partir du dossier D:\Demofiles\M4\VB ou
D:\Demofiles\M4\CS.
• Dans le menu Démarrer de 10557A-GEN-DEV, pointez sur Tous les
programmes, cliquez sur Microsoft Visual Studio 2010, puis sur
Microsoft Visual Studio 2010.
• Dans le menu Fichier de Visual Studio 2010, cliquez sur Ouvrir un projet.
• Dans la boîte de dialogue Ouvrir un projet, dans la zone Nom de fichier,
tapez D:\Demofiles\M4\CS\EventOrder.sln ou
D:\Demofiles\M4\VB\EventOrder.sln, puis cliquez sur Ouvrir.
2. Exécutez l'application Web.
• Dans le menu Déboguer de Visual Studio 2010, cliquez sur Exécuter sans
débogage.

Remarque : Dans la fenêtre Internet Explorer http://localhost:49241/EventOrder/, tous


les événements ont une sortie vers l'étiquette sur la gauche.

3. Basculez vers Visual Studio 2010, puis affichez le code simple et le


gestionnaire d'événements Page_Unload.
• Basculez vers la fenêtre Visual Studio 2010 en cliquant sur le bouton
Visual Studio dans la barre des tâches.
• Dans l'Explorateur de solutions, développez Default.aspx, cliquez avec
le bouton droit sur Default.aspx.vb ou Default.aspx.cs, puis cliquez sur
Ouvrir.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-71

• Dans la fenêtre Default.aspx.vb ou Default.aspx.cs, affichez le code simple


et le gestionnaire d'événements Page_Unload, qui a également une sortie
vers l'étiquette, mais qui n'apparaît pas sur la page affichée car le rendu de
sortie est terminé à ce stade.

[Visual Basic]
Protected Sub Page_Unload(ByVal sender As Object, ByVal e As
System.EventArgs) Handles Me.Unload
If Not Me.IsPostBack Then
NonPostBackEventLabel.Text &= "Unload event<br />"
Else
PostBackEventLabel.Text &= "Unload event<br />"
End If
End Sub

[Visual C#]
protected void Page_Unload(object sender, EventArgs e)
{
if (!this.IsPostBack)
NonPostBackEventLabel.Text += "Unload event";
else
PostBackEventLabel.Text += "Unload event";
}

4. Basculez vers Internet Explorer et vérifiez l'événement Postback.


a. Cliquez sur le bouton Internet Explorer dans la barre des tâches.
b. Dans la fenêtre Internet Explorer
http://localhost:49241/EventOrder/, cliquez sur le bouton Publication.
c. Dans la fenêtre Microsoft Visual Studio EventOrder, cliquez sur le bouton
Fermer.
d. Dans la fenêtre Internet Explorer
http://localhost:49241/EventOrder/default.aspx, cliquez sur le bouton
Fermer.

Question : décrivez l'utilisation du bouton Événements dans la fenêtre Propriétés.


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-72 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Atelier pratique
p : Ajout de
e fonction
nnalités à un
formulaire Web M Microsoftt ASP.NETT

Remarq que : dans cet ateliier pratique, vous pouvez


p exécuter le
es tâches en utilisa
ant le
langage de programmatio on Visual Basic ou Visual
V C#. Si vous utilisez Visual Basiic comme
langage de programmatio on, reportez-vous auxa instructions fo ournies dans la section 1 du
docume ent de l'atelier prattique correspondant. Si vous utilisez Visual C# comme langage
de progrrammation, reporte ez-vous aux instrucctions fournies danns la section 2 du document
d
de l'ateliier pratique corresspondant.

Introdu
uction
Dans ceet atelier pratiquee, vous implémen nterez le code et lees procédures
événemmentielles sur un ssite Web ASP.NET T, et créerez un composant
c que vous
référenccerez à partir de ll'application Web
b. Vous implémen nterez également des
événemments de contrôle serveur et relatifss aux pages sur lee site Web.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-73

Objectifs
Au terme de cet atelier pratique, vous serez à même d'effectuer les tâches suivantes :
• implémenter du code dans une application Web ;
• créer des procédures d'événement ;
• créer un composant d'entité, puis le référencer à partir d'une application Web ;
• gérer les événements de contrôle serveur et ceux relatifs aux pages.

Configuration de l'atelier pratique


Pour cet atelier pratique, vous utiliserez l'environnement d'ordinateurs virtuels
disponible. Avant de commencer l'atelier pratique, vous devez :
• Démarrer l'ordinateur virtuel 10557A-GEN-DEV, puis vous connecter à l'aide
des informations d'identification suivantes :
• Nom d'utilisateur : Stagiaire
• Mot de passe : Pa$$w0rd
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-74 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Scéna
ario de l'ateliier pratique

Vous êtes développeur cchez Contoso, Ltd d, une grande enttreprise disposan
nt d'une
base de clients mondialee. Votre entreprise utilise des appllications Microsoft .NET
pour crééer, personnaliseer et gérer ses info
ormations client.
Elle utillise un site Web d
distinct pour permmettre une interaaction rapide et siimple
avec less clients. L'organisation souhaite rendre son site Web
W dynamique ett
permetttre aux utilisateurrs d'entrer et d'en
nregistrer les info
ormations relativees aux
clients avec
a une durée m
minimale de boucclage.
Pour cela, vous devez atttacher le code req
quis à l'interface utilisateur
u qui peermet à
l'applicaation de répondre aux actions dess utilisateurs et au
utres événementss. Vous
devez éggalement vous asssurer que l'appliication atteint le niveau
n de performmances
spécifié en ajoutant le co
ode dans un fichier de classe codee-behind précomp pilé,
économ misant ainsi un tem
mps de traitemen nt considérable.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-75

Section 1 : Visual Basic


Exercice 1 : Implémentation de code dans une
application Web
Dans cet exercice, les tâches principales sont les suivantes :
1. Ouvrir un site Web ASP.NET existant.

2. Ouvrez le fichier code-behind d'un formulaire Web existant.

f Tâche 1 : ouvrir un site Web existant


• Ouvrez une session sur l'ordinateur virtuel 10557A-GEN-DEV avec le nom
d'utilisateur Stagiaire et le mot de passe Pa$$w0rd.
• Ouvrez Visual Studio 2010.
• Ouvrez la solution CustomerManagement située dans le dossier
D:\Labfiles\Starter\M4\VB.

f Tâche 2 : ouvrir le fichier code-behind d'un formulaire Web existant


• Ouvrez le fichier code-behind du formulaire Web InsertCustomer, à l'aide de
la commande de menu contextuel Afficher le code.

Résultats : au terme de cet exercice, vous aurez ouvert le site Web


CustomerManagement existant et le fichier code-behind du formulaire Web
InsertCustomer.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-76 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Exercice 2 : Création de procédures événementielles


Dans cet exercice, les tâches principales sont les suivantes :
1. Créer une procédure événementielle pour l'événement Click du bouton Insert.
2. Créer une procédure événementielle pour l'événement Click du bouton Cancel.
3. Créer une procédure événementielle pour l'événement Page_Load.
4. Créer une procédure événementielle pour l'événement Page_LoadComplete.
5. Créer une procédure événementielle pour l'événement Page_Unload.

f Tâche 1 : créer une procédure événementielle pour l'événement Click


du bouton Insérer
• Ouvrez le formulaire Web InsertCustomer en mode Création et créez une
procédure événementielle pour l'événement Click du bouton Insérer en
double-cliquant sur le contrôle Button.

Remarque : La procédure événementielle initiale pour l'événement Click du contrôle


CustomerInsertButton est ajoutée dans la fenêtre de code.

f Tâche 2 : créer une procédure événementielle pour l'événement Click


du bouton Annuler
• Ouvrez le formulaire Web InsertCustomer en mode Création et créez une
procédure événementielle pour l'événement Click du bouton Annuler. Pour ce
faire, double-cliquez sur la zone en regard de l'événement Click dans la fenêtre
Propriétés, avec le contrôle Button sélectionné dans le concepteur.

Remarque : la procédure événementielle initiale pour l'événement Click du contrôle


CustomerCancelButton est ajoutée à la classe dans la fenêtre de code.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-77

f Tâche 3 : créer une procédure événementielle pour l'événement


Page_Load
• Créer une procédure événementielle pour l'événement Page_Load.

Protected Sub Page_Load(ByVal sender As Object, ByVal e As


System.EventArgs) Handles Me.Load

End Sub

f Tâche 4 : créer une procédure événementielle pour l'événement


Page_LoadComplete
• Créer une procédure événementielle pour l'événement Page_LoadComplete.

Protected Sub Page_LoadComplete(ByVal sender As Object, ByVal e As


System.EventArgs) Handles Me.LoadComplete

End Sub

f Tâche 5 : créer une procédure événementielle pour l'événement


Page_Unload
• Créer une procédure événementielle pour l'événement Page_Unload.

Protected Sub Page_Unload(ByVal sender As Object, ByVal e As


System.EventArgs) Handles Me.Unload

End Sub

Résultats : Au terme de cet exercice, vous aurez créé des procédures événementielles
pour les contrôles Button et les événements Page_Load, Page_LoadComplete et
Page_Unload.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-78 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Exercice 3 : Création d'un composant d'entité


Dans cet exercice, les tâches principales sont les suivantes :
1. Créer un composant d'entité.
2. Ajouter des champs membres de classe.
3. Ajouter des propriétés.
4. Ajouter les constructeurs.
5. Référencer le projet CustomerManagementEntities à partir du projet
CustomerManagement.
6. Ajouter une déclaration de membre client.

f Tâche 1 : créer un composant d'entité


• Créez le projet de bibliothèque de classes CustomerManagementEntities à
l'aide de l'élément de projet Bibliothèque de classes dans la boîte de dialogue
Ajouter un nouveau projet. Placez le nouveau projet dans le dossier
D:\Labfiles\Starter\M4\VB.

Remarque : Le projet de bibliothèque de classes CustomerManagementEntities est


ajouté à la solution.

• Renommez le fichier de classe par défaut Class1.vb en Customer.vb.

f Tâche 2 : Ajouter des champs membres de classe


• Dans la classe Customer, ajoutez une région nommée Class member fields,
directement sous la déclaration de classe.

#Region "Class member fields"


#End Region

• Dans la classe Customer, dans la région Class member fields, ajoutez un


champ membre privé nommé customerFirstName et de type String pour le
prénom du client et initialisez-le sur Nothing.

Private customerFirstName As String = Nothing


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-79

• Dans la classe Customer, dans la région Class member fields, ajoutez un


champ membre privé nommé customerLastName et de type String pour le
nom du client et initialisez-le sur Nothing.

Private customerLastName As String = Nothing

• Dans la classe Customer, dans la région Class member fields, ajoutez un


champ membre privé nommé customerAddress et de type String pour
l'adresse du client et initialisez-le sur Nothing.

Private customerAddress As String = Nothing

• Ajoutez les champs de stockage restants en utilisant un extrait de code nommé


Customer class backing fields. L'extrait de code a été fourni par le développeur
principal et il est placé dans le dossier Mes extraits de code. Cliquez avec le bouton
droit sur la ligne suivant la déclaration du champ de stockage customerAddress
et insérez l'extrait en cliquant sur Insérer un extrait.

Private customerZipCode As String = Nothing


Private customerCity As String = Nothing
Private customerState As String = Nothing
Private customerCountryID As Guid? = Nothing
Private customerPhone As String = Nothing
Private customerEmailAddress As String = Nothing
Private customerWebAddress As String = Nothing
Private customerCreditLimit As Integer = 0
Private customerNewsSubscriber As Boolean = False
Private customerCreatedDate As DateTime? = Nothing
Private customerCreatedBy As String = Nothing
Private customerModifiedDate As DateTime? = Nothing
Private customerModifiedBy As String = Nothing

f Tâche 3 : ajouter des propriétés


• Dans la classe Customer, ajoutez une région nommée Properties, sous la
région Class member fields.

#Region "Properties"
#End Region
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-80 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Dans la classe Customer, dans la région Properties, ajoutez la propriété


publique implémentée automatiquement nommée ID de type nullable Guid.

''' <summary>
''' The unique customer ID
''' </summary>
''' <value></value>
''' <returns></returns>
''' <remarks></remarks>
Public Property ID() As Guid?

• Dans la classe Customer, dans la région Properties, ajoutez une propriété


publique nommée FirstName de type String, qui définit et obtient le champ
de stockage membre privé nommé customerFirstName. Assurez-vous que sa
longueur n'excède pas 50 caractères en utilisant les lignes de code suivantes.

''' <summary>
''' The customer first name
''' </summary>
''' <value></value>
''' <returns></returns>
''' <remarks></remarks>
Public Property FirstName As String
Get
Return Me.customerFirstName
End Get

Set(ByVal value As String)


' Null value?
If Value Is Nothing Then
Me.customerFirstName = String.Empty
Else
' Only get the first 50 characters
If (Value.Length > 50) Then
Me.customerFirstName = value.Substring(0, 50)
Else
Me.customerFirstName = value
End If
End If
End Set
End Property
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-81

• Dans la classe Customer, dans la région Properties, ajoutez une propriété


publique nommée LastName de type String, qui définit et obtient le champ
de stockage membre privé nommé customerLastName. Assurez-vous que sa
longueur n'excède pas 30 caractères en utilisant les lignes de code suivantes.

''' <summary>
''' The customer last name
''' </summary>
''' <value></value>
''' <returns></returns>
''' <remarks></remarks>
Public Property LastName As String
Get
Return Me.customerLastName
End Get

Set(ByVal value As String)


' Null value?
If value Is Nothing Then
Me.customerLastName = String.Empty
Else
' Only get the first 30 characters
If (value.Length > 30) Then
Me.customerLastName = value.Substring(0, 30)
Else
Me.customerLastName = value
End If
End If
End Set
End Property
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-82 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Dans la classe Customer, dans la région Properties, ajoutez une propriété


publique nommée Address de type String, qui définit et obtient le champ
de stockage membre privé nommé customerAddress. Assurez-vous que sa
longueur n'excède pas 50 caractères en utilisant les lignes de code suivantes.

''' <summary>
''' The customer address, including street name, house number and
floor
''' </summary>
''' <value></value>
''' <returns></returns>
''' <remarks></remarks>
Public Property Address As String
Get
Return Me.customerAddress
End Get

Set(ByVal value As String)


' Null value?
If value Is Nothing Then
Me.customerAddress = String.Empty
Else
' Only get the first 50 characters
If (value.Length > 50) Then
Me.customerAddress = value.Substring(0, 50)
Else
Me.customerAddress = value
End If
End If
End Set
End Property
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-83

• Ajoutez les propriétés restantes dans la région Properties à l'aide d'un extrait
de code nommé Customer class properties. L'extrait de code a été fourni par
le développeur principal et il est placé dans le dossier Mes extraits de code.
Cliquez avec le bouton droit sur la ligne suivant la déclaration de la propriété
Address et insérez l'extrait en cliquant sur Insérer un extrait.

''' <summary>
''' The customer zip code or postal code
''' </summary>
''' <value></value>
''' <returns></returns>
''' <remarks></remarks>
Public Property ZipCode() As String
Get
Return Me.customerZipCode
End Get
Set(ByVal value As String)
' Null value?
If value Is Nothing Then
Me.customerZipCode = ""
Else
' Only get the first 10 characters
If (value.Length > 10) Then
Me.customerZipCode = value.Substring(0, 10)
Else
Me.customerZipCode = value
End If
End If
End Set
End Property

''' <summary>
''' The name of the city in which the customer lives
''' </summary>
''' <value></value>
''' <returns></returns>
''' <remarks></remarks>

(Pour la suite du code, reportez-vous à sur la page suivante.)


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-84 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Public Property City() As String


Get
Return Me.customerCity
End Get
Set(ByVal value As String)
' Null value?
If value Is Nothing Then
Me.customerCity = ""
Else
' Only get the first 30 characters
If (value.Length > 30) Then
Me.customerCity = value.Substring(0, 30)
Else
Me.customerCity = value
End If
End If
End Set
End Property

''' <summary>
''' The name of the state or region in which the customer lives
''' </summary>
''' <value></value>
''' <returns></returns>
''' <remarks></remarks>
Public Property State() As String
Get
Return Me.customerState
End Get
Set(ByVal value As String)
' Null value?
If value Is Nothing Then
Me.customerState = ""
Else
' Only get the first 30 characters
If (value.Length > 30) Then
Me.customerState = value.Substring(0, 30)
Else
Me.customerState = value
End If
End If
End Set
End Property

(Pour la suite du code, reportez-vous à sur la page suivante.)


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-85

''' <summary>
''' The ID of the country in which the customer lives
''' </summary>
''' <value></value>
''' <returns></returns>
''' <remarks></remarks>
Public Property CountryID() As Guid?
Get
Return Me.customerCountryID
End Get
Set(ByVal value As Guid?)
Me.customerCountryID = value
End Set
End Property

''' <summary>
''' The customer phone number
''' </summary>
''' <value></value>
''' <returns></returns>
''' <remarks></remarks>
Public Property Phone() As String
Get
Return Me.customerPhone
End Get
Set(ByVal value As String)
' Null value?
If value Is Nothing Then
Me.customerPhone = ""
Else
' Only get the first 30 characters
If (value.Length > 30) Then
Me.customerPhone = value.Substring(0, 30)
Else
Me.customerPhone = value
End If
End If
End Set
End Property

''' <summary>
''' The customer e-mail address
''' </summary>
''' <value></value>
''' <returns></returns>
''' <remarks></remarks>

(Pour la suite du code, reportez-vous à sur la page suivante.)


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-86 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Public Property EmailAddress() As String


Get
Return Me.customerEmailAddress
End Get
Set(ByVal value As String)
If (value Is Nothing) Then
Me.customerEmailAddress = ""
Else
' Only get the first 50 characters
If (value.Length > 50) Then
Me.customerEmailAddress = value.Substring(0, 50)
Else
Me.customerEmailAddress = value
End If
End If
End Set
End Property

''' <summary>
''' The customer web address
''' </summary>
''' <value></value>
''' <returns></returns>
''' <remarks></remarks>
Public Property WebAddress() As String
Get
Return Me.customerWebAddress
End Get
Set(ByVal value As String)
If (value Is Nothing) Then
Me.customerWebAddress = ""
Else
' Only get the first 80 characters
If (value.Length > 80) Then
Me.customerWebAddress = value.Substring(0, 80)
Else
Me.customerWebAddress = value
End If
End If
End Set
End Property

(Pour la suite du code, reportez-vous à sur la page suivante.)


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-87

''' <summary>
''' The current credit limit of the customer
''' </summary>
''' <value></value>
''' <returns></returns>
''' <remarks></remarks>
Public Property CreditLimit() As Integer
Get
Return Me.customerCreditLimit
End Get
Set(ByVal value As Integer)
' Negative value?
If value < 0 Then
Me.customerCreditLimit = 0
Else
Me.customerCreditLimit = value
End If
End Set
End Property

''' <summary>
''' Does the customer subscriber to news?
''' </summary>
''' <value></value>
''' <returns></returns>
''' <remarks></remarks>
Public Property NewsSubsriber() As Boolean
Get
Return Me.customerNewsSubscriber
End Get
Set(ByVal value As Boolean)
Me.customerNewsSubscriber = value
End Set
End Property

''' <summary>
''' The date the customer was created in the system
''' </summary>
''' <value></value>
''' <returns></returns>
''' <remarks></remarks>

(Pour la suite du code, reportez-vous à sur la page suivante.)


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-88 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Public Property CreatedDate() As DateTime?


Get
Return Me.customerCreatedDate
End Get
Private Set(ByVal value As DateTime?)
' Date in the past?
If (value < DateTime.Now) Then
Me.customerCreatedDate = DateTime.Now
Else
Me.customerCreatedDate = value
End If
End Set
End Property

''' <summary>
''' The name of the user creating the customer
''' </summary>
''' <value></value>
''' <returns></returns>
''' <remarks></remarks>
Public Property CreatedBy() As String
Get
Return Me.customerCreatedBy
End Get
Set(ByVal value As String)
' Null value?
If value Is Nothing Then
Me.customerCreatedBy = ""
Else
' Only get the first 15 characters
If (value.Length > 15) Then
Me.customerCreatedBy = value.Substring(0, 15)
Else
Me.customerCreatedBy = value
End If
End If
End Set
End Property

''' <summary>
''' The date the customer was last modified in the system
''' </summary>
''' <value></value>
''' <returns></returns>
''' <remarks></remarks>

(Pour la suite du code, reportez-vous à sur la page suivante.)


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-89

Public Property ModifiedDate() As DateTime?


Get
Return Me.customerModifiedDate
End Get
Set(ByVal value As DateTime?)
' Date in the past?
If value < DateTime.Now Then
Me.customerModifiedDate = DateTime.Now
Else
Me.customerModifiedDate = value
End If
End Set
End Property

''' <summary>
''' The name of the user who last modified the customer
''' </summary>
''' <value></value>
''' <returns></returns>
''' <remarks></remarks>
Public Property ModifiedBy() As String
Get
Return Me.customerModifiedBy
End Get
Set(ByVal value As String)
' Null value?
If value Is Nothing Then
Me.customerModifiedBy = ""
Else
' Only get the first 15 characters
If (value.Length > 15) Then
Me.customerModifiedBy = value.Substring(0, 15)
Else
Me.customerModifiedBy = value
End If
End If
End Set
End Property

f Tâche 4 : ajouter des constructeurs


• Dans la classe Customer, ajoutez une région nommée Constructors sous la
région Properties.

#Region "Constructors"
#End Region
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-90 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• À partir de la classe Customer, dans la région Constructors, ajoutez le


constructeur sans paramètre public par défaut qui initialise les champs
membres customerID et customerCreatedDate en utilisant les propriétés
publiques.

''' <summary>
''' Default parameterless constructor
''' </summary>
''' <remarks></remarks>
Public Sub New()
' Initialize backing fields with default values
Me.ID = Guid.NewGuid()
Me.CreatedDate = DateTime.Now
End Sub

• Ajoutez les propriétés restantes dans la région Constructors à l'aide d'un


extrait de code nommé Customer class constructors. L'extrait de code a été
fourni par le développeur principal et il est placé dans le dossier Mes extraits
de code. Cliquez avec le bouton droit sur la ligne suivant le constructeur sans
paramètre par défaut et insérez l'extrait en cliquant sur Insérer un extrait.

''' <summary>
''' Initializes backing fields with passed and default values
''' </summary>
''' <param name="id"></param>
''' <remarks></remarks>
Public Sub New(ByVal id As Guid?)
' Initialize backing fields with passed and default values
Me.ID = id
Me.CreatedDate = DateTime.Now
End Sub

''' <summary>
''' Initializes with a value for all backing fields
''' </summary>
''' <param name="id"></param>
''' <param name="firstName"></param>
''' <param name="lastName"></param>
''' <param name="address"></param>
''' <param name="zipCode"></param>
''' <param name="city"></param>
''' <param name="state"></param>
''' <param name="countryID"></param>
''' <param name="phone"></param>
''' <param name="emailAddress"></param>

(Pour la suite du code, reportez-vous à sur la page suivante.)


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-91

''' <param name="webAddress"></param>


''' <param name="creditLimit"></param>
''' <param name="newsSubscriber"></param>
''' <param name="createdDate"></param>
''' <param name="createdBy"></param>
''' <param name="modifiedDate"></param>
''' <param name="modifiedBy"></param>
''' <remarks></remarks>
Public Sub New(ByVal id As Guid?, ByVal firstName As String, ByVal
lastName As String,
ByVal address As String, ByVal zipCode As String, ByVal city
As String, ByVal state As String,
ByVal countryID As Guid?, ByVal phone As String, ByVal
emailAddress As String,
ByVal webAddress As String, ByVal creditLimit As Integer,
ByVal newsSubscriber As Boolean,
ByVal createdDate As DateTime?, ByVal createdBy As String,
ByVal modifiedDate As DateTime?,
ByVal modifiedBy As String)

' Initialize member backing fields with passed values


Me.ID = id
Me.FirstName = firstName
Me.LastName = lastName
Me.Address = address
Me.ZipCode = zipCode
Me.City = city
Me.State = state
Me.CountryID = countryID
Me.Phone = phone
Me.EmailAddress = emailAddress
Me.WebAddress = webAddress
Me.CreditLimit = creditLimit
Me.NewsSubscriber = newsSubscriber

If Not createdDate Is Nothing Then


Me.CreatedDate = createdDate
Else
Me.CreatedDate = DateTime.Now
End If

Me.CreatedBy = createdBy
Me.ModifiedDate = modifiedDate
Me.ModifiedBy = modifiedBy
End Sub

• Enregistrez les modifications apportées au fichier Customer.vb.


• Générez le composant et corrigez les erreurs.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-92 Introduction au développement Web avec Microsoft® Visual Studio® 2010

f Tâche 5 : référencer le projet CustomerManagementEntities à partir


du projet CustomerManagement
• Ajoutez une référence au projet CustomerManagement via la boîte de dialogue
Ajouter une référence. Référencez le projet CustomerManagementEntities à
partir du projet CustomerManagement.

f Tâche 6 : ajouter une déclaration de membre client


• Ouvrez le fichier InsertCustomer.aspx.vb.
• Dans la fenêtre de code InsertCustomer.aspx.vb, ajoutez une déclaration
de membre de classe privée de la classe Customer, dans l'espace de noms
CustomerManagementEntities, nommée currentCustomer et initialisez-la
sur Nothing.

Private currentCustomer As CustomerManagementEntities.Customer =


Nothing

Résultats : Au terme de cet exercice, vous aurez créé un composant en utilisant le


projet de bibliothèque de classes, ajouté une référence au projet de composant à
partir du site Web et ajouté une variable membre de type Customer.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-93

Exercice 4 : Gestion des événements de contrôle et relatifs


aux pages
Dans cet exercice, les tâches principales sont les suivantes :
1. Instancier l'objet Customer.
2. Remplir les contrôles d'interface utilisateur.
3. Détruire les objets.
4. Gérer l'annulation de l'utilisateur.
5. Enregistrer les informations clients.

f Tâche 1 : instancier l'objet Customer


• Instanciez l'objet Customer en utilisant le code suivant.

''' <summary>
''' Instantiates Customer object
''' </summary>
''' <param name="sender"></param>
''' <param name="e"></param>
''' <remarks></remarks>
Protected Sub Page_Load(ByVal sender As Object, ByVal e As
System.EventArgs) Handles Me.Load
' Instantiate Customer
instantiateCustomerObject()
End Sub
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-94 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Ajoutez le code suivant à la classe InsertCustomer.

''' <summary>
''' Instantiates and populates the Customer member object
''' </summary>
''' <remarks></remarks>
Private Sub instantiateCustomerObject()
' First time loading page?
If Not Me.IsPostBack Then
' Instantiate new Customer object
currentCustomer = New
CustomerManagementEntities.Customer()
Else
' Instantiate new Customer object with user input
currentCustomer = New CustomerManagementEntities.Customer(
Nothing, CustomerFirstNameTextBox.Text,
CustomerLastNameTextBox.Text,
CustomerAddressTextBox.Text,
CustomerZipCodeTextBox.Text, CustomerCityTextBox.Text,
CustomerStateTextBox.Text, Nothing,
CustomerPhoneTextBox.Text,
CustomerEmailAddressTextBox.Text,
CustomerWebAddressTextBox.Text, -1,
CustomerNewsSubscriberCheckBox.Checked, DateTime.Now,
_
"", Nothing, "")
End If
End Sub
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-95

f Tâche 2 : remplir les contrôles d'interface utilisateur


• Dans la classe InsertCustomer, remplissez les contrôles serveur de l'interface
utilisateur à l'aide des valeurs de l'objet Customer privé currentCustomer.

''' <summary>
''' Populates UI controls
''' </summary>
''' <param name="sender"></param>
''' <param name="e"></param>
''' <remarks></remarks>
Protected Sub Page_LoadComplete(ByVal sender As Object, ByVal e As
System.EventArgs) Handles Me.LoadComplete
' Populate the UI controls
populateUI()
End Sub

''' <summary>
''' Populates the UI controls with the values in the
''' current Customer object
''' </summary>
''' <remarks></remarks>
Private Sub populateUI()
CustomerFirstNameTextBox.Text = currentCustomer.FirstName
CustomerLastNameTextBox.Text = currentCustomer.LastName
CustomerAddressTextBox.Text = currentCustomer.Address
CustomerZipCodeTextBox.Text = currentCustomer.ZipCode
CustomerCityTextBox.Text = currentCustomer.City
CustomerStateTextBox.Text = currentCustomer.State

If currentCustomer.CountryID.HasValue Then
CustomerCountryDropDownList.SelectedValue =
currentCustomer.CountryID.Value.ToString()
Else
CustomerCountryDropDownList.SelectedIndex = -1
End If

CustomerPhoneTextBox.Text = currentCustomer.Phone
CustomerEmailAddressTextBox.Text =
currentCustomer.EmailAddress
CustomerWebAddressTextBox.Text = currentCustomer.WebAddress
CustomerCreditLimitTextBox.Text =
currentCustomer.CreditLimit.ToString()
CustomerNewsSubscriberCheckBox.Checked =
currentCustomer.NewsSubscriber
End Sub
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-96 Introduction au développement Web avec Microsoft® Visual Studio® 2010

f Tâche 3 : détruire les objets


• Dans la classe InsertCustomer, détruisez les objets utilisés qui ne sont pas
gérés automatiquement par le garbage collector.

''' <summary>
''' Destroys objects
''' </summary>
''' <param name="sender"></param>
''' <param name="e"></param>
''' <remarks></remarks>
Protected Sub Page_Unload(ByVal sender As Object, ByVal e As
System.EventArgs) Handles Me.Unload
' Destroy Customer object
currentCustomer = Nothing
End Sub

f Tâche 4 : gérer l'annulation de l'utilisateur


• Dans la classe InsertCustomer, gérez l'annulation de l'utilisateur en le
redirigeant vers la page d'accueil.

''' <summary>
''' Redirects to home page
''' </summary>
''' <param name="sender"></param>
''' <param name="e"></param>
''' <remarks></remarks>
Protected Sub CustomerCancelButton_Click(ByVal sender As Object,
ByVal e As System.EventArgs) Handles CustomerCancelButton.Click
' Redirect to home page
Response.Redirect("~/Default.aspx")
End Sub
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-97

f Tâche 5 : enregistrer les informations clients


• Dans la classe InsertCustomer, préparez l'enregistrement des informations
entrées par le client dans le stockage persistant lorsque l'utilisateur clique sur
le bouton Insert.

''' <summary>
''' Saves the current customer information and adds default values
''' </summary>
''' <param name="sender"></param>
''' <param name="e"></param>
''' <remarks></remarks>
Protected Sub customerInsertButton_Click(ByVal sender As Object,
ByVal e As System.EventArgs) Handles customerInsertButton.Click
' Add the current user name
currentCustomer.CreatedBy = Context.User.Identity.Name
' Add the user credit limit
currentCustomer.CreditLimit = 50000
End Sub

• Enregistrez les modifications apportées au fichier InsertCustomer.aspx.vb.


• Générez la solution et corrigez les erreurs.
• Fermer Visual Studio 2010.

Remarque : notez que la validation s'effectue correctement.

Remarque : le code initial pour l'enregistrement des informations clients est créé dans ce
module. Toutefois, le code final pour l'enregistrement dans la base de données sera créé
dans le module 8.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-98 Introduction au développement Web avec Microsoft® Visual Studio® 2010

f Tâche 6 : désactiver l'ordinateur virtuel et annuler les modifications


• Désactivez l'ordinateur virtuel 10557A-GEN-DEV.
• Annulez les modifications apportées à l'ordinateur virtuel 10557A-GEN-DEV.

Résultats : au terme de cet exercice, vous aurez ajouté du code afin de gérer les
événements Page.Load, Page.LoadComplete et Page.Unload pour le formulaire Web
InsertCustomer. vous aurez également ajouté le code permettant de gérer l'événement
Click pour les contrôles des boutons Insert and Cancel.

Remarque : vous trouverez les corrigés des exercices sur le CD-ROM d'accompagnement
du cours.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-99

Section 2 : Visual C#
Exercice 1 : Implémentation de code dans une
application Web
Dans cet exercice, les tâches principales sont les suivantes :
1. Ouvrir un site Web ASP.NET existant.

2. Ouvrez le fichier code-behind d'un formulaire Web existant.

f Tâche 1 : ouvrir un site Web existant


• Ouvrez une session sur 10557A-GEN-DEV avec le nom d'utilisateur Stagiaire
et le mot de passe Pa$$w0rd.
• Ouvrez Microsoft Visual Studio 2010.
• Ouvrez la solution CustomerManagement située dans le dossier
D:\Labfiles\Starter\M4\CS.

f Tâche 2 : ouvrir le fichier code-behind d'un formulaire Web existant


• Ouvrez le fichier code-behind du formulaire Web InsertCustomer, à l'aide de
la commande de menu contextuel Afficher le code.

Résultats : au terme de cet exercice, vous aurez ouvert le site Web


CustomerManagement existant et le fichier code-behind du formulaire Web
InsertCustomer.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-100 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Exercice 2 : Création de procédures événementielles


Dans cet exercice, les tâches principales sont les suivantes :
1. Créer une procédure événementielle pour l'événement Click du bouton Insert.
2. Créer une procédure événementielle pour l'événement Click du bouton Cancel.
3. Créer une procédure événementielle pour l'événement Page_LoadComplete.
4. Créer une procédure événementielle pour l'événement Page_Unload.

f Tâche 1 : créer une procédure événementielle pour l'événement Click


du bouton Insérer
• Ouvrez le formulaire Web InsertCustomer en mode Création et créez une
procédure événementielle pour l'événement Click du bouton Insérer en
double-cliquant sur le contrôle Button.

Remarque : La procédure événementielle initiale pour l'événement Click du contrôle


CustomerInsertButton est ajoutée dans la fenêtre de code.

f Tâche 2 : créer une procédure événementielle pour l'événement Click


du bouton Annuler
• Ouvrez le formulaire Web InsertCustomer en mode Création et créez une
procédure événementielle pour l'événement Click du bouton Annuler. Pour ce
faire, double-cliquez sur la zone en regard de l'événement Click dans la fenêtre
Propriétés, avec le contrôle Button sélectionné dans le concepteur.

Remarque : la procédure événementielle initiale pour l'événement Click du contrôle


CustomerCancelButton est ajoutée à la classe dans la fenêtre de code.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-101

f Tâche 3 : créer une procédure événementielle pour l'événement


Page_LoadComplete
protected void Page_LoadComplete(object sender, EventArgs e)
{

f Tâche 4 : créer une procédure événementielle pour l'événement


Page_Unload
protected void Page_Unload(object sender, EventArgs e)
{

Résultats : au terme de cet exercice, vous aurez créé des procédures événementielles
pour les événements Page_LoadComplete et Page_Unload des contrôles button.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-102 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Exercice 3 : Création d'un composant d'entité


Dans cet exercice, les tâches principales sont les suivantes :
1. Créer un composant d'entité.
2. Ajouter des champs membres de classe.
3. Ajouter des propriétés.
4. Ajouter les constructeurs.
5. Référencer le projet CustomerManagementEntities à partir du projet
CustomerManagement.
6. Ajouter une déclaration de membre client.

f Tâche 1 : créer un composant d'entité


• Créez le projet de bibliothèque de classes CustomerManagementEntities à
l'aide de l'élément de projet Bibliothèque de classes dans la boîte de dialogue
Ajouter un nouveau projet. Placez le nouveau projet dans le dossier
D:\Labfiles\Starter\M4\CS.

Remarque : Le projet de bibliothèque de classes CustomerManagementEntities est


ajouté à la solution.

• Renommez le fichier de classe par défaut Class1.cs en Customer.cs.

f Tâche 2 : Ajouter des champs membres de classe


• Dans la classe Customer, ajoutez une région nommée Class member fields,
directement sous la déclaration de classe.

#region Class member fields


#endregion

• Dans la classe Customer, dans la région Class member fields, ajoutez un


champ membre privé nommé customerFirstName et de type String pour le
prénom du client et initialisez-le sur null.

private string customerFirstName = null;


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-103

• Dans la classe Customer, dans la région Class member fields, ajoutez un


champ membre privé nommé customerLastName et de type String pour le
nom du client et initialisez-le sur null.

private string customerLastName = null;

• Dans la classe Customer, dans la région Class member fields, ajoutez un


champ membre privé nommé customerAddress et de type String pour
l'adresse du client et initialisez-le sur null.

private string customerAddress = null;

• Ajoutez les champs de stockage restants en utilisant un extrait de code nommé


Customer class backing fields. L'extrait de code a été fourni par le développeur
principal et il est placé dans le dossier Mes extraits de code. Cliquez avec le
bouton droit sur la ligne suivant la déclaration du champ de stockage
customerAddress et insérez l'extrait en cliquant sur Insérer un extrait.

private string customerZipCode = null;


private string customerCity = null;
private string customerState = null;
private Guid? customerCountryID = null;
private string customerPhone = null;
private string customerEmailAddress = null;
private string customerWebAddress = null;
private int customerCreditLimit = 0;
private bool customerNewsSubscriber = false;
private DateTime? customerCreatedDate = null;
private string customerCreatedBy = null;
private DateTime? customerModifiedDate = null;
private string customerModifiedBy = null;
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-104 Introduction au développement Web avec Microsoft® Visual Studio® 2010

f Tâche 3 : ajouter des propriétés


• Dans la classe Customer, ajoutez une région nommée Properties, sous la
région Class member fields.

#region Properties
#endregion

• Dans la classe Customer, dans la région Properties, ajoutez la propriété


publique implémentée automatiquement nommée ID de type nullable Guid.

/// <summary>
/// The unique customer ID
/// </summary>
public Guid? ID { get; set; }

• À partir de la classe Customer, dans la région Properties, ajoutez une propriété


publique nommée FirstName de type String, qui définit et obtient le champ de
stockage membre privé nommé customerFirstName. Assurez-vous que sa
longueur n'excède pas 50 caractères à l'aide des lignes de code suivantes.

/// <summary>
/// The customer first name
/// </summary>
public string FirstName
{
get
{
return this.customerFirstName;
}
set
{
// Null value?
if (value == null)
this.customerFirstName = "";
else
// Only get the first 50 characters
if (value.Length > 50)
this.customerFirstName = value.Substring(0, 50);
else
this.customerFirstName = value;
}
}
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-105

• À partir de la classe Customer, dans la région Properties, ajoutez une propriété


publique nommée LastName de type String, qui définit et obtient le champ de
stockage membre privé nommé customerLastName. Assurez-vous que sa
longueur n'excède pas 30 caractères à l'aide des lignes de code suivantes.

/// <summary>
/// The customer last name
/// </summary>
public string LastName
{
get
{
return this.customerLastName;
}
set
{
// Null value?
if (value == null)
this.customerLastName = "";
else
// Only get the first 30 characters
if (value.Length > 30)
this.customerLastName = value.Substring(0, 30);
else
this.customerLastName = value;
}
}
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-106 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• À partir de la classe Customer, dans la région Properties, ajoutez une propriété


publique nommée Address de type String, qui définit et obtient le champ de
stockage membre privé nommé customerAddress. Assurez-vous que sa
longueur n'excède pas 50 caractères à l'aide des lignes de code suivantes.

/// <summary>
/// The customer address, including street name, house number and
floor
/// </summary>
public string Address
{
get
{
return this.customerAddress;
}
set
{
// Null value?
if (value == null)
this.customerAddress = "";
else
// Only get the first 50 characters
if (value.Length > 50)
this.customerAddress = value.Substring(0, 50);
else
this.customerAddress = value;
}
}
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-107

• Ajoutez les propriétés restantes dans la région Properties à l'aide d'un extrait
de code nommé Customer class properties. L'extrait de code a été fourni par
le développeur principal et il est placé dans le dossier Mes extraits de code.
Cliquez avec le bouton droit sur la ligne suivant la déclaration de la propriété
Address et insérez l'extrait en cliquant sur Insérer un extrait.

/// <summary>
/// The customer zip code or postal code
/// </summary>
public string ZipCode
{
get
{
return this.customerZipCode;
}
set
{
// Null value?
if (value == null)
this.customerZipCode = "";
else
// Only get the first 10 characters
if (value.Length > 10)
this.customerZipCode = value.Substring(0, 10);
else
this.customerZipCode = value;
}
}

/// <summary>
/// The name of the city in which the customer lives
/// </summary>
public string City
{
get
{
return this.customerCity;
}
set
{
// Null value?
if (value == null)
this.customerCity = "";
else

(Pour la suite du code, reportez-vous à sur la page suivante.)


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-108 Introduction au développement Web avec Microsoft® Visual Studio® 2010

// Only get the first 30 characters


if (value.Length > 30)
this.customerCity = value.Substring(0, 30);
else
this.customerCity = value;
}
}

/// <summary>
/// The name of the state or region in which the customer lives
/// </summary>
public string State
{
get
{
return this.customerState;
}
set
{
// Null value?
if (value == null)
this.customerState = "";
else
// Only get the first 30 characters
if (value.Length > 30)
this.customerState = value.Substring(0, 30);
else
this.customerState = value;
}
}

/// <summary>
/// The ID of the country in which the customer lives
/// </summary>
public Guid? CountryID
{
get
{
return this.customerCountryID;
}
set
{
this.customerCountryID = value;
}
}

(Pour la suite du code, reportez-vous à sur la page suivante.)


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-109

/// <summary>
/// The customer phone number
/// </summary>
public string Phone
{
get
{
return this.customerPhone;
}
set
{
// Null value?
if (value == null)
this.customerPhone = "";
else
// Only get the first 30 characters
if (value.Length > 30)
this.customerPhone = value.Substring(0, 30);
else
this.customerPhone = value;
}
}

/// <summary>
/// The customer e-mail address
/// </summary>
public string EmailAddress
{
get
{
return this.customerEmailAddress;
}
set
{
// Null value?
if (value == null)
this.customerEmailAddress = "";
else
// Only get the first 50 characters
if (value.Length > 50)
this.customerEmailAddress = value.Substring(0,
50);
else
this.customerEmailAddress = value;
}
}

(Pour la suite du code, reportez-vous à sur la page suivante.)


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-110 Introduction au développement Web avec Microsoft® Visual Studio® 2010

/// <summary>
/// The customer Web address
/// </summary>
public string WebAddress
{
get
{
return this.customerWebAddress;
}
set
{
// Null value?
if (value == null)
this.customerWebAddress = "";
else
// Only get the first 80 characters
if (value.Length > 80)
this.customerWebAddress = value.Substring(0, 80);
else
this.customerWebAddress = value;
}
}

/// <summary>
/// The current credit limit of the customer
/// </summary>
public int CreditLimit
{
get
{
return this.customerCreditLimit;
}
set
{
// Negative value?
if (value < 0)
this.customerCreditLimit = 0;
else
this.customerCreditLimit = value;
}
}

(Pour la suite du code, reportez-vous à sur la page suivante.)


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-111

/// <summary>
/// Does the customer subscriber to news?
/// </summary>
public bool NewsSubscriber
{
get
{
return this.customerNewsSubscriber;
}
set
{
this.customerNewsSubscriber = value;
}
}

/// <summary>
/// The date the customer was created in the system
/// </summary>
public DateTime? CreatedDate
{
get
{
return this.customerCreatedDate;
}
private set
{
// Date in the past?
if (value < DateTime.Now)
this.customerCreatedDate = DateTime.Now;
else
this.customerCreatedDate = value;
}
}

/// <summary>
/// The name of the user creating the customer
/// </summary>
public string CreatedBy
{
get
{
return this.customerCreatedBy;
}

(Pour la suite du code, reportez-vous à sur la page suivante.)


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-112 Introduction au développement Web avec Microsoft® Visual Studio® 2010

set
{
// Null value?
if (value == null)
this.customerCreatedBy = "";
else
// Only get the first 15 characters
if (value.Length > 15)
this.customerCreatedBy = value.Substring(0, 15);
else
this.customerCreatedBy = value;
}
}

/// <summary>
/// The date the customer was last modified in the system
/// </summary>
public DateTime? ModifiedDate
{
get
{
return this.customerModifiedDate;
}
set
{
// Date in the past?
if (value < DateTime.Now)
this.customerModifiedDate = DateTime.Now;
else
this.customerModifiedDate = value;
}
}

/// <summary>
/// The name of the user who last modified the customer
/// </summary>
public string ModifiedBy
{
get
{
return this.customerModifiedBy;
}

(Pour la suite du code, reportez-vous à sur la page suivante.)


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-113

set
{
// Null value?
if (value == null)
this.customerModifiedBy = "";
else
// Only get the first 15 characters
if (value.Length > 15)
this.customerModifiedBy = value.Substring(0, 15);
else
this.customerModifiedBy = value;
}
}

f Tâche 4 : ajouter des constructeurs


• Dans la classe Customer, ajoutez une région nommée Constructors sous la
région Properties.

#region Constructors
#endregion

• À partir de la classe Customer, dans la région Constructors, ajoutez le


constructeur sans paramètre public par défaut qui initialise les champs
membres customerID et customerCreatedDate en utilisant les propriétés
publiques.

/// <summary>
/// Default parameterless constructor
/// </summary>
public Customer()
{
// Initialize backing fields with default values
this.ID = Guid.NewGuid();
this.CreatedDate = DateTime.Now;
}
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-114 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Ajoutez les propriétés restantes dans la région Constructors à l'aide d'un


extrait de code nommé Customer class constructors. L'extrait de code a été
fourni par le développeur principal et il est placé dans le dossier Mes extraits
de code. Cliquez avec le bouton droit sur la ligne suivant le constructeur sans
paramètre par défaut et insérez l'extrait en cliquant sur Insérer un extrait.

/// <summary>
/// Initializes backing fields with passed and default values
/// </summary>
/// <param name="id"></param>
public Customer(Guid? id)
{
// Initialize backing fields with passed and default values
this.ID = id;
this.CreatedDate = DateTime.Now;
}

/// <summary>
/// Initializes with a value for all backing fields
/// </summary>
/// <param name="id"></param>
/// <param name="firstName"></param>
/// <param name="lastName"></param>
/// <param name="address"></param>
/// <param name="zipCode"></param>
/// <param name="city"></param>
/// <param name="state"></param>
/// <param name="countryID"></param>
/// <param name="phone"></param>
/// <param name="emailAddress"></param>
/// <param name="webAddress"></param>
/// <param name="creditLimit"></param>
/// <param name="newsSubscriber"></param>
/// <param name="createdDate"></param>
/// <param name="createdBy"></param>
/// <param name="modifiedDate"></param>
/// <param name="modifiedBy"></param>
public Customer(Guid? id, string firstName, string lastName,
string address,
string zipCode, string city, string state, Guid? countryID,
string phone,
string emailAddress, string webAddress, int creditLimit, bool
newsSubscriber,
DateTime? createdDate, string createdBy, DateTime?
modifiedDate, string modifiedBy)

(Pour la suite du code, reportez-vous à sur la page suivante.)


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-115

{
// Initialize member backing fields with passed values
this.ID = id;
this.FirstName = firstName;
this.LastName = lastName;
this.Address = address;
this.ZipCode = zipCode;
this.City = city;
this.State = state;
this.CountryID = countryID;
this.Phone = phone;
this.EmailAddress = emailAddress;
this.WebAddress = webAddress;
this.CreditLimit = creditLimit;
this.NewsSubscriber = newsSubscriber;

if (createdDate != null)
this.CreatedDate = createdDate;
else
this.CreatedDate = DateTime.Now;

this.CreatedBy = createdBy;
this.ModifiedDate = modifiedDate;
this.ModifiedBy = modifiedBy;
}

• Enregistrez les modifications apportées au fichier Customer.cs.


• Générez le composant et corrigez les erreurs.

f Tâche 5 : référencer le projet CustomerManagementEntities à partir


du projet CustomerManagement
• Ajoutez une référence au projet CustomerManagement via la boîte de dialogue
Ajouter une référence. Référencez le projet CustomerManagementEntities à
partir du projet CustomerManagement.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-116 Introduction au développement Web avec Microsoft® Visual Studio® 2010

f Tâche 6 : ajouter une déclaration de membre client


• Ouvrez le fichier InsertCustomer.aspx.cs.
• Dans la fenêtre de code InsertCustomer.aspx.cs, ajoutez une déclaration de
membre de classe privée de la classe Customer, dans l'espace de noms
CustomerManagementEntities, nommée currentCustomer et initialisez-la
sur null.

private CustomerManagementEntities.Customer currentCustomer = null;

Résultats : au terme de cet exercice, vous aurez créé un composant en utilisant le


projet de bibliothèque de classes, ajouté une référence au projet de composant à
partir du site Web et ajouté une variable membre de type Customer.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-117

Exercice 4 : Gestion des événements de contrôle et relatifs


aux pages
Dans cet exercice, les tâches principales sont les suivantes :
1. Instancier l'objet Customer.
2. Remplir les contrôles d'interface utilisateur.
3. Détruire les objets.
4. Gérer l'annulation de l'utilisateur.
5. Enregistrer les informations clients.

f Tâche 1 : instancier l'objet Customer


• Instanciez l'objet Customer à l'aide du code suivant.

/// <summary>
/// Instantiates Customer object
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void Page_Load(object sender, EventArgs e)
{
// Instantiate Customer
instantiateCustomerObject();
}
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-118 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Ajoutez le code suivant à la classe InsertCustomer.

/// <summary>
/// Instantiates and populates the Customer member object
/// </summary>
private void instantiateCustomerObject()
{
// First time loading page?
if (!this.IsPostBack)
// Instantiate new Customer object
currentCustomer = new CustomerManagementEntities.Customer(
null, CustomerFirstNameTextBox.Text,
CustomerLastNameTextBox.Text,
CustomerAddressTextBox.Text,
CustomerZipCodeTextBox.Text,
CustomerCityTextBox.Text, CustomerStateTextBox.Text,
null, CustomerPhoneTextBox.Text,
CustomerEmailAddressTextBox.Text,
CustomerWebAddressTextBox.Text, -1,
CustomerNewsSubscriberCheckBox.Checked,
DateTime.Now, "", null, "");
}
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-119

f Tâche 2 : remplir les contrôles d'interface utilisateur


• Dans la classe InsertCustomer, remplissez les contrôles serveur de l'interface
utilisateur à l'aide des valeurs de l'objet Customer privé currentCustomer.

/// <summary>
/// Populates UI controls
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void Page_LoadComplete(object sender, EventArgs e)
{
// Populate the UI controls
populateUI();
}
/// <summary>
/// Populates the UI controls with the values in the
/// current Customer object
/// </summary>
private void populateUI()
{
CustomerFirstNameTextBox.Text = currentCustomer.FirstName;
CustomerLastNameTextBox.Text = currentCustomer.LastName;
CustomerAddressTextBox.Text = currentCustomer.Address;
CustomerZipCodeTextBox.Text = currentCustomer.ZipCode;
CustomerCityTextBox.Text = currentCustomer.City;
CustomerStateTextBox.Text = currentCustomer.State;

if (currentCustomer.CountryID.HasValue)
CustomerCountryDropDownList.SelectedValue =
currentCustomer.CountryID.Value.ToString();
else
CustomerCountryDropDownList.SelectedIndex = -1;

CustomerPhoneTextBox.Text = currentCustomer.Phone;
CustomerEmailAddressTextBox.Text =
currentCustomer.EmailAddress;
CustomerWebAddressTextBox.Text = currentCustomer.WebAddress;
CustomerCreditLimitTextBox.Text =
currentCustomer.CreditLimit.ToString();
CustomerNewsSubscriberCheckBox.Checked =
currentCustomer.NewsSubscriber;
}
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-120 Introduction au développement Web avec Microsoft® Visual Studio® 2010

f Tâche 3 : détruire les objets


• Dans la classe InsertCustomer, détruisez les objets utilisés qui ne sont pas
gérés automatiquement par le garbage collector.

/// <summary>
/// Destroys objects
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void Page_Unload(object sender, EventArgs e)
{
// Destroy Customer object
currentCustomer = null;
}

f Tâche 4 : gérer l'annulation de l'utilisateur


• Dans la classe InsertCustomer, gérez l'annulation de l'utilisateur en le
redirigeant vers la page d'accueil.

/// <summary>
/// Redirects to home page
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void CustomerCancelButton_Click(object sender, EventArgs e)
{
// Redirect to home page
Response.Redirect("~/Default.aspx");
}
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-121

f Tâche 5 : enregistrer les informations clients


• Dans la classe InsertCustomer, préparez l'enregistrement des informations
entrées par le client dans le stockage persistant lorsque l'utilisateur clique sur
le bouton Insert.

/// <summary>
/// Saves the current customer information and adds default values
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void CustomerInsertButton_Click(object sender, EventArgs e)
{
// Add the current user name
currentCustomer.CreatedBy = Context.User.Identity.Name;
// Add the user credit limit
currentCustomer.CreditLimit = 50000;
}

• Enregistrez les modifications apportées au fichier InsertCustomer.aspx.cs.


• Générez la solution et corrigez les erreurs.
• Fermer Visual Studio 2010.

Remarque : notez que la validation s'effectue correctement.

Remarque : le code initial pour l'enregistrement des informations clients est créé dans ce
module. Toutefois, le code final pour l'enregistrement dans la base de données sera créé
dans le module 8.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-122 Introduction au développement Web avec Microsoft® Visual Studio® 2010

f Tâche 6 : désactiver l'ordinateur virtuel et annuler les modifications


• Désactivez l'ordinateur virtuel 10557A-GEN-DEV.
• Annulez les modifications apportées à l'ordinateur virtuel 10557A-GEN-DEV.

Résultats : au terme de cet exercice, vous aurez ajouté du code afin de gérer les
événements Page.Load, Page.LoadComplete et Page.Unload pour le formulaire
Web InsertCustomer. Vous aurez également ajouté le code permettant de gérer
l'événement Click pour les contrôles des boutons Insert and Cancel.

Remarque : vous trouverez les corrigés des exercices sur le CD-ROM d'accompagnement
du cours.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web
W Microsoft® ASP.NET 4-123

Récap
pitulatif de l'atelier pratiq
que

Parcou
urir les question
ns et les répon
nses
1. Commment pouvez-vo ous exécuter uniq
quement le code lors du premier
chaargement d'une page Web ?
2. Quelle est la procéd
dure événementielle par défaut pou
ur les contrôles
mmuns ?
com
3. Com
mment pouvez-vo
ous ajouter des éléments
é à une lisste en mode Créaation ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-124 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Récapitu
ulatif du m
module

Parcou
urir les question
ns et les répon
nses
1. Quel est l'avantage d
des fichiers code--behind lorsque vous
v ajoutez des
nctionnalités à un formulaire Web ?
fon
2. Com
mment une procéédure événementtielle est-elle asso
ociée à l'événemen
nt d'un
con
ntrôle serveur ?
3. Commment pouvez-vo
ous utiliser un co
omposant dans vo
otre projet Visuall
Studio 2010 ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Ajout de fonctionnalités à un formulaire Web Microsoft® ASP.NET 4-125

Problèmes et scénarios réels


1. Vous souhaitez qu'un concepteur puisse travailler sur un formulaire Web en
même temps qu'un développeur travaille sur le code de ce formulaire Web.
Quelle est la méthode d'implémentation la plus simple ?
Utilisez un formulaire Web avec un fichier code-behind.
2. Vous souhaitez ajouter des événements de page à un fichier code-behind, mais
sans devoir connecter manuellement les gestionnaires d'événements. Quelle
est la méthode d'implémentation la plus simple ?
Spécifiez la valeur True pour l'attribut AutoEventWireUp de la directive Page.

Meilleures pratiques
• Suivez une convention de casse et d'affectation de noms lorsque vous nommez
vos variables. Dans ce cours, la convention d'affectation de noms utilisée
correspond au contenu de la variable, suffixé du type de données, le cas échéant.
En général, si une variable contient l'un des types de données simples, tels que
Integer ou String, il n'est pas nécessaire de la suffixer avec le type de données.
Exemple : FirstName, LastName, Name, Age et Length.
• Si vous nommez une variable appartenant à un type d'objet spécifique, vous
devez toujours utiliser le nom du type d'objet comme suffixe, tel que
CustomerManagementDataSet, où le type de données est DataSet et le nom
est CustomerManagement. La casse Pascal et la casse mixte diffèrent. Pour la
casse Pascal, la première lettre de chaque mot est en majuscule, y compris les
acronymes de plus de deux lettres, par exemple « FirstName ». La casse mixte
ressemble à la casse Pascal sauf que la première lettre est en minuscule, par
exemple « firstName ». La casse Pascal est généralement utilisée pour les
variables publiques, tandis que la casse mixte est utilisée pour les variables
locales et privées, et pour les paramètres de méthode. Consultez la meilleure
pratique suivante concernant les variables publiques.
• En règle générale, les variables membres, également appelées champs de stockage,
ne doivent jamais être rendues publiques car cela risque d'endommager l'état d'un
objet. À la place, rendez privée une variable membre et exposez la valeur via une
propriété avec laquelle vous pouvez vérifier lorsqu'un utilisateur de l'objet définit
la valeur de la propriété. Il existe toutefois des exceptions, comme lorsqu'un objet
doit être sérialisé, mais cela dépasse le cadre de ce module.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
4-126 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Suivez une convention de casse et d'affectation de noms lorsque vous nommez


vos méthodes. Dans ce cours, la convention d'affectation de noms utilisée
décrit les données qu'elle rend disponibles (FirstName), mais le premier mot
du nom n'est jamais un verbe, comme c'est le cas pour les noms de méthode
(GetFirstName). La casse suit les mêmes règles que les variables ; les méthodes
publiques utilisent la casse Pascal, tandis que les méthodes privées utilisent la
casse mixte.
• Suivez une convention de casse et d'affectation de noms lorsque vous nommez
vos propriétés. Dans ce cours, la convention d'affectation de noms correspond à
l'action de la méthode, mais le premier mot du nom est toujours un verbe, par
exemple GetUserID ou SaveID. La casse suit les mêmes règles que les variables
et des méthodes ; les propriétés publiques utilisent la casse Pascal, tandis que les
propriétés privées utilisent la casse mixte.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémentation de pages maîtres et de contrôles utilisateur 5-1

Module 5
Implémentation de pages maîtres et de
contrôles utilisateur
Table des matières :
Leçon 1 : Création de pages maîtres 5-3
Leçon 2 : Ajout de contrôles utilisateur à un formulaire Web ASP.NET 5-27
Atelier pratique : Implémentation de pages maîtres et de
contrôles utilisateur 5-51
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-2 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Vue d'en
nsemble du modu
ule

Lors de la conception dee votre application Web, vous devvez ajouter au mo oins un
formulaaire Web Microso oft® ASP.NET à vo otre projet. Très souvent,
s vous devvez
appliquuer une conceptio
on cohérente à l'innterface utilisateu
ur. Les pages maîîtres
permetttent d'appliquer u
une conception cohérente
c à votre site Web sans quue vous
ayez à dupliquer
d la concception sur différeents formulaires Web.
W
Alors qu ue les pages maîttres vous permetttent de conserverr une présentation n
cohéren nte dans votre app plication Web, lees contrôles utilisateur vous aident à
réutiliseer les composantss de l'interface uttilisateur de façon
n personnalisée. Vous
V
pouvez utiliser la même combinaison de contrôles sur dess pages différentees ;
par exem mple, des contrôles permettant d'afficher et de mo odifier les informaations
relativess aux commandees. Les contrôles utilisateur
u permeettent de réutiliserr
facilemeent le code et les composants d'in nterface utilisateurr communs au seein d'une
applicattion Web. Vous p pouvez ajouter dees balises et des contrôles
c serveur Web
existantts à un contrôle uutilisateur, et définir les propriétéss et méthodes du contrôle.
Vous po ouvez ensuite les incorporer dans les pages Web ASP.NET,
A où ils
fonction nnent en tant qu'unité.
Dans cee module, vous ap
pprendrez à créerr et à implémenteer des pages maîttres, ainsi
qu'à imp
plémenter des coontrôles utilisateu
ur dans une appliication Web.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémenntation de pages maîtres et de contrôles utilisateuur 5-3

Leçon 1
Création
n de page
es maîtress

Les pagges maîtres vous aaident à définir laa disposition généérale d'une appliccation
Microso oft ASP.NET à parrtir d'un emplaceement unique : le fichier .master. Vous V
réutiliseez ainsi la disposiition dans toutes les pages de con ntenu dérivées de la page
maître. Les pages maîtrees présentent plussieurs avantages. Vous pouvez app porter
des mod difications à la co
onception d'une page
p maître ; cellees-ci seront alors
immédiiatement répercuttées sur toutes les pages utilisant cette page maîtree. Vous
pouvez modifier les élém ments de page maaître d'une appliccation Web à parttir d'un
emplaceement unique, saans devoir person nnaliser toutes less pages utilisant des
d
élémentts communs. Vou us créez facilemennt une application Web avec une
apparen nce cohérente et ffournissez une ex xpérience utilisateur satisfaisante.
Dans ceette leçon, vous appprendrez à créeer une page maître, puis à créer un
n
formulaaire Web qui utiliise cette page maîître.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-4 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Objectifs de la leçon
Au terme de cette leçon, vous serez à même d'effectuer les tâches suivantes :
• décrire des pages maîtres ;
• créer une page maître ;
• décrire des pages de contenu ;
• créer une page de contenu ;
• décrire des pages maîtres imbriquées ;
• décrire le comportement des pages maîtres au moment de l'exécution ;
• ajouter une page maître à un projet d'application Web existant ;
• décrire les avantages des pages maîtres.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémenntation de pages maîtres et de contrôles utilisateuur 5-5

Descrription des p
pages maîtress

Points clés
Les pagges maître ASP.NE ET permettent dee créer une disposition cohérente des
pages dans
d votre applicaation. Une page maître
m unique déffinit l'apparence et
e le
comporrtement standard d à appliquer à tou utes les pages (ou
u à un groupe dee pages)
dans vootre application. V
Vous pouvez ensu uite créer des pagges individuelles
contenaant le contenu à aafficher. Puis, vou
us pouvez utiliserr une page maîtree pour
créer un
ne disposition préédéfinie, qui incluut éventuellemen nt du texte statiqu
ue des
élémentts HTML et des ccontrôles serveur..
La pagee maître est un ficchier ASP.NET po n .master. Il est identifié
ortant l'extension
par unee directive Masterr spéciale qui rem
mplace la directivee Page utilisée poour les
pages de
d formulaire Web b ordinaires.
Vous po
ouvez placer du ccontenu de site Web W commun surr une page maîtree ; par
exemplee, un en-tête à affficher sur plusieu
urs pages d'un sitee Web.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-6 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Les pages maîtres vous permettent de créer les fonctionnalités précédemment


fournies par les jeux de frames ; vous pouvez également inclure des fichiers et des
contrôles utilisateur. Les pages maîtres peuvent contenir les mêmes types de
contrôles et de codes que les formulaires Web ASP.NET standard. Pour disposer
différemment certaines sections de votre application Web, vous pouvez inclure
plusieurs pages maîtres dans votre projet. Par exemple, votre application Web peut
contenir une section pour les utilisateurs authentifiés et une autre pour les
utilisateurs anonymes.

Fonctionnalités des pages maîtres


L'extension de fichier d'une page maître initialement .aspx devient .master.aspx ;
par exemple, MasterPage.master. La directive Master est utilisée au lieu de la
directive Page, comme indiqué ci-dessous.

[Visual Basic]
<%@ Master Language="VB" AutoEventWireup="false"
CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

[Visual C#]
<%@ Master Language="C#" AutoEventWireup="true"
CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

Remarque : par défaut, un serveur Web (par exemple, Internet Information Services
(IIS) 7.0) empêche l'affichage des fichiers portant l'extension .master dans un
navigateur Web. Cette mesure de sécurité veille à ce que la page maître n'apparaisse pas
comme une page ASP.NET autonome.

Une page maître ressemble à un formulaire Web standard, car elle peut comporter
du contenu standard, tel que les éléments HTML de niveau supérieur d'une page
(par exemple, html, head, body, et form). Par exemple, sur une page maître, vous
pouvez utiliser une table HTML pour la disposition ou une combinaison
d'éléments div pour afficher les éléments sur la page, un élément img pour le logo
de la société, un contrôle static text pour la mention de copyright et des contrôles
serveur pour la navigation du site. Cependant, la différence entre une page maître
et un formulaire Web standard réside dans l'inclusion d'un ou de plusieurs
contrôles ContentPlaceHolder. Les contrôles ContentPlaceHolder définissent les
zones dans lesquelles du contenu remplaçable apparaît. Le contenu remplaçable
est ensuite défini dans les pages de contenu. Vous devez placer les contrôles
ContentPlaceHolder dans l'élément head ou form, comme suit.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémentation de pages maîtres et de contrôles utilisateur 5-7

<html>
<head runat="server">
<title>General Application Title</title>
<asp:ContentPlaceHolder id="HeadContentPlaceHolder"
runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
...
<! Standard content >
<div class="top">
<asp:ContentPlaceHolder id="MainContentPlaceHolder"
runat="server" />
...
<! Standard content >
</div>
<div class="bottom">
<asp:ContentPlaceHolder id="FooterContentPlaceHolder"
runat="server">
<asp:Label id="FooterLabel" runat="server"
Text="Footer Text" />
</asp:ContentPlaceHolder id="FooterContentPlaceHolder">
</div>
...
</form>
</body>

Si une page de contenu liée à la page maître n'inclut pas de contrôle Content
référençant le contrôle ContentPlaceHolder, le contenu par défaut du contrôle
ContentPlaceHolder de la page maître apparaît sur la page affichée, comme
indiqué ci-dessous.

<div class="bottom">
<asp:ContentPlaceHolder id="FooterContentPlaceHolder"
runat="server">
<asp:Label id="FooterLabel" runat="server" Text="Footer Text"
/>
</asp:ContentPlaceHolder>
</div>

Question : quelles caractéristiques différencient une page maître d'un formulaire


Web standard ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-8 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Création d'une pa
age maître

Créatio
on d'une page m
maître
Pour crééer une page maîître, procédez com
mme suit :
1. Danns l'Explorateur dde solutions, cliqu
uez sur le projet avec le bouton droit,
puiis cliquez sur Ajo
outer un nouvel élément.
é
2. Dan
ns la boîte de diallogue Ajouter un
n nouvel élément :
a. Dans le volet gaauche, cliquez surr Visual Basic ou
u sur Visual C#.
b. Dans le volet ceentral, cliquez surr Page maître.
c. Dans la zone No
om, tapez le nom
m de la page maîtrre.
hier code-behind, activez la case à cocher
d. Si vous souhaiteez utiliser un fich
Placer le code d
dans un fichier distinct.
d
e. Si vous souhaiteez imbriquer la page maître, activeez la case à cocheer
Sélectionner la page maître.
f. Cliquez sur Ajouter.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémentation de pages maîtres et de contrôles utilisateur 5-9

Configuration de la disposition d'une page maître


La page maître définit l'apparence des pages de votre site. Elle peut contenir toute
combinaison de texte statique et de contrôles. Une page maître peut également
contenir un ou plusieurs espaces réservés de contenu, désignant l'emplacement
où le contenu dynamique apparaîtra lorsque les pages seront affichées.
Dans cet exemple, vous utiliserez un tableau pour vous aider à positionner les
éléments sur la page. Vous commencerez par la création d'un tableau de
disposition contenant les éléments de la page maître. Ensuite, vous positionnerez
le contrôle d'espace réservé de contenu qui se trouve déjà sur la page.

f Créer un tableau de disposition pour la page maître


Pour créer un tableau de disposition pour la page maître, procédez comme suit :
1. Passez en mode Création.
2. Dans la liste déroulante située en haut de la fenêtre Propriétés, sélectionnez
DOCUMENT. Ensuite, dans la liste DOCUMENT, cliquez sur une couleur
d'arrière-plan distinctive dans la zone BgColor. La couleur que vous
sélectionnez est sans importance.
3. Sur la page, cliquez à l'emplacement où placer le tableau de disposition ; par
exemple, dans un élément div.
4. Dans le menu Tableau, cliquez sur Insérer un tableau.
5. Dans la boîte de dialogue Insérer un tableau, dans la zone Lignes, tapez 3,
puis cliquez sur OK.
Le modèle définit l'organisation des lignes et des cellules du tableau. Le
modèle que vous avez sélectionné crée trois lignes et deux cellules/colonnes.
6. Dans la fenêtre Propriétés, appliquez les paramètres suivants :
• Dans la ligne du milieu, cliquez sur la première colonne et définissez sa
valeur Largeur sur 48.
• Cliquez sur la ligne supérieure et définissez sa valeur Hauteur sur 48.
• Cliquez sur la ligne inférieure et définissez sa valeur Hauteur sur 48.
7. Sélectionnez toutes les cellules du tableau, définissez le paramètre BgColor
sur une couleur différente de celle de l'arrière-plan, puis définissez la valeur
VAlign sur haut.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-10 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Une fois la disposition du tableau définie, il vous reste à ajouter à la page maître le
contenu qui apparaîtra sur toutes les pages. Vous pouvez ajouter un message de
copyright en pied de page, puis un menu. Si vous disposez d'un logo sous forme
graphique, vous pouvez également l'ajouter.

Question : quel est le principal intérêt de créer des pages maîtres ?


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémenntation de pages maîtres et de contrôles utilisateuur 5-11

Présentation des pages de contenu

Pages de
d contenu
Une pagge de contenu fou urnit le contenu d'une
d page maître. Il s'agit d'un fo
ormulaire
Web ASSP.NET référençaant une page maîttre spécifique. Lo orsque vous dispo osez
d'une ou
u de plusieurs paages maîtres danss votre projet, vou
us pouvez ajouter de
nouvelles pages de conteenu ou convertir vos formulaires WebW existants en n pages
de contenu. Les pages de contenu vous permettent
p de crééer du contenu
mentaire, qui fusiionne avec le con
supplém ntenu générique ded la page maître au
momen nt de l'exécution.

Fonctio
onnalités des p
pages de conten
nu
Vous po but MasterPageFile dans
ouvez référencer une page maître à l'aide de l'attrib
la directtive Page de la paage de contenu, comme
c indiqué dans
d les exempless suivants.

[Visua
al Basic]
<%@ Pa
age Language="V
VB" MasterPageFi
ile="~/MasterPa
age.master"
AutoEv
ventWireup="false" CodeFile="C
ContentPage.asp
px.vb"
Inheri
its="ContentPag
ge" %>
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-12 Introduction au développement Web avec Microsoft® Visual Studio® 2010

[Visual C#]
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="ContentPage.aspx.cs"
Inherits="ContentPage" %>

Lorsque vous indiquez la page maître dans la directive Page, vous pouvez utiliser
plusieurs pages maîtres dans votre projet. Il est possible d'indiquer différentes
pages maîtres pour divers formulaires Web. Vous pouvez également indiquer une
page maître au niveau de l'application, dans le fichier web.config, comme suit.

<pages masterPageFile="MasterPage.master" />

Vous pouvez indiquer que toutes les pages ASP.NET (fichiers .aspx) de l'application
doivent être automatiquement liées à la page maître indiquée, si la page contient au
moins un contrôle Content. Lorsque vous indiquez une référence à une page maître
au niveau de la page, si vous référencez un contrôle ContentPlaceHolder inexistant,
vous obtiendrez une erreur au moment de la compilation. Si vous indiquez une
référence à une page maître dans le fichier web.config et que vous référencez un
fichier inexistant, vous obtiendrez une erreur au moment de l'exécution.
L'attribut MasterPageFile de la directive Page remplace tout paramètre de page
maître indiqué dans le fichier web.config.
Les pages de contenu doivent contenir au moins un contrôle Content référençant
un contrôle ContentPlaceHolder sur la page maître référencée, comme indiqué
dans les exemples suivants.

[Visual Basic]
<asp:Content ID="MainContent"
ContentPlaceHolderID="MainContentPlaceHolder" Runat="Server">
</asp:Content>
<asp:Content ID="FooterContent"
ContentPlaceHolderID="FooterContentPlaceHolder" Runat="Server">
</asp:Content>

[Visual C#]
<asp:Content ID="MainContent"
ContentPlaceHolderID="MainContentPlaceHolder" Runat="Server">
</asp:Content>
<asp:Content ID="FooterContent"
ContentPlaceHolderID="FooterContentPlaceHolder" Runat="Server">
</asp:Content>
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémentation de pages maîtres et de contrôles utilisateur 5-13

Une fois les contrôles Content créés, vous pouvez y ajouter du texte et des
contrôles. Les contrôles Content sur la page de contenu établissent un lien direct
avec les contrôles ContentPlaceHolder sur la page maître. Vous ne pouvez pas
ajouter de contrôle Content qui ne référence aucun contrôle ContentPlaceHolder
existant dans la page maître référencée. Sur une page de contenu, tout élément non
inclus dans les contrôles Content (à l'exception des blocs de script pour le code
serveur) génère une erreur au moment de la compilation.
Sur une page de contenu, vous pouvez exécuter toutes les tâches que vous
effectueriez sur une page ASP.NET. Par exemple, il est possible de générer du
contenu pour un contrôle Content à l'aide de contrôles serveur ou d'exécuter des
requêtes de base de données.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-14 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Création d'une pa
age de conte
enu

Créatio
on d'une page d
de contenu
Pour crééer une page de ccontenu, procédeez comme suit :
1. Ouvvrez le fichier Cu
ustomerManagem
ment.sln dans le dossier
D:\
\Labfiles\Starter\\M5\VB.
2. Dan
ns l'Explorateur d
de solutions, cliqu
uez avec le bouto
on droit sur
D:\
\Labfiles\Starterr\M5\VB\Custom merManagemen nt, puis cliquez su
ur
Ajo
outer un nouvel éélément.
3. Danns la boîte de diallogue Ajouter un
n nouvel élément, dans le volet gaauche,
cliq
quez sur Visual BBasic ou sur Visuual C#.
4. Dan
ns le volet centrall, cliquez sur Weeb Form.
5. Dan
ns la zone Nom, tapez le nom de la l page de contennu. Pour utiliser un
u fichier
cod
de-behind, activezz la case à cocher Placer le code dans
d un fichier distinct.
d
6. Activez la case à coccher Sélectionnerr la page maître, puis cliquez sur Ajouter.
7. Dan
ns la boîte de diallogue Sélectionn
ner une page maîître, cliquez sur la
l page
maîître, puis sur OK.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémentation de pages maîtres et de contrôles utilisateur 5-15

Les contrôles ContentPlaceHolder situés sur la page maître indiquée sont


automatiquement référencés à l'aide des contrôles Content sur la nouvelle page
de contenu, comme suit.

[Visual Basic]
<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master"
AutoEventWireup="false" CodeFile="ContentPage.aspx.vb"
Inherits="ContentPage" %>

<asp:Content ID="Content1"
ContentPlaceHolderID="MainContentPlaceHolder" Runat="Server">
</asp:Content>

[Visual C#]
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="ContentPage.aspx.cs"
Inherits="ContentPage" %>

<asp:Content ID="Content1"
ContentPlaceHolderID="MainContentPlaceHolder" Runat="Server">
</asp:Content>

Contrairement aux pages maîtres imbriquées, vous ne pouvez pas indiquer de


nouveau contrôle ContentPlaceHolder dans une page de contenu. Les pages
maîtres imbriquées sont présentées dans la rubrique suivante mais, pour résumer,
il s'agit de pages maîtres basées sur une autre page maître.

Fusion de contenu
Vous pouvez référencer une page maître et un ou plusieurs des contrôles
ContentPlaceHolder sur une page de contenu, à l'aide des contrôles Content. Si un
contrôle ContentPlaceHolder est référencé sur la page de contenu, le contenu qui
figure dans le contrôle Content référençant le contrôle ContentPlaceHolder, le cas
échéant, est affiché. Si un contrôle ContentPlaceHolder n'est pas référencé sur la
page de contenu, le contenu par défaut indiqué sur la page maître, le cas échéant,
est affiché. L'attribut title de la directive Page sur une page de contenu est également
fusionné avec la page maître, si l'élément head de la page maître présente l'attribut
runat défini sur server. Dans le cas contraire, le paramètre de la page de contenu
est ignoré, car l'élément head n'est pas disponible pour le traitement côté serveur au
moment de la fusion.

Question : lorsque vous concevez une application Web à l'aide de pages maîtres,
quelles ressources externes devrez-vous probablement référencer et ajouter ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-16 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Présentation des pages maître


es imbriquée
es

Points clés
Les pagges maîtres peuveent être imbriquéees, c'est-à-dire qu'une page maître en
référencce une autre com
mme son maître.

Imbriccation de pagess maîtres


Vous po ouvez créer des ppages maîtres imbbriquées pour obtenir des pages maîtres
m
parent et
e enfant. La pagee maître parent définira
d éventuelleement la disposition
généralee du site Web, et les pages maîtress enfant spécifierront la disposition
n des
diversess zones du site. P
Par exemple, un site volumineux peut
p contenir unee page
maître générale
g définissaant l'apparence du
d site. Les partennaires de ce site peuvent
p
ensuite définir leur pagee maître enfant référençant le maîttre du site et défin
nissant
l'appareence de leur conteenu.
Les pagges maîtres imbriq
quées référencent le maître parentt à l'aide de l'attriibut
MasterP PageFile dans le cadre de la direcctive Master.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémentation de pages maîtres et de contrôles utilisateur 5-17

Les exemples suivants illustrent la directive Master d'une page maître parent.

[Visual Basic]
<%@ Master Language="VB" AutoEventWireup="false"
CodeFile="ParentMasterPage.master.vb" Inherits="ParentMasterPage" %>

[Visual C#]
<%@ Master Language="C#" AutoEventWireup="true"
CodeFile="ParentMasterPage.master.cs" Inherits="ParentMasterPage" %>

Les exemples suivants illustrent la directive Master d'une page maître enfant.

[Visual Basic]
<%@ Master Language="VB" AutoEventWireup="false"
MasterPageFile="~/ParentMasterPage.master"
CodeFile="ChildMasterPage.master.vb" Inherits="ChildMasterPage" %>

[Visual C#]
<%@ Master Language="C#" AutoEventWireup="true"
MasterPageFile="~/ParentMasterPage.master"
CodeFile="ChildMasterPage.master.cs" Inherits="ChildMasterPage" %>

Une page maître enfant possède une extension de nom de fichier, master, de même
que toute autre page maître. Elle contient des contrôles de contenu établissant un
lien avec les espaces réservés de contenu sur la page maître parent. De plus, la page
maître enfant possède ses propres espaces réservés de contenu. Ces derniers
affichent le contenu fourni par les pages de contenu des pages maîtres enfant.
Lorsque vous concevez un portail ou un site Web avec de nombreuses zones ou
sections différentes, il est recommandé de disposer d'une page maître générale
qui ne définit que la disposition générale, et de plusieurs pages maîtres imbriquées
ou enfant qui définissent la disposition de zones ou sections spécifiques.

Exemples de page maître imbriquée


Les exemples suivants illustrent une configuration de page maître imbriquée
simple.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-18 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Les deux premiers exemples illustrent les fichiers maîtres parent.

[Visual Basic]
<% @ Master Language="VB" AutoEventWireup="false"
CodeFile="ParentMasterPage.master.vb" Inherits="ParentMasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html >
<body>
<head runat="server">
<title>Untitled Page</title>
</head>
<form id="Form1" runat="server">
<div>
<h1>Parent Master</h1>
<p style="font:color=red">This is parent master content.</p>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</form>
</body>
</html>

[Visual C#]
<% @ Master Language="C#" AutoEventWireup="true"
CodeFile="ParentMasterPage.master.cs" Inherits="ParentMasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="Form1" runat="server">
<div>
<h1>Parent Master</h1>
<p style="font:color=red">This is parent master content.</p>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</form>
</body>
</html>
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémentation de pages maîtres et de contrôles utilisateur 5-19

Ces deux exemples illustrent les fichiers maîtres enfant.

[Visual Basic]
<%@ Master Language="VB" MasterPageFile="~/ParentMasterPage.master"%>
<asp:Content id="Content1" ContentPlaceholderID="MainContent"
runat="server">
<asp:Panel runat="server" id="PanelMain" backcolor="lightyellow">
<h2>Child master</h2>
<asp:Panel runat="server" id="Panel1" backcolor="lightblue">
<p>This is childmaster content.</p>
<asp:ContentPlaceHolder ID="ChildContent1" runat="server"
/>
</asp:Panel>
<asp:Panel runat="server" id="Panel2" backcolor="pink">
<p>This is childmaster content.</p>
<asp:ContentPlaceHolder ID="ChildContent2" runat="server"
/>
</asp:Panel>
<br />
</asp:Panel>
</asp:Content>

[Visual C#]
<%@ Master Language="C#" MasterPageFile="~/ParentMasterPage.master"%>
<asp:Content id="Content1" ContentPlaceholderID="MainContent"
runat="server">
<asp:Panel runat="server" id="PanelMain" backcolor="lightyellow">
<h2>Child master</h2>
<asp:Panel runat="server" id="Panel1" backcolor="lightblue">
<p>This is child master content.</p>
<asp:ContentPlaceHolder ID="ChildContent1" runat="server"
/>
</asp:Panel>
<asp:Panel runat="server" id="Panel2" backcolor="pink">
<p>This is child master content.</p>
<asp:ContentPlaceHolder ID="ChildContent2" runat="server"
/>
</asp:Panel>
<br />
</asp:Panel>
</asp:Content>
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-20 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Les deux exemples suivants illustrent une page de contenu référençant la page
maître enfant.

[Visual Basic]
<%@ Page Language="VB" MasterPageFile="~/Child.master"%>
<asp:Content id="Content1" ContentPlaceholderID="ChildContent1"
runat="server">
<asp:Label runat="server" id="Label1" text="Child label1" font-
bold="true" />
<br>
</asp:Content>
<asp:Content id="Content2" ContentPlaceholderID="ChildContent2"
runat="server">
<asp:Label runat="server" id="Label2" text="Child label2" font-
bold="true"/>
</asp:Content>

[Visual C#]
<%@ Page Language="C#" MasterPageFile="~/Child.master"%>
<asp:Content id="Content1" ContentPlaceholderID="ChildContent1"
runat="server">
<asp:Label runat="server" id="Label1" text="Child label1" font-
bold="true" />
<br>
</asp:Content>
<asp:Content id="Content2" ContentPlaceholderID="ChildContent2"
runat="server">
<asp:Label runat="server" id="Label2" text="Child label2" font-
bold="true"/>
</asp:Content>

Question : quel est le principal intérêt des pages maîtres imbriquées ?


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémenntation de pages maîtres et de contrôles utilisateuur 5-21

Comp portement des pages ma


aîtres au mom
ment de
l'exéccution

Points clés
Lorsquee vous utilisez dees pages maîtres et e des pages de co ontenu, celles-ci peuvent
p
utiliser le
l même jeu d'évvénements, tel que les événementss Init ou Load. Vo ous
devez co onnaître l'ordre d
des événements pour p utiliser les pages
p maîtres efficacement.
Lorsqu'un utilisateur dem mande une page Web (.aspx), ASP.NET vérifie la directived
Page et extrait la page mmaître, si elle est référencée. Le pro ocessus se déroule comme
suit :
1. L'uttilisateur demand
de une page en taapant l'URL de laa page de contenu u.
Ceppendant, la demaande de l'utilisateu
ur n'est pas dirigée vers la page maître,
m
car le serveur Web in
nterdit par défauut l'accès aux fichiiers .master.
2. ASPP.NET lit la directtive Page de la paage de contenu ett l'élément pages du
fich
hier web.config. S
Si la directive Pagge ou l'élément paages contient un attribut
a
MasterPageFile, ASP.NET extrait la page p maître. Lorssque deux pages sont
demmandées pour la p première fois, la page
p de contenu et la page maîtree sont
commpilées.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-22 Introduction au développement Web avec Microsoft® Visual Studio® 2010

3. ASP.NET fusionne le contenu de la page maître dans l'arborescence des


contrôles de la page de contenu.
4. Le contenu des différents contrôles Content est fusionné dans les contrôles
ContentPlaceHolder correspondants de la page maître.
5. ASP.NET affiche la page fusionnée finale dans le navigateur.

Du point de vue de l'utilisateur, les pages maîtres et de contenu sont combinées


dans une seule page discrète. L'URL de la page correspond à celle de la page de
contenu. Du point de vue de la programmation, les deux pages agissent en tant
que conteneurs distincts pour leurs contrôles respectifs. La page de contenu agit
en tant que conteneur de la page maître, mais vous pouvez référencer les membres
publics de la page maître à partir du code figurant sur la page de contenu. Par
exemple, vous pouvez enregistrer un objet spécifique dans l'état de session et le
mettre à disposition de toutes les pages de contenu à l'aide d'une propriété
publique. De cette façon, vous ne devez plus dupliquer le code pour enregistrer
l'objet sur la page de contenu.

Remarque : l'état de session sera présenté dans le module 13, « Gestion de l'état dans
les applications Web ».

Vous devrez peut-être accéder à certains contrôles par programmation à partir de la


page de contenu ; par exemple, un contrôle Menu, un contrôle SiteMapPath ou un
contrôle Login. Il peut s'agir d'un élément de menu sous forme de case à activer ou
désactiver, en fonction de l'entrée d'utilisateur sur la page de contenu, ou d'une
expression.
À l'instar d'un contrôle utilisateur, la page maître fonctionne comme un élément
enfant de la page de contenu, ainsi qu'en tant que conteneur dans la page de
contenu. Ils présentent cependant une différence : la page maître est le conteneur
de tous les contrôles serveur affichés dans le navigateur.

Remarque : les contrôles utilisateur sont présentés dans la leçon suivante, « Ajout de
contrôles utilisateur à un formulaire Web ASP.NET ».

Question : comment la page maître est-elle fusionnée avec la page de contenu au


moment de l'exécution ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémenntation de pages maîtres et de contrôles utilisateuur 5-23

Ajoutt d'une page maître à un projet d'application We


eb
exista
ant

Points clés
Même si,
s au moment de développer votree application Web, vous n'avez paas utilisé
de pagees maîtres, vous aavez toujours la possibilité d'en ajo
outer ultérieurem
ment.
Pour ajo
outer et utiliser u
une page maître dans
d un projet d'aapplication Web existant,
e
vous deevez ajouter au mmoins une page dee contenu ou con nvertir un formulaaire Web
existantt dans le projet d'application Webb en page de conttenu.
Les form
mulaires Web étaant semblables à lal combinaison d'une
d page maîtree et d'une
page dee contenu, la convversion d'un formmulaire Web en page
p de contenu est
e simple.
Une foiss la page maître aajoutée, vous pou
uvez ajouter d'auttres pages en tantt que
pages de
d contenu.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-24 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Pour convertir un formulaire Web en page de contenu, procédez comme suit :


• Créez une page maître ou ajoutez une page maître existante.
• Supprimez du formulaire Web tous les éléments HTML de niveau supérieur,
y compris les éléments html, head, body et form. Si vous disposez d'un
élément title dans l'élément head, déterminez si le titre doit être déplacé vers
la page maître. Si c'est le cas, assurez-vous que l'élément head de la page maître
contient l'attribut runat, défini sur server.
• Ajoutez l'attribut MasterPageFile à la directive Page et référencez la page
maître requise. Votre formulaire Web est désormais considéré comme une
page de contenu.
• Ajoutez le nombre requis de contrôles Content à la page de contenu, en
référençant les contrôles ContentPlaceHolder sur la page maître référencée.
• Déplacez les contrôles existants vers les contrôles Content.
• Pensez à déplacer tous les styles existants, qu'ils soient inline ou stockés dans
un fichier CSS, vers la page maître ou vers un fichier CSS utilisé par la page
maître.
• Disposez les contrôles serveur dans les contrôles Content. Bien que vous
ne puissiez pas placer les contrôles serveur en dehors des contrôles Content,
vous bénéficiez toujours d'un contrôle total sur leur disposition dans les
contrôles Content.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémenntation de pages maîtres et de contrôles utilisateuur 5-25

Discussion : Avanttages des pa


ages maîtres

Points clés
L'utilisaation de pages maaîtres présente pllusieurs avantagees. En effet, cela vous
permet d'exécuter les op pérations suivantees :
• amééliorer la mainten
nance des sites Web,
W car vous pou uvez appliquer dees mises
à jo
our à un emplacemment qui affecterront toutes les pages de contenu sur le
sitee Web ;
• défi de page séparément, puis la réutilliser sur plusieurss pages ;
finir une portion d
• obttenir une disposittion précise de la page Web, car vo
ous contrôlez l'afffichage
du contenu ;
• défi
finir une dispositiion verrouillée avvec des espaces rééservés modifiablles. Les
pagges de contenu nee permettent d'ajo outer ou de modifier du contenu que dans
les espaces réservés autorisés ;
• impplémenter un mo odèle d'objet qui vous
v permet d'accéder aux élémen nts de la
pagge maître à partir de pages de conttenu référençant la page maître ;
• parrtager les pages m
maîtres sur les pro
ojets d'application
n Web ;
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-26 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• créer facilement un en-tête ou un pied de page partagé ;


• imbriquer des pages maîtres, ce qui permet une disposition précise sur
chacune des pages de contenu, toutes basées sur une disposition générale ;
• remplacer éventuellement le contenu ou conserver le contenu par défaut des
pages maîtres ;
• apporter la même modification sur chaque page de votre application en ne
modifiant qu'un seul fichier, ce qui est particulièrement utile pour la gestion
d'applications volumineuses contenant des centaines de pages.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémenntation de pages maîtres et de contrôles utilisateuur 5-27

Leçon 2
Ajout de
e contrôle
es utilisatteur à un formulaiire
Web ASPP.NET

Un contrôle utilisateur eest une page ASP.NET que les autrres formulaires Web W
peuventt importer en tan nt que contrôle seerveur. À l'instar des
d contrôles servveur Web,
compossants exécutés su ur le serveur, les contrôles
c utilisateeur fournissent un
ne
interface utilisateur et d'aautres fonctionnaalités associées. Une
U fois que vouss avez
créé un contrôle utilisateeur, les autres pagges Web de la mêême application Web W
peuventt utiliser ce contrrôle.
Dans ceette leçon, vous ddécouvrirez les co ur et en quoi leur ajout
ontrôles utilisateu
aux app
plications Web esst utile. Vous apprendrez égalemen nt à référencer un
n
contrôlee utilisateur à parrtir d'un formulaiire Web ASP.NET T et à accéder auxx
propriétés dans un contrrôle utilisateur.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-28 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Objectifs de la leçon
Au terme de cette leçon, vous serez à même d'effectuer les tâches suivantes :
• décrire les contrôles utilisateur ;
• décrire les avantages et inconvénients de l'utilisation des contrôles utilisateur ;
• expliquer comment convertir un formulaire Web en contrôle utilisateur ;
• expliquer comment convertir un formulaire Web en contrôle utilisateur ;
• expliquer comment ajouter un contrôle utilisateur à un formulaire Web.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémenntation de pages maîtres et de contrôles utilisateuur 5-29

Présentation des ccontrôles utilisateur

Points clés
Les conntrôles utilisateur simplifient la réu utilisation du cod
de et des composaants
d'interfaace utilisateur com
mmuns. Pour dévvelopper des app plications Web AS
SP.NET
efficacess avec une possib bilité de réutilisattion, vous devez être
ê capable d'utiliser les
contrôlees utilisateur.

Contrô
ôles utilisateur
Les conntrôles utilisateur sont des pages AS SP.NET portant l'extension de fichhier .ascx.
Vous po ouvez créer un contrôle utilisateur en étendant la fonctionnalité d'un contrôle
serveur existant ; par exeemple, un contrôlee Calendar stockaant la date dans uneu zone
de textee. Les contrôles uttilisateur consisten
nt éventuellemen nt en plusieurs élééments
qui foncctionnent ensemb ble et interagissennt les uns avec les autres pour exécu uter une
tâche. Par exemple, vous pouvez regroupeer plusieurs contrrôles afin de rassembler les
informaations sur l'expérieence professionnelle d'un utilisateur.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-30 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Les contrôles utilisateur vous offrent la possibilité de partitionner et de réutiliser


les fonctionnalités d'interface utilisateur communes dans les applications Web
ASP.NET. Comme pour un formulaire Web, vous pouvez créer ces contrôles à
l'aide de Visual Studio 2010 et leur ajouter une logique en utilisant des classes
code-behind. Comme les pages de formulaire Web, les contrôles utilisateur sont
compilés à la première demande, puis stockés dans la mémoire du serveur afin
de réduire le temps de réponse aux demandes suivantes. Contrairement aux pages
de formulaire Web, il est impossible de demander les contrôles utilisateur de façon
indépendante et ceux-ci doivent être inclus dans une page de formulaire Web pour
fonctionner.

Remarque : Par défaut, un serveur Web (par exemple, IIS 7.0) empêche l'affichage des
fichiers portant l'extension .ascx dans un navigateur Web. Cette mesure de sécurité veille
à ce que le contrôle utilisateur n'apparaisse pas comme une page ASP.NET autonome.

Fonctionnalités des contrôles utilisateur


Un contrôle utilisateur consiste en des éléments HTML et du code. Cependant, les
contrôles utilisateur étant employés par les formulaires Web, ils ne contiennent pas
d'élément HTML de niveau supérieur, tel que les éléments html, body ou form.
Lorsqu'un formulaire Web utilise un contrôle utilisateur, ce dernier participe au
cycle de vie des événements du formulaire Web.
Le contrôle utilisateur étant une page ASP.NET, il possède sa propre logique de
page. Par exemple, un contrôle utilisateur gère son événement de publication dans
son gestionnaire d'événements Page_Load.

Fichiers code-behind des contrôles utilisateur


Les contrôles utilisateur contiennent la directive Control, qui équivaut à la
directive Page contenue dans un formulaire Web. Si vous choisissez de placer
le code du contrôle utilisateur dans un fichier code-behind distinct, la directive
Control référence le fichier code-behind. Vous ne pouvez inclure qu'une seule
directive Control par fichier .ascx.
Les exemples suivants contiennent la directive Control d'un contrôle utilisateur
nommé WebUserControl.

[Visual Basic]

<%@ Control Language="VB" AutoEventWireup="false"


CodeFile="WebUserControl.ascx.vb" Inherits="WebUserControl" %>
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémentation de pages maîtres et de contrôles utilisateur 5-31

[Visual C#]

<%@ Control Language="C#" AutoEventWireup="true"


CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %>

Remarque : la directive Control prend en charge beaucoup d'attributs de la directive


Page. Toutefois, la directive Control ne prend pas en charge l'attribut Trace. Par
conséquent, si vous souhaitez activer le traçage pour le contrôle utilisateur, vous devez
ajouter l'attribut Trace à la directive Page de la page .aspx appelant le contrôle
utilisateur. Pour plus d'informations sur le traçage, consultez le module 7, « Résolution
des problèmes liés aux applications Web Microsoft ASP.NET ».

Contrôles utilisateur, contrôles de serveur Web et composants


Vous devez pouvoir distinguer les contrôles utilisateur, les contrôles serveur Web
et les composants. Le tableau suivant décrit les spécificités des composants et des
contrôles.

Composants et contrôles Description

Composant Un composant, également appelé bibliothèque de


classes dans Visual Studio 2010, ne fournit que la
logique ; il ne possède pas d'interface utilisateur.

Contrôle serveur Web Les contrôles serveur Web incluent des contrôles de
type formulaire, tels que les boutons et zones de texte,
ainsi que des contrôles spécifiques comme le
calendrier. Vous pouvez également créer des contrôles
serveur Web compilés personnalisés, constituant un
type de composant particulier qui fournit une interface
utilisateur.

Contrôle utilisateur Contrairement aux contrôles serveur Web, un contrôle


utilisateur doit disposer d'une interface utilisateur aux
moments de la conception et de l'exécution. Vous
pouvez également écrire du code pour implémenter
ses fonctionnalités.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-32 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Avanttages et inco
onvénients de
d l'utilisation
n des contrô
ôles
utilisa
ateur

Points clés
La préseence de contrôless utilisateur danss vos applicationss Web ASP.NET présente
p
plusieurrs avantages. Les contrôles utilisateur sont autonomes, réutilisabless
plusieurrs fois et peuventt être écrits dans un langage de prrogrammation diffférent
de celuii utilisé pour la page d'hébergemeent principale.
Les conntrôles utilisateur servent généraleement à créer de petites
p unités de
disposittion et de code uttilisées plusieurs fois dans une ap pplication Web. Cela
C
inclut laa connexion, la vaalidation, la naviggation, les barres d'outils et d'autrres
fonction nnalités similairess.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémentation de pages maîtres et de contrôles utilisateur 5-33

Avantages des contrôles utilisateur


Les contrôles utilisateur possèdent de nombreuses fonctions ; par exemple, vous
pouvez créer des en-têtes et des barres de navigation, ou répéter des blocs de code
dans un projet d'application Web ou un projet de site Web. Les contrôles
utilisateur offrent également les avantages suivants lorsque vous développez une
application Web :
• Les contrôles utilisateur sont autonomes. Ils fournissent des espaces de noms
de variables distincts ; ainsi, aucune des méthodes et propriétés du contrôle
utilisateur n'est en conflit avec les méthodes ou propriétés existantes de la
page d'hébergement.
• Les contrôles utilisateur sont réutilisables. Vous pouvez vous en servir
plusieurs fois sur une page d'hébergement, sans générer de conflit de propriété
ou de méthode.
• Il est possible d'écrire les contrôles utilisateur dans un langage différent de
celui utilisé pour la page d'hébergement principale. Par exemple, un contrôle
utilisateur écrit dans Microsoft Visual C#® peut être utilisé dans un formulaire
Web écrit dans Microsoft Visual Basic®.
• Les contrôles utilisateur peuvent être partagés dans une application Web.
Vous avez la possibilité de partager un contrôle utilisateur unique dans toutes
les pages d'une application Web.

Inconvénients des contrôles utilisateur


Les contrôles utilisateur présentent quelques inconvénients lorsque vous développez
une application Web :
• L'interface utilisateur et le code peuvent être dupliqués. Lorsque vous partagez
un contrôle utilisateur entre des applications Web, il est difficile de maintenir
l'interface utilisateur et le code. En effet, s'il s'agit d'un contrôle utilisateur
générique, vous devrez en modifier toutes les instances. Si le code du contrôle
utilisateur est générique ou non abstrait au niveau de la logique, vous devez
réécrire ou modifier le code pour chaque utilisation appliquée.
• Le code est visible. Le fichier code-behind est visible pour toutes les personnes
ayant accès à l'application Web déployée, à moins de précompiler
l'application Web.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-34 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Partage des contrôles utilisateur


Vous avez la possibilité de partager un contrôle utilisateur unique dans toutes les
pages d'une application Web. Toutefois, les pages .aspx d'une application Web ne
peuvent pas héberger de contrôle utilisateur issu d'une autre application Web. Pour
utiliser un contrôle utilisateur dans plusieurs applications Web, vous devez copier le
contrôle utilisateur dans le dossier racine virtuel de chaque application Web.
Pour partager des contrôles avec plusieurs applications Web, vous pouvez créer un
contrôle Web personnalisé, qui agit comme un contrôle utilisateur qu'il est possible
de partager, et l'ajouter à la boîte à outils d'une application Web. Les contrôles Web
personnalisés sont plus difficiles à créer que les contrôles utilisateur. Ceci est dû au
fait que, contrairement aux contrôles utilisateur, vous ne pouvez pas créer de
contrôle Web personnalisé à l'aide de Visual Studio 2010 ; tout le développement
n'est effectué qu'au moyen de code. Pour créer un contrôle Web personnalisé, vous
devez créer une classe dérivée de la classe Control ou WebControl.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémenntation de pages maîtres et de contrôles utilisateuur 5-35

Conve
ersion d'un fformulaire Web
W en contrrôle utilisate
eur

Points clés
Si vous n'incluez pas de contrôle utilisateeur lors du dévelo oppement initial de votre
projet d'application
d Web b, vous pouvez to oujours en ajouterr un ou plusieurss
ultérieu
urement. En fait, iil est parfois préféérable de créer dees contrôles utilissateur
une foiss le développemeent commencé ; à ce stade, vous seerez en mesure d''identifier
les élém
ments dupliqués d dans vos formulaaires Web. Les forrmulaires Web éttant
semblab bles aux contrôlees utilisateur, vouus pouvez facilem ment convertir un
formulaaire Web en contrrôle utilisateur.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-36 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Conversion d'un formulaire Web existant en contrôle utilisateur


Vous pouvez facilement modifier un formulaire Web pour le convertir en contrôle
utilisateur. Voici le processus de conversion d’un formulaire Web en contrôle
utilisateur :
• Supprimez du formulaire Web tous les éléments HTML de niveau supérieur,
y compris les éléments html, head, body et form.
• Changez la directive Page existante en directive Control. Supprimez tous les
attributs de la directive, à l'exception des attributs Language, AutoEventWireup
(le cas échéant), CodeFile et Inherits.

Remarque : pour plus d'informations sur les attributs pris en charge par les directives
Page et Control, consultez la section relative à la syntaxe des directives dans la
documentation de Visual Studio 2010.

• Ajoutez un attribut ClassName à la directive Control. L'attribut ClassName


permet au contrôle utilisateur d'être fortement typé lorsque vous l'ajoutez à
la page.
• Renommez le fichier avec un nom reflétant sa fonction, puis remplacez
l'extension de fichier .aspx par .ascx. Le formulaire Web devient un contrôle
utilisateur.

Remarque : si le formulaire Web contient un fichier code-behind, vous devez également


remplacer l'extension de fichier de cette page par .ascx.cs ou .ascx.vb. De plus, remplacez
le type dont hérite la classe System.Web.UI.Page par System.Web.UI.UserControl.

• Ajoutez des propriétés au contrôle utilisateur pour permettre un accès contrôlé


aux données privées contenues dans le contrôle utilisateur, le cas échéant. Ces
propriétés fonctionnent de la même façon qu'avec un formulaire Web.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémentation de pages maîtres et de contrôles utilisateur 5-37

Conversion d'un fichier code-behind en contrôle utilisateur


Vous pouvez également convertir un fichier code-behind en contrôle utilisateur en
procédant comme suit :
1. Renommez le fichier .aspx avec l'extension de nom de fichier .ascx.
2. Renommez le fichier code-behind avec l'extension de nom de fichier .ascx.vb
ou .ascx.cs, en fonction du langage de programmation du fichier code-behind.
3. Ouvrez le fichier code-behind et remplacez la classe Page dont il hérite par
UserControl.
4. Dans le fichier .ascx, procédez comme suit :
a. Supprimez les éléments html, body et form de la page.
b. Changez la directive Page en directive Control.
c. Supprimez tous les attributs de la directive Control, à l'exception des
attributs Language, AutoEventWireup (le cas échéant), CodeFile et
Inherits.
d. Dans la directive Control, modifiez l'attribut CodeFile de telle sorte qu'il
pointe vers le fichier code-behind renommé.
5. Incluez un attribut className dans la directive Control. Cela permet au
contrôle utilisateur d'être fortement typé lors de son ajout à la page.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-38 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Démoonstration : CComment co
onvertir un fo
ormulaire Web
W en
contrô
ôle utilisateu
ur

Dans ceette démonstratioon, vous découvriirez comment con


nvertir un formullaire
Web enn contrôle utilisateeur.

Procéd
dure de démonsstration
1. Ouvvrez une session sur 10557A-GEN
N-DEV en tant qu
ue Stagiaire avecc le mot
de passe
p Pa$$w0rd.
2. Ouvvrez la solution C
CustomerManaggement à partir du
u dossier
D:\
\Demofiles\M5\V VB ou D:\Demofiiles\M5\CS.
a. Dans le menu D
Démarrer de 10557A-GEN-DEV, pointez
p sur Tous les
programmes, clliquez sur Microsoft Visual Studio 2010, puis surr
Microsoft Visua
al Studio 2010.
b. Fichier de Visual Studio 2010, cliq
Dans le menu F quez sur Ouvrir un
u projet.
c. Dans la boîte dee dialogue Ouvrirr un projet, danss la zone Nom dee fichier,
tapez D:\Demo ofiles\M5\VB\Cu ustomerManagem ment.sln ou
D:\Demofiles\M M5\CS\CustomerrManagement.sln n, puis cliquez surr Ouvrir.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémentation de pages maîtres et de contrôles utilisateur 5-39

3. Ouvrez le formulaire Web InsertCustomer.aspx et changez sa directive Page


en directive Control.

[Visual Basic]
<%@ Control Language="VB" AutoEventWireup="false"
CodeFile="InsertCustomer.aspx.vb" Inherits="InsertCustomer" %>

[Visual C#]
<%@ Control Language="C#" AutoEventWireup="true"
CodeFile="InsertCustomer.aspx.cs" Inherits="InsertCustomer" %>

a. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur


InsertCustomer.aspx, puis cliquez sur Ouvrir.
b. Dans la fenêtre InsertCustomer.aspx, localisez la directive Page et
changez-la en directive Control.

[Visual Basic]
<%@ Control Language="VB" AutoEventWireup="false"
CodeFile="InsertCustomer.aspx.vb" Inherits="InsertCustomer" %>

[Visual C#]
<%@ Control Language="C#" AutoEventWireup="true"
CodeFile="InsertCustomer.aspx.cs" Inherits="InsertCustomer" %>

4. Ajoutez une propriété ClassName avec la valeur InsertCustomer à la directive


Control.

[Visual Basic]
<%@ Control Language="VB" AutoEventWireup="false"
CodeFile="InsertCustomer.aspx.vb" Inherits="InsertCustomer"
ClassName="InsertCustomer" %>

[Visual C#]
<%@ Control Language="C#" AutoEventWireup="true"
CodeFile="InsertCustomer.aspx.cs" Inherits="InsertCustomer"
ClassName="InsertCustomer" %>

• Dans la fenêtre InsertCustomer.aspx, ajoutez le code suivant à la fin de la


directive Control.

ClassName="InsertCustomer"
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-40 Introduction au développement Web avec Microsoft® Visual Studio® 2010

5. Dans la fenêtre InsertCustomer.aspx, supprimez tous les éléments HTML de


niveau supérieur, tels que les éléments DOCTYPE, html, head, body, title,
link et form.

Remarque : veillez à ne pas supprimer l'élément div et le contenu de l'élément form.


Les balises d'ouverture et de fermeture de chacun de ces éléments, le cas échéant,
doivent être supprimées.

Remarque : Une fois tous les éléments de niveau supérieur supprimés, vous obtiendrez
le code suivant.

[Visual Basic]

<%@ Control Language="VB" AutoEventWireup="false"


CodeFile="InsertCustomer.aspx.vb" Inherits="InsertCustomer"
ClassName="InsertCustomer" %>

<div class="customertable">
<div class="customertablerow">
<div class="customertableleftcol">
<asp:Label ID="CustomerNameLabel" runat="server"
Text="Name:"></asp:Label>
</div>
<div class="customertablerightcol">
<asp:TextBox ID="CustomerNameTextBox"
runat="server" MaxLength="50"></asp:TextBox>
</div>
</div>
<div class="customertablerow">
<div class="customertableleftcol">
<asp:Label ID="CustomerAddressLabel"
runat="server" Text="Address:"></asp:Label>
</div>
<div class="customertablerightcol">
<asp:TextBox ID="CustomerAddressTextBox"

(Pour la suite du code, reportez-vous à sur la page suivante.)


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémentation de pages maîtres et de contrôles utilisateur 5-41

runat="server" MaxLength="50"></asp:TextBox>
</div>
</div>
<div class="customertablerow">
<div class="customertableleftcol">
<asp:Label ID="CustomerPhoneLabel" runat="server"
Text="Phone:"></asp:Label>
</div>
<div class="customertablerightcol">
<asp:TextBox ID="CustomerPhoneTextBox"
runat="server" MaxLength="30"></asp:TextBox>
</div>
</div>
<div class="customertablerow">
<div class="customertableleftcol">
<asp:Label ID="CustomerZipCodeLabel"
runat="server" Text="Zip Code:"></asp:Label>
</div>
<div class="customertablerightcol">
<asp:TextBox ID="CustomerZipCodeTextBox"
runat="server" MaxLength="10"></asp:TextBox>
</div>
</div>
<div class="customertablerow">
<div class="customertableleftcol">
<asp:Label ID="CustomerCityLabel" runat="server"
Text="City:"></asp:Label>
</div>
<div class="customertablerightcol">
<asp:TextBox ID="CustomerCityTextBox"
runat="server" MaxLength="30"></asp:TextBox>
</div>
</div>
<div class="customertablerow">
<div class="customertableleftcol">
<asp:Label ID="CustomerStateLabel" runat="server"
Text="State:"></asp:Label>
</div>
<div class="customertablerightcol">
<asp:TextBox ID="CustomerStateTextBox"
runat="server" MaxLength="30"></asp:TextBox>
</div>
</div>
<div class="customertablerow">
<div class="customertableleftcol">
<asp:Label ID="CustomerEmailAddressLabel"

(Pour la suite du code, reportez-vous à sur la page suivante.)


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-42 Introduction au développement Web avec Microsoft® Visual Studio® 2010

runat="server" Text="Email Address:"></asp:Label>


</div>
<div class="customertablerightcol">
<asp:TextBox ID="CustomerEmailAddressTextBox"
runat="server" MaxLength="40"></asp:TextBox>
</div>
</div>
<div class="customertablefooter">
</div>
<asp:Button ID="CustomerInsertButton" runat="server"
Text="Insert" />
&nbsp;<asp:Button ID="CustomerCancelButton" runat="server"
Text="Cancel" />
</div>

[Visual C#]
<%@ Control Language="C#" AutoEventWireup="true"
CodeFile="InsertCustomer.aspx.cs" Inherits="InsertCustomer"
ClassName="InsertCustomer" %>

<div class="customertable">
<div class="customertablerow">
<div class="customertableleftcol">
<asp:Label ID="CustomerNameLabel" runat="server"
Text="Name:"></asp:Label>
</div>
<div class="customertablerightcol">
<asp:TextBox ID="CustomerNameTextBox"
runat="server" MaxLength="50"></asp:TextBox>
</div>
</div>
<div class="customertablerow">
<div class="customertableleftcol">
<asp:Label ID="CustomerAddressLabel"
runat="server" Text="Address:"></asp:Label>
</div>
<div class="customertablerightcol">
<asp:TextBox ID="CustomerAddressTextBox"
runat="server" MaxLength="50"></asp:TextBox>
</div>
</div>
<div class="customertablerow">
<div class="customertableleftcol">
<asp:Label ID="CustomerPhoneLabel"

(Pour la suite du code, reportez-vous à sur la page suivante.)


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémentation de pages maîtres et de contrôles utilisateur 5-43

runat="server" Text="Phone:"></asp:Label>
</div>
<div class="customertablerightcol">
<asp:TextBox ID="CustomerPhoneTextBox"
runat="server" MaxLength="30"></asp:TextBox>
</div>
</div>
<div class="customertablerow">
<div class="customertableleftcol">
<asp:Label ID="CustomerZipCodeLabel"
runat="server" Text="Zip Code:"></asp:Label>
</div>
<div class="customertablerightcol">
<asp:TextBox ID="CustomerZipCodeTextBox"
runat="server" MaxLength="10"></asp:TextBox>
</div>
</div>
<div class="customertablerow">
<div class="customertableleftcol">
<asp:Label ID="CustomerCityLabel" runat="server"
Text="City:"></asp:Label>
</div>
<div class="customertablerightcol">
<asp:TextBox ID="CustomerCityTextBox"
runat="server" MaxLength="30"></asp:TextBox>
</div>
</div>
<div class="customertablerow">
<div class="customertableleftcol">
<asp:Label ID="CustomerStateLabel" runat="server"
Text="State:"></asp:Label>
</div>
<div class="customertablerightcol">
<asp:TextBox ID="CustomerStateTextBox"
runat="server" MaxLength="30"></asp:TextBox>
</div>
</div>
<div class="customertablerow">
<div class="customertableleftcol">
<asp:Label ID="CustomerEmailAddressLabel"
runat="server" Text="Email Address:"></asp:Label>
</div>
<div class="customertablerightcol">
<asp:TextBox ID="CustomerEmailAddressTextBox"

(Pour la suite du code, reportez-vous à sur la page suivante.)


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-44 Introduction au développement Web avec Microsoft® Visual Studio® 2010

runat="server" MaxLength="40"></asp:TextBox>
</div>
</div>
<div class="customertablefooter">
</div>
<asp:Button ID="CustomerInsertButton" runat="server"
Text="Insert"
onclick="CustomerInsertButton_Click" />
&nbsp;<asp:Button ID="customerCancelButton" runat="server"
Text="Cancel"
onclick="CustomerCancelButton_Click" />
</div>

6. Enregistrez le formulaire Web InsertCustomer.aspx.


• Dans la fenêtre CustomerManagement — Microsoft Visual Studio
(Administrateur), dans le menu Fichier, cliquez sur Enregistrer
InsertCustomer.aspx.
7. Renommez le formulaire Web InsertCustomer.aspx en InsertCustomer.ascx.
a. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur
InsertCustomer.aspx, cliquez sur Renommer, remplacez le nom de
fichier par InsertCustomer.ascx, puis appuyez sur Entrée.
b. Dans la boîte de message Microsoft Visual Studio, cliquez sur Oui.
8. Ouvrez le fichier code-behind du contrôle utilisateur, InsertCustomer.ascx.vb
ou InsertCustomer.ascx.cs, et remplacez sa classe de base System.Web.UI.Page
par System.Web.UI.UserControl.

[Visual Basic]
Partial Class InsertCustomer
Inherits System.Web.UI.UserControl

[Visual C#]
public partial class InsertCustomer : System.Web.UI.UserControl

a. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur


InsertCustomer.ascx.vb ou InsertCustomer.ascx.cs, puis cliquez sur
Ouvrir.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémentation de pages maîtres et de contrôles utilisateur 5-45

b. Dans la fenêtre de code InsertCustomer.ascx.vb ou InsertCustomer.ascx.cs,


localisez la classe InsertCustomer et changez sa propriété
System.Web.UI.Page en System.Web.UI.UserControl.

[Visual Basic]
Partial Class InsertCustomer
Inherits System.Web.UI.UserControl

[Visual C#]
public partial class InsertCustomer :
System.Web.UI.UserControl

9. Déplacez le contenu de la méthode d'événement Page_LoadComplete et


ajoutez-le à la méthode d'événement Page_Load.

[Visual Basic]
Protected Sub Page_Load(ByVal sender As Object, ByVal e As
System.EventArgs) Handles Me.Load
' Instantiate Customer
instantiateCustomerObject()
' Populate the UI controls
populateUI()
End Sub

[Visual C#]
protected void Page_Load(object sender, EventArgs e)
{
// Instantiate Customer
instantiateCustomerObject();
// Populate the UI controls
populateUI();
}
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-46 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Dans la fenêtre de code InsertCustomer.ascx.vb ou InsertCustomer.ascx.cs,


dans la méthode d'événement Page_LoadComplete, sélectionnez le code
suivant et cliquez dessus avec le bouton droit, puis cliquez sur Couper.

[Visual Basic]
' Populate the UI controls
populateUI()

[Visual C#]
// Populate the UI controls
populateUI();

• Dans la fenêtre de code InsertCustomer.ascx.vb ou InsertCustomer.ascx.cs,


ajoutez le code copié à la méthode d'événement Page_Load.

[Visual Basic]
Protected Sub Page_Load(ByVal sender As Object, ByVal e As
System.EventArgs) Handles Me.Load
' Instantiate Customer
instantiateCustomerObject()
' Populate the UI controls
populateUI()
End Sub

[Visual C#]
protected void Page_Load(object sender, EventArgs e)
{
// Instantiate Customer
instantiateCustomerObject();
// Populate the UI controls
populateUI();
}

10. Dans la fenêtre de code InsertCustomer.ascx.vb ou InsertCustomer.ascx.cs,


supprimez la méthode d'événement Page_LoadComplete.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémentation de pages maîtres et de contrôles utilisateur 5-47

11. Générez la solution.


• Dans la fenêtre CustomerManagement — Microsoft Visual Studio
(Administrateur), dans le menu Build, cliquez sur Générer la solution.
12. Enregistrez et fermez le fichier code-behind du contrôle utilisateur.
a. Dans la fenêtre CustomerManagement — Microsoft Visual Studio
(Administrateur), dans le menu Fichier, cliquez sur Enregistrer
InsertCustomer.ascx.vb ou sur Enregistrer InsertCustomer.ascx.cs.
b. Dans la fenêtre de code InsertCustomer.ascx.vb ou InsertCustomer.ascx.cs,
cliquez sur le bouton Fermer.
c. Dans la fenêtre InsertCustomer.ascx, cliquez sur le bouton Fermer.
d. Dans la fenêtre CustomerManagement — Microsoft Visual Studio
(Administrateur), cliquez sur le bouton Fermer.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-48 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Ajoutt d'un contrô


ôle utilisateur à un formu
ulaire Web

Points clés
Vous poouvez placer un ccontrôle utilisateu ur dans un formu ulaire Web ASP.NNET. La
page réfférençant le contrrôle utilisateur s'aappelle un hôte et
e le contrôle est inclus
i
dans cet hôte.

Inclusiion des contrôlles utilisateur


Vous po ouvez inclure un contrôle utilisateeur dans un form mulaire Web ASP.N
NET à
l'aide dee la directive Reg
gister. Le code suivant illustre cettte opération.

<%@ Re
egister src="We
ebUserControl.as
scx" tagname="W
WebUserControl"
tagpre
efix="uc1" %>

L'attribuut TagPrefix déteermine un espacee de noms uniquee pour le contrôlee


utilisateeur et différencie plusieurs contrôlles utilisateur porrtant le même no om.
L'attribuut TagName reprrésente le nom un nique du contrôlle utilisateur. L'attribut
Src défiinit le chemin virttuel vers le fichier du contrôle utillisateur.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémentation de pages maîtres et de contrôles utilisateur 5-49

Insertion du contrôle utilisateur dans un formulaire Web


Une fois que vous avez inscrit le contrôle utilisateur à l'aide de la directive Register,
vous pouvez placer sa balise dans le formulaire Web de la même façon que vous
placeriez un contrôle serveur Web dans un formulaire Web. Le code suivant ajoute
un contrôle utilisateur à un formulaire Web.

<uc1:WebUserControl ID="WebUserControl1" runat="server" />

Remarque : vous pouvez glisser et déplacer un contrôle utilisateur de l'Explorateur de


solutions vers un formulaire Web. Lorsque vous déplacez un contrôle utilisateur dans un
formulaire Web en mode Création, Visual Studio 2010 ajoute automatiquement la
directive Register et la balise du contrôle utilisateur au balisage de la page.

Lorsqu'un utilisateur demande le formulaire Web sur lequel le contrôle utilisateur est
placé, l'exécution compile le fichier du contrôle utilisateur et le met à disposition sur
la page.

Définition de propriétés publiques


Si le contrôle utilisateur que vous avez ajouté au formulaire Web dispose de
propriétés publiques, vérifiez si celles-ci doivent être définies pour initialiser le
contrôle utilisateur. Les propriétés peuvent être définies de façon déclarative dans
le balisage, dans la fenêtre Propriétés. Vous y accédez également à partir du code.
L'exemple suivant définit la propriété Name du contrôle utilisateur sur la valeur
Gregory Weber.

[Visual Basic]
WebUserControl1.Name = "Gregory Weber"

[Visual C#]
WebUserControl1.Name = "Gregory Weber";

Si la propriété publique est accessible en lecture-écriture, vous pouvez également


écrire les valeurs dans votre formulaire Web, tout comme vous écrivez les autres
propriétés.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-50 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Exemple de contrôle utilisateur


Voici d'autres exemples illustrant une page Web ASP.NET qui contient un contrôle
utilisateur. Le contrôle utilisateur figure dans le fichier Spinner.ascx, sous le
dossier Controls. Sur la page, le contrôle est inscrit de façon à utiliser le préfixe uc
et le nom de la balise Spinner. Les propriétés de contrôle utilisateur MinValue et
MaxValue sont définies de manière déclarative.

[Visual Basic]
<%@ Page Language="VB" %>
<%@ Register TagPrefix="uc" TagName="Spinner"
Src="~\Controls\Spinner.ascx" %>
<html>
<body>
<form runat="server">
<uc:Spinner id="Spinner1" runat="server" MinValue="1"
MaxValue="10" />
</form>
</body>

[Visual C#]
<%@ Page Language="C#" %>
<%@ Register TagPrefix="uc" TagName="Spinner"
Src="~\Controls\Spinner.ascx" %>
<html>
<body>
<form runat="server">
<uc:Spinner id="Spinner1" runat="server" MinValue="1"
MaxValue="10" />
</form>
</body>

Question : quelle est la différence entre les attributs TagPrefix, TagName et Src ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémenntation de pages maîtres et de contrôles utilisateuur 5-51

Atelier pratique
p : Impléme entation de pagess
maîtres et
e de conntrôles uttilisateur

Remarqque : dans cet ateliier pratique, vous pouvez


p exécuter lees tâches en utilisa
ant le
langage de programmatio on Visual Basic ou Visual
V C#. Si vous utilisez Visual Basiic comme
langage de programmatio on, reportez-vous aux
a instructions fo ournies dans la section 1 du
documeent de l'atelier prattique correspondant. Si vous utilisez Visual C# comme langage
de programmation, reporttez-vous aux instru uctions fournies da ans la section 2 duu
documeent de l'atelier prattique correspondant.

Introdu
uction
Dans ceet atelier pratiquee, vous implémennterez des pages maîtres
m et des con
ntrôles
utilisateeur dans un projeet Web ASP.NET. Vous ajouterez également
é des fon
nctions
de naviggation vers la pagge maître et conveertirez un formullaire Web en con
ntrôle
utilisateeur.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-52 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Objectifs
Au terme de cet atelier pratique, vous serez à même d'effectuer les tâches suivantes :

• ajouter et appliquer une page maître à une application Web ;


• convertir un formulaire Web en page de contenu ;
• ajouter une fonction de navigation à la page maître ;
• convertir un formulaire Web en contrôle utilisateur ;
• créer une page de contenu ;
• insérer un contrôle utilisateur dans une page de contenu.

Configuration de l'atelier pratique


Pour cet atelier pratique, vous utiliserez l'environnement d'ordinateurs virtuels
disponible. Avant de commencer l'atelier pratique, vous devez :

• Démarrer l'ordinateur virtuel 10557A-GEN-DEV, puis vous connecter à l'aide


des informations d'identification suivantes :
• Nom d'utilisateur : Stagiaire
• Mot de passe : Pa$$w0rd
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémenntation de pages maîtres et de contrôles utilisateuur 5-53

Scéna
ario de l'ateliier pratique

Vous êtes développeur cchez Contoso, Ltd d, une grande enttreprise disposan
nt d'une
base de clients mondialee. Votre organisattion gère ses inforrmations clients via
v un
site Web b. Elle a décidé d
de modifier ce sitee Web afin de fou
urnir une expérience
utilisateeur cohérente à toous ses clients.
Pour ce faire, vous devezz ajouter une pagge maître et conveertir un formulairre Web
existantt en contrôle utiliisateur en vue de le réutiliser. Vou
us devez égalemen nt
ajouter une fonction de n navigation à la paage maître. Un reesponsable dévelo oppeur
a déjà crréé une partie duu code permettan nt d'ajouter une foonction de navigaation au
site Web b et le développeeur a créé un docu ument XML de planp de site. Ce co
ode et ce
documeent vous serviron nt à ajouter une fo
onction de navigaation à la page maaître. Par
ailleurs,, vous devez convvertir un formulaaire Web en page de contenu, dépllacer le
contenu u de cette page veers la page maîtree et créer une autrre page de contennu avec
un conttrôle utilisateur.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-54 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Section 1 : Visual Basic


Exercice 1 : Ajout et application d'une page maître
Dans cet exercice, les tâches principales sont les suivantes :

1. Ajouter une page maître à un site Web existant.

2. Initialiser les contrôles et éléments de style sur la page maître.

3. Définir un contrôle ContentPlaceHolder sur la page maître.

f Tâche 1 : ajouter une page maître à un site Web existant


• Ouvrez une session sur 10557A-GEN-DEV en tant que Stagiaire avec le mot
de passe Pa$$w0rd.
• Ouvrez Microsoft Visual Studio 2010.
• Ouvrez la solution CustomerManagement située dans le dossier
D:\Labfiles\Starter\M5\VB.
• Ajoutez une nouvelle page maître nommée Site.master au site Web
CustomerManagement.

f Tâche 2 : initialiser les contrôles et éléments de style sur la page


maître
• Dans la fenêtre Site.master, ajoutez une propriété id à l'élément head à l'aide
du code suivant.

<head runat="server" id="MainHead">

• Dans la fenêtre Site.master, changez la propriété id de l'élément form en


MainForm.

<form id="MainForm" runat="server">

• Référencez le fichier Site.css dans le formulaire Web Site.master, par rapport


au dossier racine, en plaçant le balisage ci-dessous à la suite de la balise de
fermeture de l'élément title.

<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémentation de pages maîtres et de contrôles utilisateur 5-55

• Dans la fenêtre Site.master, ajoutez une propriété Class à l'élément body à


l'aide du balisage suivant.

<body class="template">

• Dans la fenêtre Site.master, ajoutez une propriété Class à l'élément div à l'aide
du balisage suivant.

<div class="content">

• Dans la fenêtre Site.master, définissez la valeur de l'élément title sur Contoso


Customer Management à l'aide du code suivant.

<title>Contoso Customer Management</title>

f Tâche 3 : définir un contrôle ContentPlaceHolder sur la page maître


• Supprimez la valeur ContentPlaceHolder de l'élément head.

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


</asp:ContentPlaceHolder>

• Modifiez la propriété id du contrôle ContentPlaceHolder contenu dans


l'élément div avec la valeur MainContentPlaceHolder.

<div class="content">
<asp:ContentPlaceHolder id="MainContentPlaceHolder"
runat="server">
</asp:ContentPlaceHolder>

</div>

• Enregistrez la page maître.

Résultats : au terme de cet exercice, vous aurez créé une page maître nommée
Site.master et défini un contrôle ContentPlaceHolder dans celle-ci.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-56 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Exercice 2 : Conversion de formulaires Web en pages de


contenu et contrôles utilisateur
Dans cet exercice, les tâches principales sont les suivantes :

1. convertir le formulaire Web par défaut en page de contenu ;

2. ajouter une fonction de navigation à la page maître ;

3. convertir le formulaire Web en contrôle utilisateur ;

4. créer une page de contenu et insérer un contrôle utilisateur.

f Tâche 1 : convertir le formulaire Web par défaut en page de contenu


• Ouvrez le formulaire Web Default.aspx.
• Dans la fenêtre Default.aspx, dans la directive Page, ajoutez une propriété
MasterPageFile avec la valeur ~/Site.master, à l'aide du code suivant.

<%@ Page Language="VB" AutoEventWireup="false"


CodeFile="Default.aspx.vb"
Inherits="_Default" MasterPageFile="~/Site.master"%>

• Supprimez les éléments HTML de niveau supérieur dans le formulaire Web


Default.

Remarque : veillez à ne pas supprimer l'élément div et son contenu dans l'élément form.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Styles/Site.css" rel="stylesheet" type="text/css"
/>
</head>
<body>
<form id="form1" runat"server">
</form>
</body>
</html>
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémentation de pages maîtres et de contrôles utilisateur 5-57

• Dans la fenêtre Default.aspx, ajoutez un contrôle Content côté serveur.

<asp:Content ID="MainContent"
ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
</asp:Content>

• Dans la fenêtre Default.aspx, déplacez le code suivant et placez-le après la


balise d'ouverture de l'élément form dans la page maître Site.master.

<div class="appTitle">
<asp:Literal ID="AppTitleLiteral" runat="server"
Text="Customer Management"></asp:Literal>
</div>

• Mettez en forme la page maître Site.master en appuyant sur Ctrl+K, puis sur
Ctrl+D.
• Enregistrez les modifications apportées à la page maître Site.master.
• Mettez en forme le formulaire Web Default.aspx en appuyant sur Ctrl+K, puis
sur Ctrl+D.
• Enregistrez le formulaire Web Default.aspx, puis fermez-le.

f Tâche 2 : ajouter une fonction de navigation à la page maître


• Ajoutez un chemin de navigation à la page maître en ajoutant un contrôle
SiteMapPath nommé MainSiteMapPath, inclus dans l'élément div avec une
valeur d'attribut class définie sur siteMapPath. Ajoutez le nouvel élément div
sous l'élément div existant avec une valeur d'attribut class définie sur appTitle.

<div class="siteMapPath">
<asp:SiteMapPath ID="MainSiteMapPath" runat="server" />
</div>
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-58 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Ajoutez un menu à page maître en ajoutant un contrôle Menu nommé


MainMenu, inclus dans l'élément div avec une valeur d'attribut class définie
sur menu. Ajoutez le nouvel élément div sous l'élément div existant avec une
valeur d'attribut class définie sur siteMapPath.

<div class="menu">
<asp:Menu ID="MainMenu" runat="server">
</asp:Menu>
</div>

• Obtenez une disposition de menu horizontale en appliquant l'attribut


Orientation.

Orientation="Horizontal"

• Assurez-vous que l'image intégrée, indiquant si un élément de menu statique


possède un menu enfant, n'apparaît pas, en définissant l'attribut
StaticEnableDefaultPopOutImage.

StaticEnableDefaultPopOutImage="false"

• Obtenez les éléments du contrôle Menu à partir du contrôle de source de


données MainSiteMapDataSource, en appliquant l'attribut DataSourceID.

DataSourceID="MainSiteMapDataSource"

• Ajoutez les éléments enfant suivants au contrôle Menu, en les plaçant entre les
balises Menu d'ouverture et de fermeture.

<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px"


/>
<StaticHoverStyle BackColor="White" ForeColor="Black" />
<DynamicHoverStyle BackColor="White" ForeColor="Black" />
<DynamicMenuItemStyle ItemSpacing="2px" HorizontalPadding="5px"
VerticalPadding="2px" />
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémentation de pages maîtres et de contrôles utilisateur 5-59

• Ajoutez un contrôle SiteMapDataSource nommé MainSiteMapDataSource à


la page maître après la balise de fermeture de l'élément div, avec une valeur
d'attribut class définie sur menu. Le contrôle SiteMapDataSource ne doit pas
afficher le nœud de démarrage.

<asp:SiteMapDataSource ID="MainSiteMapDataSource" runat="server"


ShowStartingNode="false" />

• Mettez en forme la page maître Site.master.


• Ajoutez le fichier de plan de site D:\Labfiles\Starter\M5\web.sitemap au
projet.
• Modifiez le style div.menu à l'aide de la fenêtre Gérer les styles. Le style de
menu doit être défini comme suit :
• Catégorie : position
• Position : relative
• Index décroissant : 1
• top : 62px
• Ajoutez un style siteMapPath à l'aide de la fenêtre Gérer les styles. Le style
siteMapPath doit être défini comme suit :
• Sélecteur : div.siteMapPath
• Définir dans : Styles/Site.css
• Catégorie : position
• Position : fixe
• top : 42px
• Catégorie : Encadré
• Section Remplissage : désactivez la case à cocher Tous identiques. Dans la
zone bottom, tapez 5px
• Enregistrez tous les fichiers modifiés et exécutez la page maître Site.master.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-60 Introduction au développement Web avec Microsoft® Visual Studio® 2010

f Tâche 3 : convertir le formulaire Web en contrôle utilisateur


• Ouvrez le formulaire Web InsertCustomer.aspx et changez sa directive Page
en directive Control.

<%@ Control Language="VB" AutoEventWireup="false"


CodeFile="InsertCustomer.aspx.vb" Inherits="InsertCustomer" %>

• Ajoutez une propriété ClassName avec la valeur Customer à la directive


Control.

<%@ Control Language="VB" AutoEventWireup="false"


CodeFile="InsertCustomer.aspx.vb" Inherits="InsertCustomer"
ClassName="Customer" %>

• Remplacez la valeur de la propriété Inherits définie sur InsertCustomer par


Customer.

<%@ Control Language="VB" AutoEventWireup="false"


CodeFile="InsertCustomer.aspx.vb" Inherits="Customer"
ClassName="Customer" %>

• Remplacez la valeur de la propriété CodeFile définie sur InsertCustomer.aspx.vb


par Customer.aspx.vb.

<%@ Control Language="VB" AutoEventWireup="false"


CodeFile="Customer.aspx.vb" Inherits="Customer"
ClassName="Customer" %>

• Supprimez tous les éléments HTML de niveau supérieur, tels que les éléments
DOCTYPE, html, head, body, title, link et form.
• Mettez en forme le document.

Remarque : Une fois tous les éléments HTML de niveau supérieur supprimés, vous
pouvez afficher le balisage suivant dans la fenêtre InsertCustomer.aspx.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémentation de pages maîtres et de contrôles utilisateur 5-61

<%@ Control Language="VB" AutoEventWireup="false"


CodeFile="Customer.ascx.vb" Inherits="Customer"
ClassName="Customer" %>
<div class="customerTable">
<div class="customerTableRow">
<div class="customerTableLeftCol">
<asp:Label ID="CustomerFirstNameLabel" runat="server"
Text="First Name:"></asp:Label>
</div>
<div class="customerTableRightCol">
<asp:TextBox ID="CustomerFirstNameTextBox"
runat="server" MaxLength="50"></asp:TextBox>
</div>
</div>
<div class="customerTableRow">
<div class="customerTableLeftCol">
<asp:Label ID="CustomerLastNameLabel" runat="server"
Text="Last Name:"></asp:Label>
</div>
<div class="customerTableRightCol">
<asp:TextBox ID="CustomerLastNameTextBox"
runat="server"></asp:TextBox>
</div>
</div>
<div class="customerTableRow">
<div class="customerTableLeftCol">
<asp:Label ID="CustomerAddressLabel" runat="server"
Text="Address:"></asp:Label>
</div>
<div class="customerTableRightCol">
<asp:TextBox ID="CustomerAddressTextBox"
runat="server" MaxLength="50"></asp:TextBox>
</div>
</div>
<div class="customerTableRow">
<div class="customerTableLeftCol">
<asp:Label ID="CustomerZipCodeLabel" runat="server"
Text="Zip Code:"></asp:Label>
</div>
<div class="customerTableRightCol">
<asp:TextBox ID="CustomerZipCodeTextBox"
runat="server" MaxLength="10"></asp:TextBox>
</div>
</div>

(Pour la suite du code, reportez-vous à sur la page suivante.)


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-62 Introduction au développement Web avec Microsoft® Visual Studio® 2010

<div class="customerTableRow">
<div class="customerTableLeftCol">
<asp:Label ID="CustomerCityLabel" runat="server"
Text="City:"></asp:Label>
</div>
<div class="customerTableRightCol">
<asp:TextBox ID="CustomerCityTextBox" runat="server"
MaxLength="30"></asp:TextBox>
</div>
</div>
<div class="customerTableRow">
<div class="customerTableLeftCol">
<asp:Label ID="CustomerStateLabel" runat="server"
Text="State:"></asp:Label>
</div>
<div class="customerTableRightCol">
<asp:TextBox ID="CustomerStateTextBox" runat="server"
MaxLength="30"></asp:TextBox>
</div>
</div>
<div class="customerTableRow">
<div class="customerTableLeftCol">
<asp:Label ID="CustomerCountryLabel" runat="server"
Text="Country:"></asp:Label>
</div>
<div class="customerTableRightCol">
<asp:DropDownList ID="CustomerCountryDropDownList"
runat="server">
</asp:DropDownList>
</div>
</div>
<div class="customerTableRow">
<div class="customerTableLeftCol">
<asp:Label ID="CustomerPhoneLabel" runat="server"
Text="Phone:"></asp:Label>
</div>
<div class="customerTableRightCol">
<asp:TextBox ID="CustomerPhoneTextBox" runat="server"
MaxLength="30"></asp:TextBox>
</div>
</div>
<div class="customerTableRow">
<div class="customerTableLeftCol">
<asp:Label ID="CustomerEmailAddressLabel"
runat="server" Text="Email Address:"></asp:Label>
</div>

(Pour la suite du code, reportez-vous à sur la page suivante.)


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémentation de pages maîtres et de contrôles utilisateur 5-63

<div class="customerTableRightCol">
<asp:TextBox ID="CustomerEmailAddressTextBox"
runat="server" MaxLength="50"></asp:TextBox>
</div>
</div>
<div class="customerTableRow">
<div class="customerTableLeftCol">
<asp:Label ID="CustomerWebAddressLabel" runat="server"
Text="Web Address:"></asp:Label>
</div>
<div class="customerTableRightCol">
<asp:TextBox ID="CustomerWebAddressTextBox"
runat="server" MaxLength="80"></asp:TextBox>
</div>
</div>
<div class="customerTableRow">
<div class="customerTableLeftCol">
<asp:Label ID="CustomerCreditLimitLabel"
runat="server" Text="Credit Limit:"></asp:Label>
</div>
<div class="customerTableRightCol">
<asp:TextBox ID="CustomerCreditLimitTextBox"
runat="server" MaxLength="10"></asp:TextBox>
</div>
</div>
<div class="customerTableRow">
<div class="customerTableLeftCol">
<asp:Label ID="CustomerNewsSubscriberLabel"
runat="server" Text="News Subscriber:"></asp:Label>
</div>
<div class="customerTableRightCol">
<asp:CheckBox ID="CustomerNewsSubscriberCheckBox"
runat="server" />
</div>
</div>
<div class="customerTableFooter">
<asp:Button ID="CustomerInsertButton" runat="server"
Text="Insert" />
&nbsp;<asp:Button ID="CustomerCancelButton" runat="server"
Text="Cancel" />
</div>
</div>

• Enregistrez le formulaire Web InsertCustomer.aspx.


• Remplacez le nom du formulaire Web InsertCustomer.aspx par Customer.ascx.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-64 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Ouvrez le fichier code-behind du contrôle utilisateur Customer.ascx.vb,


renommez la classe Customer et remplacez sa classe de base
System.Web.UI.Page par System.Web.UI.UserControl.

Partial Class InsertCustomer


Inherits System.Web.UI.UserControl

• Déplacez le contenu de la méthode d'événement Page_LoadComplete et


ajoutez-le à la méthode d'événement Page_Load.

Protected Sub Page_Load(ByVal sender As Object, ByVal e As


System.EventArgs) Handles Me.Load
' Instantiate Customer
instantiateCustomerObject()
' Populate the UI controls
populateUI()
End Sub

• Supprimez la méthode d'événement Page_LoadComplete.

''' <summary>
''' Populates UI controls
''' </summary>
''' <param name="sender"></param>
''' <param name="e"></param>
''' <remarks<>/remarks>
Protected Sub Page_LoadComplete(ByVal sender As Object, ByVal e As
System.EventArgs) Handles Me.LoadComplete
End Sub

• Enregistrez les fichiers modifiés et fermez le contrôle utilisateur


Customer.ascx.vb.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémentation de pages maîtres et de contrôles utilisateur 5-65

f Tâche 4 : créer une page de contenu et insérer un contrôle utilisateur


• Ajoutez une nouvelle page de contenu nommée InsertCustomer.aspx, avec un
fichier code-behind basé sur la page maître Site.master.
• Ouvrez la page de contenu InsertCustomer.aspx en mode Création et faites
glisser le contrôle utilisateur Customer.ascx dans le contrôle
MainContentPlaceHolder.
• Exécutez l'application Web CustomerManagement.
• Vérifiez le site Web Contoso Customer Management en cliquant sur l'option
New dans le menu Customers.

Remarque : le nouveau contrôle utilisateur apparaît dans le formulaire Web


InsertCustomer.

f Tâche 5 : désactiver l'ordinateur virtuel et annuler les modifications


• Désactivez l'ordinateur virtuel 10557A-GEN-DEV.
• Annulez les modifications apportées à l'ordinateur virtuel 10557A-GEN-DEV.

Résultats : au terme de cet exercice, vous aurez converti le formulaire Web par défaut
en page de contenu, ajouté une fonction de navigation à la page maître et converti le
formulaire Web en contrôle utilisateur. Par ailleurs, vous aurez créé une page de
contenu et inséré un contrôle utilisateur.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-66 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Section 2 : Visual C#
Exercice 1 : Ajout et application d'une page maître
Dans cet exercice, les tâches principales sont les suivantes :

1. Ajouter une page maître à un site Web existant.

2. Initialiser les contrôles et éléments de style sur la page maître.

3. Définir un contrôle ContentPlaceHolder sur la page maître.

f Tâche 1 : ajouter une page maître à un site Web existant


• Ouvrez une session sur 10557A-GEN-DEV en tant que Stagiaire avec le mot
de passe Pa$$w0rd.
• Ouvrez Microsoft Visual Studio 2010.
• Ouvrez la solution CustomerManagement située dans le dossier
D:\Labfiles\Starter\M5\CS.
• Ajoutez une nouvelle page maître nommée Site.master au site Web
CustomerManagement.

f Tâche 2 : initialiser les contrôles et éléments de style sur la page


maître
• Dans la fenêtre Site.master, ajoutez une propriété id à l'élément head à l'aide
du code suivant.

<head runat="server" id="MainHead">

• Dans la fenêtre Site.master, changez la propriété id de l'élément form en


MainForm.

<form id="MainForm" runat="server">

• Référencez le fichier Site.css dans le formulaire Web Site.master, par rapport


au dossier racine, en plaçant le balisage ci-dessous à la suite de la balise de
fermeture de l'élément title.

<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémentation de pages maîtres et de contrôles utilisateur 5-67

• Dans la fenêtre Site.master, ajoutez une propriété Class à l'élément body à


l'aide du balisage suivant.

<body class="template">

• Dans la fenêtre Site.master, ajoutez une propriété Class à l'élément div à l'aide
du balisage suivant.

<div class="content">

• Dans la fenêtre Site.master, définissez la valeur de l'élément title sur Contoso


Customer Management à l'aide du code suivant.

<title>Contoso Customer Management</title>

f Tâche 3 : définir un contrôle ContentPlaceHolder sur la page maître


• Supprimez la valeur ContentPlaceHolder de l'élément head.

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


</asp:ContentPlaceHolder>

• Modifiez la propriété id du contrôle ContentPlaceHolder contenu dans


l'élément div avec la valeur MainContentPlaceHolder.

<div class="content">
<asp:ContentPlaceHolder id="MainContentPlaceHolder"
runat="server">
</asp:ContentPlaceHolder>

</div>

• Enregistrez la page maître.

Résultats : au terme de cet exercice, vous aurez créé une page maître nommée
Site.master et défini un contrôle ContentPlaceHolder dans celle-ci.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-68 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Exercice 2 : Conversion de formulaires Web en pages de


contenu et contrôles utilisateur
Dans cet exercice, les tâches principales sont les suivantes :

1. convertir le formulaire Web par défaut en page de contenu ;

2. ajouter une fonction de navigation à la page maître ;

3. convertir le formulaire Web en contrôle utilisateur ;

4. créer une page de contenu et insérer un contrôle utilisateur.

f Tâche 1 : convertir le formulaire Web par défaut en page de contenu


• Ouvrez le formulaire Web Default.aspx.
• Dans la fenêtre Default.aspx, dans la directive Page, ajoutez une propriété
MasterPageFile avec la valeur ~/Site.master, à l'aide du code suivant.

<%@ Page Language="C#" AutoEventWireup="true"


CodeFile="Default.aspx.cs"
Inherits="_Default" MasterPageFile="~/Site.master"%>

• Supprimez les éléments HTML de niveau supérieur dans le formulaire Web


Default.

Remarque : veillez à ne pas supprimer l'élément div et le contenu de l'élément form.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Styles/Site.css" rel="stylesheet" type="text/css"
/>
</head>
<body>
<form id="form1" runat"server">
</form>
</body>
</html>
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémentation de pages maîtres et de contrôles utilisateur 5-69

• Dans la fenêtre Default.aspx, ajoutez un contrôle Content côté serveur.

<asp:Content ID="MainContent"
ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
</asp:Content>

• Dans la fenêtre Default.aspx, déplacez le code suivant et placez-le après la


balise d'ouverture de l'élément form dans la page maître Site.master.

<div class="appTitle">
<asp:Literal ID="AppTitleLiteral" runat="server"
Text="Customer Management"></asp:Literal>
</div>

• Mettez en forme la page maître Site.master en appuyant sur Ctrl+K, puis sur
Ctrl+D.
• Enregistrez les modifications apportées à la page maître Site.master.
• Mettez en forme le formulaire Web Default.aspx en appuyant sur Ctrl+K, puis
sur Ctrl+D.
• Enregistrez le formulaire Web Default.aspx, puis fermez-le.

f Tâche 2 : ajouter une fonction de navigation à la page maître


• Ajoutez un chemin de navigation à la page maître en ajoutant un contrôle
SiteMapPath nommé MainSiteMapPath, inclus dans l'élément div avec une
valeur d'attribut class définie sur siteMapPath. Ajoutez le nouvel élément div
sous l'élément div existant avec une valeur d'attribut class définie sur appTitle.

<div class="siteMapPath">
<asp:SiteMapPath ID="MainSiteMapPath" runat="server" />
</div>

• Ajoutez un menu à page maître en ajoutant un contrôle Menu nommé


MainMenu, inclus dans l'élément div avec une valeur d'attribut class définie
sur menu. Ajoutez le nouvel élément div sous l'élément div existant avec une
valeur d'attribut class définie sur siteMapPath.

<div class="menu">
<asp:Menu ID="MainMenu" runat="server">
</asp:Menu>
</div>
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-70 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Obtenez une disposition de menu horizontale en appliquant l'attribut


Orientation.

Orientation="Horizontal"

• Assurez-vous que l'image intégrée, indiquant si un élément de menu statique


possède un menu enfant, n'apparaît pas, en définissant l'attribut
StaticEnableDefaultPopOutImage.

StaticEnableDefaultPopOutImage="false"

• Obtenez les éléments du contrôle Menu à partir du contrôle de source de


données MainSiteMapDataSource, en appliquant l'attribut DataSourceID.

DataSourceID="MainSiteMapDataSource"

• Ajoutez les éléments enfant suivants au contrôle Menu, en les plaçant entre les
balises Menu d'ouverture et de fermeture.

<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px"


/>
<StaticHoverStyle BackColor="White" ForeColor="Black" />
<DynamicHoverStyle BackColor="White" ForeColor="Black" />
<DynamicMenuItemStyle ItemSpacing="2px" HorizontalPadding="5px"
VerticalPadding="2px" />

• Ajoutez un contrôle SiteMapDataSource nommé MainSiteMapDataSource à


la page maître après la balise de fermeture de l'élément div, avec une valeur
d'attribut class définie sur menu. Le contrôle SiteMapDataSource ne doit pas
afficher le nœud de démarrage.

<asp:SiteMapDataSource ID="MainSiteMapDataSource" runat="server"


ShowStartingNode="false" />

• Mettez en forme la page maître Site.master.


• Ajoutez le fichier de plan de site D:\Labfiles\Starter\M5\web.sitemap au
projet.
• Modifiez le style div.menu à l'aide de la fenêtre Gérer les styles. Le style de
menu doit être défini comme suit :
• Sélecteur : div.menu
• Définir dans : Styles/Site.css
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémentation de pages maîtres et de contrôles utilisateur 5-71

• Catégorie : position
• Position : relative
• Ordre de plan : 1
• Haut : 62px
• Ajoutez un style siteMapPath à l'aide de la fenêtre Gérer les styles. Le style
siteMapPath doit être défini comme suit :
• Sélecteur : div.siteMapPath
• Définir dans : Styles/Site.css
• Catégorie : position
• Position : fixe
• top : 42px
• Catégorie : Encadré
• Section Remplissage : désactivez la case à cocher Tous identiques. Dans la
zone bottom, tapez 5px
• Enregistrez tous les fichiers modifiés et exécutez la page maître Site.master.

f Tâche 3 : convertir le formulaire Web en contrôle utilisateur


• Ouvrez le formulaire Web InsertCustomer.aspx et changez sa directive Page
en directive Control.

<%@ Control Language="C#" AutoEventWireup="true"


CodeFile="InsertCustomer.aspx.cs" Inherits="InsertCustomer" %>

• Ajoutez une propriété ClassName avec la valeur Customer à la directive


Control.

<%@ Control Language="C#" AutoEventWireup="true"


CodeFile="InsertCustomer.aspx.cs" Inherits="InsertCustomer"
ClassName="Customer" %>
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-72 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Remplacez la valeur de la propriété Inherits définie sur InsertCustomer par


Customer.

<%@ Control Language="C#" AutoEventWireup="true"


CodeFile="InsertCustomer.aspx.cs" Inherits="Customer"
ClassName="Customer" %>

• Remplacez la valeur de la propriété CodeFile définie sur InsertCustomer.aspx.cs


par Customer.aspx.cs.

<%@ Control Language="C#" AutoEventWireup="true"


CodeFile="Customer.aspx.cs" Inherits="Customer"
ClassName="Customer" %>

• Supprimez tous les éléments HTML de niveau supérieur, tels que les éléments
DOCTYPE, html, head, body, title, link et form.
• Mettez en forme le document.

Remarque : une fois tous les éléments HTML de niveau supérieur supprimés, vous
pouvez afficher le balisage suivant dans la fenêtre InsertCustomer.aspx.

<%@ Control Language="C#" AutoEventWireup="true"


CodeFile="Customer.ascx.cs" Inherits="Customer"
ClassName="Customer" %>
<div class="customerTable">
<div class="customerTableRow">
<div class="customerTableLeftCol">
<asp:Label ID="CustomerFirstNameLabel" runat="server"
Text="First Name:"></asp:Label>
</div>
<div class="customerTableRightCol">
<asp:TextBox ID="CustomerFirstNameTextBox"
runat="server" MaxLength="50"></asp:TextBox>
</div>
</div>
<div class="customerTableRow">
<div class="customerTableLeftCol">
<asp:Label ID="CustomerLastNameLabel" runat="server"
Text="Last Name:"></asp:Label>
</div>
<div class="customerTableRightCol">
<asp:TextBox ID="CustomerLastNameTextBox"
runat="server"></asp:TextBox>
</div>
</div>

(Pour la suite du code, reportez-vous à sur la page suivante.)


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémentation de pages maîtres et de contrôles utilisateur 5-73

<div class="customerTableRow">
<div class="customerTableLeftCol">
<asp:Label ID="CustomerAddressLabel" runat="server"
Text="Address:"></asp:Label>
</div>
<div class="customerTableRightCol">
<asp:TextBox ID="CustomerAddressTextBox"
runat="server" MaxLength="50"></asp:TextBox>
</div>
</div>
<div class="customerTableRow">
<div class="customerTableLeftCol">
<asp:Label ID="CustomerZipCodeLabel" runat="server"
Text="Zip Code:"></asp:Label>
</div>
<div class="customerTableRightCol">
<asp:TextBox ID="CustomerZipCodeTextBox"
runat="server" MaxLength="10"></asp:TextBox>
</div>
</div>
<div class="customerTableRow">
<div class="customerTableLeftCol">
<asp:Label ID="CustomerCityLabel" runat="server"
Text="City:"></asp:Label>
</div>
<div class="customerTableRightCol">
<asp:TextBox ID="CustomerCityTextBox" runat="server"
MaxLength="30"></asp:TextBox>
</div>
</div>
<div class="customerTableRow">
<div class="customerTableLeftCol">
<asp:Label ID="CustomerStateLabel" runat="server"
Text="State:"></asp:Label>
</div>
<div class="customerTableRightCol">
<asp:TextBox ID="CustomerStateTextBox" runat="server"
MaxLength="30"></asp:TextBox>
</div>
</div>
<div class="customerTableRow">
<div class="customerTableLeftCol">
<asp:Label ID="CustomerCountryLabel" runat="server"
Text="Country:"></asp:Label>
</div>

(Pour la suite du code, reportez-vous à sur la page suivante.)


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-74 Introduction au développement Web avec Microsoft® Visual Studio® 2010

<div class="customerTableRightCol">
<asp:DropDownList ID="CustomerCountryDropDownList"
runat="server">
</asp:DropDownList>
</div>
</div>
<div class="customerTableRow">
<div class="customerTableLeftCol">
<asp:Label ID="CustomerPhoneLabel" runat="server"
Text="Phone:"></asp:Label>
</div>
<div class="customerTableRightCol">
<asp:TextBox ID="CustomerPhoneTextBox" runat="server"
MaxLength="30"></asp:TextBox>
</div>
</div>
<div class="customerTableRow">
<div class="customerTableLeftCol">
<asp:Label ID="CustomerEmailAddressLabel"
runat="server" Text="Email Address:"></asp:Label>
</div>
<div class="customerTableRightCol">
<asp:TextBox ID="CustomerEmailAddressTextBox"
runat="server" MaxLength="50"></asp:TextBox>
</div>
</div>
<div class="customerTableRow">
<div class="customerTableLeftCol">
<asp:Label ID="CustomerWebAddressLabel" runat="server"
Text="Web Address:"></asp:Label>
</div>
<div class="customerTableRightCol">
<asp:TextBox ID="CustomerWebAddressTextBox"
runat="server" MaxLength="80"></asp:TextBox>
</div>
</div>
<div class="customerTableRow">
<div class="customerTableLeftCol">
<asp:Label ID="CustomerCreditLimitLabel"
runat="server" Text="Credit Limit:"></asp:Label>
</div>
<div class="customerTableRightCol">
<asp:TextBox ID="CustomerCreditLimitTextBox"
runat="server" MaxLength="10"></asp:TextBox>
</div>
</div>

(Pour la suite du code, reportez-vous à sur la page suivante.)


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémentation de pages maîtres et de contrôles utilisateur 5-75

<div class="customerTableRow">
<div class="customerTableLeftCol">
<asp:Label ID="CustomerNewsSubscriberLabel"
runat="server" Text="News Subscriber:"></asp:Label>
</div>
<div class="customerTableRightCol">
<asp:CheckBox ID="CustomerNewsSubscriberCheckBox"
runat="server" />
</div>
</div>
<div class="customerTableFooter">
<asp:Button ID="CustomerInsertButton" runat="server"
Text="Insert" OnClick="CustomerInsertButton_Click" />
&nbsp;<asp:Button ID="CustomerCancelButton" runat="server"
Text="Cancel" OnClick="CustomerCancelButton_Click" />
</div>
</div>

• Enregistrez le formulaire Web InsertCustomer.aspx.


• Remplacez le nom du formulaire Web InsertCustomer.aspx par Customer.ascx.
• Ouvrez le fichier code-behind du contrôle utilisateur Customer.ascx.cs,
renommez la classe Customer et remplacez sa classe de base System.Web.UI.Page
par System.Web.UI.UserControl.

public partial class Customer : System.Web.UI.UserControl

• Déplacez le contenu de la méthode d'événement Page_LoadComplete et


ajoutez-le à la méthode d'événement Page_Load.

protected void Page_Load(object sender, EventArgs e)


{
// Instantiate Customer
instantiateCustomerObject();
// Populate the UI controls
populateUI();
}
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-76 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Supprimez la méthode d'événement Page_LoadComplete.

/// <summary>
/// Populates UI controls
/// </summary>
/// <param name="sender">>/param>
/// <param name="e"></param>
protected void Page__LoadComplete(object sender, EventArgs e)
{
}

• Enregistrez les fichiers modifiés et fermez le contrôle utilisateur


Customer.ascx.cs.

f Tâche 4 : créer une page de contenu et insérer un contrôle utilisateur


• Ajoutez une nouvelle page de contenu nommée InsertCustomer.aspx, avec un
fichier code-behind basé sur la page maître Site.master.
• Ouvrez la page de contenu InsertCustomer.aspx en mode Création et faites
glisser le contrôle utilisateur Customer.ascx dans le contrôle
MainContentPlaceHolder.
• Exécutez l'application Web CustomerManagement.
• Vérifiez le site Web Contoso Customer Management en cliquant sur l'option
New dans le menu Customers.

Remarque : le nouveau contrôle utilisateur apparaît dans le formulaire Web


InsertCustomer.

f Tâche 5 : désactiver l'ordinateur virtuel et annuler les modifications


• Désactivez l'ordinateur virtuel 10557A-GEN-DEV.
• Annulez les modifications apportées à l'ordinateur virtuel 10557A-GEN-DEV.

Résultats : au terme de cet exercice, vous aurez converti le formulaire Web par
défaut en page de contenu, ajouté une fonction de navigation à la page maître et
converti le formulaire Web en contrôle utilisateur. Par ailleurs, vous aurez créé une
page de contenu et inséré un contrôle utilisateur.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémenntation de pages maîtres et de contrôles utilisateuur 5-77

Récap
pitulatif de l'atelier pratiq
que

1. Commment allez-vouss lier des pages maîtres


m à une application ASP.NET
T par
pro
ogrammation ?
2. Pou
urquoi avez-vous converti un form mulaire Web en co
ontrôle utilisateu
ur
ASP
P.NET dans cet attelier pratique ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
5-78 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Récapituulatif du m
module et
e élémen
nts clés à
retenir

Parcou
urir les question
ns et les répon
nses
1. Quelle est l'extensio
on de fichier d'une page maître ?
2. Quel attribut remplaace tout paramètrre de page maîtree spécifié dans le fichier
b.config ?
web
3. Quelle est l'extensio
on de fichier d'un contrôle utilisateeur ?
4. Quels sont les incon
nvénients des con
ntrôles utilisateurr ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Implémentation de pages maîtres et de contrôles utilisateur 5-79

Problèmes et scénarios réels


1. Vous souhaitez créer un contrôle auquel les autres développeurs peuvent
apporter des modifications sans recompiler le code. Quelle est la méthode
d'implémentation la plus simple ?
Vous devez implémenter les contrôles en tant que contrôle utilisateur.
2. Vous souhaitez créer une page maître générale, mais imposer deux types
de dispositions différents, basés sur la page maître générale. Quelle est la
méthode d'implémentation la plus simple ?
Vous pouvez créer trois pages maîtres : la première étant la page maître
générale et les deux autres étant des pages maîtres imbriquées basées sur
la page maître générale.

Meilleures pratiques
Indiquez quelques-unes des meilleures pratiques s'appliquant au contexte de vos
propres situations professionnelles.
• Utilisez des pages maîtres, chaque fois qu'une disposition sera utilisée par au
moins deux pages.
• Appliquez les pages maîtres dans le fichier web.config, si celui-ci doit être
utilisé dans toutes ou pratiquement toutes les pages du site Web, ou dans
des zones spécifiques du site. Cela permettra de remplacer plus facilement
les pages maîtres ultérieurement.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Validation des entrées utilisateur 6-1

Module 6
Validation des entrées utilisateur
Table des matières :
Leçon 1 : Vue d'ensemble de la validation des entrées utilisateur 6-4
Leçon 2 : Contrôles de validation ASP.NET 6-11
Leçon 3 : Validation de formulaires Web 6-39
Atelier pratique : Validation des entrées utilisateur 6-45
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
6-2 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Vue d'en
nsemble du modu
ule

Lorsquee vous créez un ccontrôle d'entrée tel que le contrôlle TextBox, vous avez
certainees attentes ou exiggences quant au type de saisie effe fectuée dans ce co ontrôle
par l'utiilisateur. Dans le pire des cas, unee entrée incorrectee peut arrêter vottre
applicattion Web. Pour vvérifier que les entrées utilisateur satisfont
s à vos exiigences,
vous deevez les vérifier paar rapport à la vaaleur, à la plage ett au format des enntrées
attenduues. Pour effectuerr cette vérificationn, vous devez lierr au moins un contrôle de
validatioon des entrées au u contrôle d'entréée, puis définir less critères du conttrôle de
validatioon qui effectuera le test en fonctioon de vos exigencces.
Plusieurrs contrôles de vallidation des entréees sont disponiblees dans Microsoft® ®
ASP NET T. Vous pouvez les appliquer à un n formulaire Web b ASP.NET pour effectuer
e
la validaation des entrées côté client et côtéé serveur. Lorsquee vous utilisez la validation
v
côté clieent au lieu de la vvalidation côté seerveur, vous réduiisez le trafic de données
entre le client et le serveu ur, économisez lees ressources du serveur et amélio orez le
temps ded réponse de vottre application Web.W
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Validation des entrées utilisateur 6-3

La validation des entrées utilisateur ne suffit pas à sécuriser une application.


Plusieurs autres types d'entrées doivent être validés. Votre formulaire Web doit
valider les entrées provenant d'un service externe, tel qu'un service Web, ou de
fichiers fournis en externe.
La méthode de validation des entrées utilisée dans les différentes couches d'une
application peut aussi être source de problèmes. Ce module aborde les entrées
utilisateur, qui concernent généralement la couche de l'interface utilisateur. Toutefois,
la couche logique métier et la couche d'accès aux données requièrent également la
validation des entrées. Ces couches sont utilisées par d'autres parties ou couches
d'une application, ce qui signifie que la validation des entrées a peut-être déjà été
effectuée. Cependant, en tant que développeur, vous ne pouvez pas vous y fier et
vous devez vous assurer que les entrées sont validées partout où elles sont acceptées.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
6-4 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Leçon 1
Vue d'en nsemble d
de la valid
dation de
es entrée
es
utilisateu
ur

Vous po ouvez effectuer laa validation des entrées côté clientt ou côté serveur pour
vérifier que l'utilisateur a indiqué des don nnées valides dan ns les contrôles d'entrée
d
d'un forrmulaire Web avaant que la requêtee ne soit traitée su ur le serveur. Grââce à la
validatio
on des entrées cô ôté client, vous po
ouvez filtrer les entrées
e incorrectees avant
leur envvoi au serveur. Laa validation côté serveur
s vous perm met, quant à elle,
d'effectu
uer des vérificatioons de validation sur le serveur et sur le client.
Ne pas valider
v les entréees utilisateur peutt entraîner un arrrêt brutal de l'app plication,
endomm mager celle-ci, êtrre à l'origine de manipulations
m maalveillantes, voire altérer la
base de données. La valiidation des entréees est un mécanissme puissant perrmettant
de recheercher les erreurss et, le cas échéan nt, d'afficher des messages
m à l'inten
ntion de
l'utilisatteur.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Validation des entrées utilisateur 6-5

Objectifs de la leçon
Au terme de cette leçon, vous serez à même d'effectuer les tâches suivantes :
• décrire la validation des entrées ;
• décrire la validation des entrées côté client et côté serveur.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
6-6 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Présentation de la
a validation des
d entrées

Points clés
La valid
dation des entréess améliore l'expériience de l'utilisateeur en matière de site Web.
Elle réd
duit le temps d'atttente des messagees d'erreur et dim minue la probabiliité de
retours incorrects et de bblocages de sites Web dus à des problèmes
p liés aux
x entrées
utilisateeur. Combinée à ddes messages d'errreur complets ett utiles, la validattion des
entrées permet d'améliorrer la capacité d'uutilisation d'un siite Web ainsi quee la
percepttion du client sur la qualité globalee de ce site.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Validation des entrées utilisateur 6-7

La validation des entrées vérifie que l'utilisateur a correctement rempli un contrôle


d'entrée avant que la requête ne soit traitée sur le serveur. La validation des entrées
sur une page Web fait office de filtre de données avant que la page ou la logique
du serveur ne soit traitée. Dans ASP.NET, la validation des entrées est toujours
exécutée côté serveur, mais elle peut aussi l'être côté client si elle est prise en
charge par le navigateur client. Si le navigateur prend en charge la validation côté
client et que celle-ci est activée, les mécanismes de validation des entrées créés par
vos soins effectuent une vérification des erreurs sur le client avant de publier les
données sur le serveur. Les utilisateurs reçoivent des commentaires instantanés
indiquant si les données entrées sont valides par rapport aux règles créées.
Pour des raisons de sécurité, toute validation des entrées exécutée côté client est
également répétée côté serveur. La validation des entrées permet de vérifier les
valeurs de contrôle, empêche le traitement de la page en cas de données non
valides et évite l'ajout de code malveillant.

Vérification des valeurs de contrôle


Vous pouvez utiliser la validation des entrées pour comparer les entrées utilisateur
à un format d'entrée prédéterminé. Ces formats d'entrée prédéterminés peuvent
inclure le nombre de caractères, l'utilisation de caractères alphanumériques, la plage
de valeurs, une chaîne de caractères spécifique ou une formule mathématique. Par
exemple, un contrôle d'entrée utilisateur demandant un numéro de téléphone peut
disposer d'un contrôle de validation des entrées attaché, qui vérifie que les
utilisateurs ont indiqué les chiffres dans un format spécifique. Le fait d'entrer des
lettres ou trop peu de chiffres déclenche l'affichage d'un message d'erreur généré
par le contrôle de validation des entrées. L'utilisateur doit alors entrer ces données
à nouveau.

Prévention du traitement de la page


Le serveur traite les entrées utilisateur qui correspondent au format prédéterminé.
Celles qui ne correspondent pas à ce format déclenchent un message d'erreur et
arrêtent le traitement du serveur. Le traitement de la page est bloqué jusqu'à ce que
l'utilisateur corrige les entrées afin qu'elles correspondent au format exigé et qu'il
renvoie la page. Le traitement côté serveur n'est pas bloqué automatiquement
lorsqu'une erreur de validation des entrées se produit. Même si le script a été
désactivé sur le client et que la page est envoyée au serveur, l'événement Page Load
est déclenché. À ce stade, la validation n'a pas encore eu lieu. Il est toutefois possible
de vérifier si une page est valide, et donc que toutes les entrées le sont également,
grâce à la méthode Page.Validate.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
6-8 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Protection contre l'usurpation et le code malveillant


En exécutant tous les contrôles de validation côté serveur indépendamment de la
validation côté client, ASP.NET offre une protection contre l'usurpation et le code
malveillant.
• Usurpation. L'usurpation se produit lorsque les utilisateurs modifient la page
HTML qui leur est envoyée et retournent des valeurs qui usurpent des
données valides ou un dispositif de vérification d'autorisation. Cependant,
la validation est susceptible d'être usurpée uniquement côté client car les
utilisateurs peuvent désactiver le script côté client. Pour cela, il leur suffit de
modifier les options du navigateur et de ne pas exécuter le code de validation
côté client, ce qui crée un faux niveau d'autorisation.

Avec ASP.NET, la validation des entrées côté client est toujours répétée côté
serveur, où les utilisateurs ne peuvent ni modifier, ni désactiver les contrôles de
validation.
• Code malveillant. Si les utilisateurs sont autorisés à ajouter du texte à une
page Web de façon illimitée via des contrôles d'entrée utilisateur ne possédant
pas de validation des entrées, ils ont la possibilité d'entrer du code malveillant.
Lorsque l'utilisateur envoie la demande suivante au serveur, ce code peut
perturber le serveur Web et toutes les applications connectées.

Question : comment les contrôles de validation ASP.NET protègent-ils contre


l'usurpation et les attaques de code malveillant ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Validattion des entrées utilisateuur 6-9

Valida
ation côté client et côté serveur

Points clés
La validdation des entréess peut avoir lieu à la fois côté client et côté serveur. Bien
B que
la validaation côté serveurr soit toujours reqquise par ASP.NET T, la validation cô
ôté client
est facultative pour certaains navigateurs. Les contrôles de validation d'ASP.NET
prennen nt en charge à la fois le côté clientt et le côté serveur. La validation côté
c client
utilise lees scripts JavaScriipt et Dynamic HT TML (DHTML). La L validation côtéé serveur
peut êtrre écrite dans tou us les langages Miicrosoft .NET Fraamework. Les valiidations
côté clieent et côté serveu ur utilisent toutess deux le même modèle
m de prograammation,
bien qu ue les variations en ntre les langages puissent engend drer des différencces
mineurees en matière de fonctions de valid dation.

Validattion côté clientt


La valid
dation côté client améliore la capaccité d'utilisation du d formulaire Weeb car
elle vériifie les données aau moment où ellles sont entrées parp l'utilisateur. Enn
recherch hant les erreurs llors de la saisie dees données, ce tyype de validation permet
de déteccter les erreurs cô ôté client avant l'eenvoi du formulaaire Web. Ceci peermet
d'éviter les allers-retourss nécessaires à la validation
v côté seerveur.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
6-10 Introduction au développement Web avec Microsoft® Visual Studio® 2010

L'écriture de plusieurs versions de code de validation pour prendre en charge le


serveur et les différents types de navigateurs peut prendre du temps. Les contrôles
de validation ASP.NET éliminent ce problème car ils encapsulent la logique de
validation. Les contrôles créent un code propre au navigateur afin que les utilisateurs
pour lesquels le script côté client est pris en charge puissent bénéficier de la
validation des entrées côté client. Les navigateurs qui ne prennent pas en charge
les scripts ne recevront pas de scripts de validation côté client.
Dans les versions de navigateur prenant en charge la validation des entrées, comme
Windows® Internet Explorer® 8, la validation côté client a lieu lorsque l'utilisateur
clique sur le bouton Envoyer. La page ne sera publiée sur le serveur que lorsque
toutes les validations côté client seront terminées. Dans les navigateurs modernes,
lorsque l'utilisateur passe d'un contrôle d'entrée à un autre, la validation côté client
est effectuée pour le contrôle d'entrée terminé. Cette fonctionnalité de validation
fournit aux utilisateurs des commentaires immédiats sur leurs entrées.

Validation côté serveur


Tous les contrôles de validation des entrées sont exécutés côté serveur. Les
validations côté client sont répétées côté serveur lorsque la page est publiée sur le
serveur. Cette répétition évite les tentatives d'usurpation de la part des utilisateurs
qui essayent de contourner le script côté client et d'envoyer des entrées non valides.
Vous pouvez écrire des contrôles de validation Microsoft .NET côté serveur. Outre
la validation du format des entrées, les contrôles de validation côté serveur
permettent de comparer les entrées utilisateur avec les données stockées. Grâce à
cette possibilité de comparaison, il est possible de valider de nombreuses valeurs,
telles que les numéros de carte bancaire valides, les mots de passe stockés et les
restrictions géographiques liées à la fiscalité et à la législation locales.

Question : à quel moment publier une page sur le serveur, même avec des erreurs ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Validattion des entrées utilisateuur 6-11

Leçon 2
Contrôle
es de valid
dation AS
SP.NET

Pendan nt longtemps, la validation des entrées utilisateur a été un processuss long et


fastidieuux. Pour chaque ccontrôle d'entrée, il fallait déterminner les spécificatio
ons, puis
écrire lee code de validatiion pour le serveuur dans son langaage de programm mation
préféré. Pour effectuer laa validation côté client,
c il était ensu
uite nécessaire d'écrire,
en langaage de script (tel q
que JavaScript), laa validation équivvalente côté serveu ur pour
chaque navigateur attend du.
ASP.NEET et Microsoft Viisual Studio® 201 10 permettent de valider facilemen
nt les
entrées utilisateur grâce à des contrôles de
d validation des entrées qui fourn
nissent
du codee côté serveur et ccôté client.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
6-12 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Objectifs de la leçon
Au terme de cette leçon, vous serez à même d'effectuer les tâches suivantes :
• décrire les différents contrôles de validation ASP.NET ;
• décrire le contrôle RegularExpressionValidator ;
• décrire le contrôle CustomValidator ;
• associer des contrôles de validation ;
• ajouter des contrôles de validation à un formulaire Web ;
• positionner et configurer des contrôles de validation dans un formulaire Web.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Validattion des entrées utilisateuur 6-13

Vue d'ensemble
d d
des contrôless de validatio
on ASP.NET

Points clés
Lors dee la création de fo ormulaires Web ASP.NET
A nécessittant des entrées utilisateur,
u
il est im
mportant de pouvoir vérifier la valiidité de ces entréees. ASP.NET offree un
ensemb ble de contrôles d de validation qui vous
v aident à recchercher facilemen nt et
efficacemment les erreurs d'entrée. En outrre, il est possible d'afficher
d les messsages
d'erreurr destinés à l'utilissateur, le cas échéant.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
6-14 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Contrôles de validation
Le tableau suivant répertorie les contrôles de validation inclus dans le framework
de pages ASP.NET.

Contrôle de validation Fonction


RequiredFieldValidator Vérifie qu'une valeur a bien été entrée dans un
contrôle. Ce contrôle de validation est le seul à
exiger une valeur. Tous les autres considèrent un
contrôle vide comme une réponse valide.

CompareValidator Compare la valeur d'un contrôle d'entrée avec


un autre contrôle d'entrée, une valeur fixe, un
type de données ou un fichier. Vous pouvez par
exemple utiliser ce contrôle pour vérifier un mot
de passe en comparant la valeur d'un contrôle à
celle d'un autre contrôle.

RegularExpressionValidator Vérifie que l'entrée correspond à un modèle


défini par une expression régulière. Ce contrôle
de validation permet de rechercher les séquences
de caractères prévisibles, telles que les numéros
de sécurité sociale, les adresses de messagerie,
les numéros de téléphone et les codes postaux.
Visual Studio 2010 offre des modèles prédéfinis
pour les expressions communes, comme les
numéros de téléphones et les adresses de
messagerie.

RangeValidator Vérifie que l'entrée utilisateur est comprise entre


deux valeurs. Vous pouvez par exemple utiliser
ce contrôle pour vérifier que l'entrée utilisateur
correspond à la tranche d'âge attendue. Ce contrôle
est semblable au contrôle CompareValidator.

CustomValidator Permet d'écrire le code pour créer une expression


de validation. Vous pouvez par exemple utiliser
ce contrôle pour vérifier que la valeur d'entrée est
un nombre premier ou qu'elle correspond à une
valeur dans la base de données.

ValidationSummary Affiche un résumé de toutes les erreurs de


validation pour l'ensemble des contrôles de
validation de la page. Ce contrôle se trouve
généralement à côté du bouton Submit afin de
fournir des commentaires immédiats sur le statut
global des entrées de la page.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Validattion des entrées utilisateuur 6-15

Contrrôles de valid
dation ASP.N
NET de base

Points clés
Les con
ntrôles de validatiion de base sont les
l suivants : Req
quiredFieldValid dator,
CompareValidator et RangeValidator. Ces C contrôles effeectuent la validatiion par
rapportt à des valeurs fixes ou à un deuxième contrôle d'en
ntrée, et exposen
nt la
propriété publique ConttrolToValidate, qui
q identifie le co
ontrôle d'entrée à valider.

Contrô
ôle RequiredFieeldValidator
Le contrrôle RequiredFieeldValidator perm met de forcer un utilisateur à fourrnir une
entrée dans
d un contrôle d'entrée. Tous lees caractères sont considérés comm me une
réponsee valide pour ce ccontrôle de validaation. De plus, l'ab
bsence d'entrée ou
o un
espace vide
v ne sont pas considérés comm me non valides.
RequiredFieldVallidator n'est utiliisé que sur les contrôles
En génééral, le contrôle R
d'entréee requis pour term
miner un processsus demandé. Vou us pouvez par ex xemple
employeer le contrôle ReqquiredFieldValid dator pour les chaamps de nom d'uttilisateur
et de mot de passe sur u une page de connexion, mais pas pourp des informaations
secondaaires, telles qu'un
ne offre visant à devenir
d visiteur prrivilégié d'un site Web.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
6-16 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Avec le contrôle RequiredFieldValidator, vous avez la possibilité de définir une


valeur initiale qui n'est ni une chaîne vide, ni un espace vide. Une valeur initiale
s'avère utile lorsqu'il existe une valeur par défaut pour un contrôle d'entrée et
que vous voulez que l'utilisateur entre une valeur différente. Pour demander
une modification de la valeur initiale du contrôle d'entrée associé, définissez la
propriété InitialValue afin qu'elle corresponde à la valeur initiale du contrôle
d'entrée.
Dans l'exemple de balisage suivant, un contrôle RequiredFieldValidator vérifie
que le contrôle TextBox NameTextBox ne contient pas la valeur Enter your name
lors de la validation. La comparaison respecte la casse.

<asp:TextBox id="NameTextBox" runat="server" Text="Enter your name" />

<asp:RequiredFieldValidator id="NameRequiredFieldValidator"
runat="server" ControlToValidate="NameTextBox" InitialValue="Enter
your name" ErrorMessage="You must enter your name" Text="*" />

Il est possible de laisser vide un contrôle validé par RequiredFieldValidator ou de


conserver la valeur initiale ou par défaut côté client, lorsque vous utilisez la page.
De plus, les commentaires immédiats de vérification d'erreurs ne s'affichent pas
lorsque l'utilisateur remplit le contrôle d'entrée et passe au suivant. Cependant, le
comportement du système diffère lorsqu'une valeur est entrée. En cas d'effacement
du contrôle d'entrée ou de rétablissement de sa valeur initiale, le message d'erreur
s'affiche immédiatement lorsque l'utilisateur a terminé de remplir le contrôle
d'entrée.

Contrôle CompareValidator
Le contrôle CompareValidator permet de comparer les entrées utilisateur à une valeur
spécifique ou à un contrôle d'entrée secondaire. Le contrôle CompareValidator est
souvent utilisé lorsque le risque d'erreurs typographiques est élevé, comme pour
les champs de mot de passe qui masquent l'entrée réelle de l'utilisateur.
Le contrôle CompareValidator considère un contrôle d'entrée vide comme valide. Par
conséquent, si vous devez vérifier une valeur, associez le contrôle CompareValidator
au contrôle RequiredFieldValidator. Le contrôle CompareValidator utilise les
propriétés communes suivantes :
• ValueToCompare. Cette propriété est référencée par rapport à une valeur
de constante. Elle est utilisée pour la validation par rapport à des valeurs non
modifiées, telles que la limite d'âge minimale. Le contrôle CustomValidator
permet d'effectuer des comparaisons par rapport à des valeurs susceptibles de
changer.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Validation des entrées utilisateur 6-17

• ControlToCompare. Cette propriété identifie un autre contrôle auquel


comparer les entrées utilisateur. Elle permet de rechercher les erreurs
typographiques ; l'utilisateur doit ainsi entrer des données identiques dans
deux champs adjacents.
Si vous définissez à la fois les propriétés ValueToCompare et
ControlToCompare, la propriété ControlToCompare est prioritaire.
• Type. Cette propriété indique le type de données. Utilisez-la pour comparer
la valeur d'un contrôle d'entrée à l'un des types de données .NET Framework
suivants : System.String, System.Int32, System.Double, System.DateTime
et System.Decimal. Pour effectuer cette opération, spécifiez la valeur
correspondante de l'un des enums ValidationDataType : String (chaîne),
Integer (entier), Double (double), Date (date) ou Currency (monnaie). Notez
que pour les dates, seule la partie concernant la date (et non celle de l'heure)
peut être spécifiée.
• Operator. Cette propriété indique l'opérateur de comparaison à utiliser. Les
opérateurs sont spécifiés avec le nom des opérateurs de comparaison, tels que :
Equal, NotEqual, GreaterThan, GreaterThanEqual, LessThan, LessThanEqual
et DataTypeCheck.

Dans l'exemple de code suivant, un contrôle CompareValidator vérifie que les valeurs
des deux contrôles TextBox, PasswordTextBox et PasswordConfirmationTextBox,
correspondent.

<asp:TextBox id="PasswordTextBox" runat="server" Text="Enter your


password" TextMode="Password" />
<br />
<asp:TextBox id="PasswordConfirmationTextBox" runat="server"
Text="Confirm your password" TextMode="Password" />

<asp:CompareValidator id="PasswordCompareValidator" runat="server"


ErrorMessage="The entered passwords do not match."
ControlToCompare="PasswordTextBox"
ControlToValidate="PasswordConfirmationTextBox" Text="*" />

Contrôle RangeValidator
Le contrôle RangeValidator permet de vérifier qu'une valeur d'entrée se trouve
dans une plage donnée. La plage mesurée est globale, et les valeurs minimale et
maximale sont considérées comme valides. Le contrôle RangeValidator sert
généralement à vérifier que la valeur entrée (par exemple, l'âge, la taille, le salaire
ou le nombre d'enfants) correspond à la plage attendue.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
6-18 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Le contrôle RangeValidator considérera un contrôle d'entrée vide comme valide.


Par conséquent, vous devrez l'associer au contrôle RequiredFieldValidator pour
garantir la saisie d'une valeur. Le contrôle RangeValidator possède les propriétés
suivantes :
• MinimumValue. Cette propriété indique la valeur minimale de la plage valide
pour les variables numériques ou le nombre minimal de caractères de la chaîne
pour les variables de chaîne.
• MaximumValue. Cette propriété indique la valeur maximale de la plage valide
pour les variables numériques ou le nombre maximal de caractères de la
chaîne pour les variables de chaîne.
• Type. Cette propriété spécifie le type de données des valeurs à comparer avec
l'un des types de données .NET Framework : System.String, System.Int32,
System.Double, System.DateTime et System.Decimal. Pour effectuer cette
opération, spécifiez la valeur correspondante de l'enum ValidationDataType :
String (chaîne), Integer (entier), Double (double), Date (date) ou Currency
(monnaie). Notez que pour les dates, seule la partie concernant la date (et non
celle de l'heure) peut être spécifiée. Les valeurs à comparer sont converties en
l'un de ces types de données avant d'effectuer la comparaison.

Dans l'exemple de code suivant, un contrôle RangeValidator vérifie que le contrôle


TextBox nommé AgeTextBox possède une valeur comprise entre 18 et 50.

<asp:TextBox id="AgeTextBox" runat="server" Text="Enter your age" />


<asp:RangeValidator id="AgeRangeValidator" runat="server"
ControlToValidate="AgeTextBox" Type="Integer" MinimumValue="18"
MaximumValue="50" ErrorMessage="Applicants must be between 18 and 50
inclusive." Text="*" />

Question : quel contrôle serveur utiliserez-vous pour effectuer la validation des


types de données ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Validattion des entrées utilisateuur 6-19

Contrrôle RegularE
ExpressionVa
alidator

Points clés
Le contrrôle RegularExprressionValidatorr permet de vérifieer qu'une entrée utilisateur
u
correspond à un modèlee prédéfini, tel qu u'un numéro de tééléphone, un cod de postal,
une URL ou une adresse de messagerie. Ce C contrôle de valiidation compare le l modèle
des caraactères, chiffres et symboles entréss par l'utilisateur avec un ou plusiieurs
modèles dans le contrôlee.
Dans la fenêtre Propriétéss, lorsque vous cliq
quez sur le boutonn représentant dees points
de susppension (…) pour la propriété ValiidationExpressio on, Visual Studio 2010
fournit un
u ensemble de m modèles d'expresssion régulière préédéfinis dans la bo oîte de
dialoguee Éditeur d'expreessions régulièrees. Ces modèles in ncluent les adressses de
messageerie et les URL, lees numéros de téléphone, les codees postaux et les numéros
de sécurrité sociale. Pour créer un modèlee, sélectionnez d'aabord un modèlee qui
ressembble aux fonctions ddu modèle voulu, puis sélectionnezz le modèle Person nnalisé.
Le premmier modèle sélecctionné pourra êtrre modifié afin dee devenir votre modèle
m
personnnalisé. Cette derniière fonctionnalitéé vous offre une base
b à partir de laq
quelle
créer vo
otre propre modèlle en modifiant dees modèles existaants selon vos bessoins.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
6-20 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Caractères d'expression régulière


Le tableau suivant décrit un ensemble commun de caractères de contrôle qui
permettent de générer des expressions régulières personnalisées, aussi bien côté
client que côté serveur.

Caractère Définition

a Correspond à la lettre « a » minuscule. Ceci s'applique à toutes les


lettres de l'alphabet. Les lettres qui ne sont pas précédées d'une barre
oblique inverse (\), ou qui ne font pas partie d'une plage,
correspondent à cette valeur littérale.

1 Correspond au chiffre 1. Ceci s'applique à tous les autres caractères


numériques. Les nombres ou chiffres qui ne sont pas précédés d'une
barre oblique inverse (\), ou qui ne font pas partie d'une plage,
correspondent à cette valeur littérale.

? Correspond à 0 ou 1 littéral.

* 0 à n littéraux.

+ 1 à n littéraux (au moins 1).

[0-n] Plage de valeurs entières de 0 à n.

{n} La longueur doit être de n caractères.

| Sépare plusieurs modèles valides.

\ Caractère de commande.

\w Caractère de commande correspondant à tous les caractères.

\W Caractère de commande correspondant à tous les éléments qui ne


sont pas des caractères.

\d Caractère de commande correspondant à tous les chiffres décimaux.

\D Caractère de commande correspondant à tous les caractères qui ne


sont pas des chiffres.

\. Ce caractère de commande doit comporter un point.


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Validation des entrées utilisateur 6-21

Exemple d'expression simple


L'exemple de balisage suivant indique comment utiliser un contrôle
RegularExpressionValidator pour vérifier qu'un utilisateur a entré une adresse
de messagerie valide.

<asp:TextBox id="EmailTextBox" runat="server" />

<asp:RegularExpressionValidator id="EmailRegexValidator"
runat="server" ControlToValidate="EmailTextBox" ErrorMessage="Use the
format username@organization.xxx" ValidationExpression="\w+@\w+\.\w+"
Text="*" />

Une fois affiché dans le navigateur, le balisage se présente de la manière suivante.

...
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() ==
false) return false;
return true;
}
//]]>
</script>

...
</div>
<div>
<input name="EmailTextBox" type="text" id="EmailTextBox" />
<span id="EmailRegexValidator"
style="visibility:hidden;">*</span>
</div>

<script type="text/javascript">
//<![CDATA[
var Page_Validators = new
Array(document.getElementById("EmailRegexValidator"));
//]]>
</script>

(Pour la suite du code, reportez-vous à sur la page suivante.)


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
6-22 Introduction au développement Web avec Microsoft® Visual Studio® 2010

<script type="text/javascript">
//<![CDATA[
var EmailRegexValidator = document.all ?
document.all["EmailRegexValidator"] :
document.getElementById("EmailRegexValidator");
EmailRegexValidator.controltovalidate = "EmailTextBox";
EmailRegexValidator.errormessage = "Use the format
username@organization.xxx";
EmailRegexValidator.evaluationfunction =
"RegularExpressionValidatorEvaluateIsValid";
EmailRegexValidator.validationexpression = "\\w+@\\w+\\.\\w+";
//]]>
</script>

<script type="text/javascript">
//<![CDATA[

var Page_ValidationActive = false;


if (typeof(ValidatorOnLoad) == "function") {
ValidatorOnLoad();
}

function ValidatorOnSubmit() {
if (Page_ValidationActive) {
return ValidatorCommonOnSubmit();
}
else {
return true;
}
}
//]]>
</script>
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Validation des entrées utilisateur 6-23

Le tableau suivant décrit le modèle spécifique faisant l'objet de la vérification par le


contrôle RegularExpressionValidator dans l'exemple précédent.

Caractère Définition

\w+ Chaîne contenant au moins un caractère.

@ Signe arobase (@).

\w+ Chaîne contenant au moins un caractère.

\. Point.

\w+ Chaîne contenant au moins un caractère.

Pour ce contrôle, une adresse de messagerie valide possède le format :


xyz@exemple.com.
Pour ce contrôle, une adresse de messagerie non valide possède le format : xyz.com
ou xyz@.com.

Exemple d'expression complexe


L'expression régulière d'adresse de messagerie Visual Studio 2010 par défaut est
plus complexe que dans l'exemple précédent. Le modèle d'adresse de messagerie
par défaut limite également la séparation des termes avant et après le signe (@) à
xx.xx ou xx-xx.
L'expression régulière par défaut des adresses de messagerie est la suivante.

\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*

Le tableau suivant décrit le modèle d'adresse de messagerie dans l'exemple de code


précédent.

Caractère Définition
\w+ Correspond à une chaîne d'au moins un caractère.

([-+.]\w+)* Correspond à un ou plusieurs traits d'union ou à un point (.) suivi(s)


d'une chaîne contenant au moins un caractère.

@ Correspond au signe arobase @ littéral.


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
6-24 Introduction au développement Web avec Microsoft® Visual Studio® 2010

(suite)

Caractère Définition

\w+ Correspond à une chaîne d'au moins un caractère.

([-.]\w+)* Correspond à un trait d'union ou un point (.) et à une chaîne


contenant au moins un caractère.

\. Correspond à un point (.).

\w+ Correspond à une chaîne d'au moins un caractère.

([-.]\w+)* Correspond à un trait d'union ou un point (.) et à une chaîne


contenant au moins un caractère.

Pour ce contrôle, une adresse de messagerie valide possède le format :


xy-z@exemple.société.com.
Pour ce contrôle, une adresse de messagerie non valide possède le format :
xy,z@exemple.société.com.
Le contrôle RegularExpressionValidator considérera un contrôle d'entrée vide
comme valide. Par conséquent, pour garantir la saisie d'une valeur, associez le
contrôle RegularExpressionValidator à RequiredFieldValidator.

Question : à quelles fins de validation pouvez-vous utiliser le contrôle


RegularExpressionValidator ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Validattion des entrées utilisateuur 6-25

Contrrôle CustomV
Validator

Points clés
Le contrrôle CustomValiidator permet d'aappliquer votre lo ogique de validatiion
personn
nalisée et de commparer les entrées utilisateur avec une u variable, une formule
ou une entrée provenantt d'une seconde source.
s Le contrô ôle CustomValida ator est
généraleement utilisé pouur des tâches tellees que la vérificattion de mots de passe,
p
auquel cas
c l'entrée utilisaateur est comparée à un mot de passe stocké dans la base
de donnnées.

Validattion côté clientt et côté serveu


ur
Le contrrôle CustomValiidator effectue la validation côté serveur,
s mais cettte
opératioon peut égalemen nt être effectuée côté
c client si le naavigateur prend en
e charge
la validaation. Contrairem
ment aux autres contrôles
c de valid dation dans lesquels
ASP.NE ET crée le code dee validation clientt et serveur, vous devez écrire le code de
validatioon du contrôle CCustomValidatorr. Vous pouvez dééfinir le contrôle
Custom mValidator comm me valide ou non n valide à l'aide de la propriété IsV Valid du
paramètre args.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
6-26 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Le contrôle CustomValidator possède les deux membres spécifiques suivants :


• ClientValidationFunction. Cette propriété correspond au nom du script
devant être exécuté par le contrôle CustomValidator côté client. Dans la
mesure où vous écrivez votre propre script client, il est important de vérifier
la cohérence logique avec le code côté serveur.
• OnServerValidate. Il s'agit du nom de la méthode que le contrôle
CustomValidator doit exécuter côté serveur, lorsque l'événement
ServerValidate est déclenché. Dans la mesure où vous écrivez votre propre
code serveur, il est important de vérifier la cohérence logique avec le script
côté client.

L'exemple de code suivant décrit les gestionnaires côté serveur et côté client pour
un contrôle CustomValidator. De plus, il vérifie que le nombre d'entrées du
contrôle est pair.

<asp:CustomValidator ID="NumberCustomValidator" runat="server"


ClientValidationFunction="ClientValidationHandler"
OnServerValidate="ServerValidationHandler"
ControlToValidate="NumberTextBox" ErrorMessage="The number must be
even" />

Gestionnaire côté client


Le code JavaScript suivant est conçu pour être exécuté dans Internet Explorer 6
(ou versions ultérieures) et vérifie qu'un nombre est pair.

<script type="text/javascript">
function ClientValidationHandler(source, args)
{
args.IsValid = (args.Value % 2 == 0)
}
</script>
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Validation des entrées utilisateur 6-27

Gestionnaire côté serveur


Les exemples de code suivants sont conçus pour être exécutés sur le serveur et
pour vérifier qu'un nombre est pair. Placez ce code dans le formulaire Web d'un
élément de script ou dans la classe dérivée de Page du formulaire Web.

[Visual Basic]
Protected Sub ServerValidationHandler(ByVal source as Object,
ByVal args as ServerValidateEventArgs)

args.IsValid = (args.Value Mod 2 = 0)


End Sub

[Visual C#]
protected void ServerValidationHandler(object source,
ServerValidateEventArgs args)
{
args.IsValid = (args.Value % 2 == 0)
}

Notez que la valeur du contrôle d'entrée est accessible côté client et côté serveur
grâce à la propriété Value du paramètre args côté client et côté serveur.
Il n'est pas nécessaire de définir la propriété ControlToValidate pour le contrôle
CustomValidator. Toutefois, si vous ne spécifiez pas de valeur pour la propriété
ControlToValidate, une chaîne vide est transmise aux fonctions de validation côté
client et côté serveur.

Question : quand pouvez-vous utiliser le contrôle CustomValidator ?


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
6-28 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Assocciation de co
ontrôles de validation

Points clés
Une fon nction de validation ou un contrôlle unique n'est paarfois pas suffisan
nt pour
vérifier que l'utilisateur a entré les donnéées correctement dans un contrôlee d'entrée.
La plup
part du temps, le ccontrôle RequireedFieldValidatorr est associé à l'un
n des
autres contrôles
c de valid
dation, mais il exiiste d'autres cas de
d figure.
Par exemmple, le contrôle TextBox d'un nu uméro de téléphoone peut exiger une
u
entrée, doit
d être conform me à l'un des nommbreux modèles ded numéro de télééphone
et doit être
ê vérifié auprèss d'une base de données
d de numééros de téléphonee stockée.
Dans cee cas de figure, vo
ous devez lier le contrôle
c TextBox
x à un contrôle
RequireedFieldValidatorr, lier un contrôlee RegularExpresssionValidator avvec
plusieurrs modèles et lierr un contrôle CusstomValidator avvec un accès côtéé serveur
à une baase de données.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Validation des entrées utilisateur 6-29

Contrôles de validation multiples sur un contrôle d'entrée unique


Vous pouvez associer plusieurs contrôles de validation à un contrôle d'entrée
unique. Cette association plusieurs-à-un de contrôles de validation vous permet
de vérifier les entrées utilisateur pour plusieurs critères de validation.
Les exemples de code suivants présentent un contrôle d'entrée unique pour un
numéro de téléphone. Un contrôle RequiredFieldValidator vérifie le contenu du
contrôle d'entrée, un contrôle RegularExpressionValidator en vérifie le format et
un contrôle CustomValidator compare les entrées avec une base de données de
numéros de téléphone.
• Contrôle d'entrée. Le code suivant définit le contrôle TextBox à valider.

<asp:TextBox id="PhoneTextBox" runat="server" />

• Contrôle RequiredFieldValidator. Le code suivant définit le contrôle


RequiredFieldValidator qui vérifie la présence d'une entrée dans
PhoneTextBox.

<asp:RequiredFieldValidator id="PhoneRequiredFieldValidator"
runat="server" ErrorMessage="The telephone number is required."
ControlToValidate="PhoneTextBox" Text="*" />

• Contrôle RegularExpressionValidator. Le code suivant définit le contrôle


RegularExpressionValidator qui vérifie que l'entrée dans PhoneTextBox
correspond à un modèle de numéro de téléphone utilisé aux États-Unis.

<asp:RegularExpressionValidator
id="PhoneRegularExpressionValidator" runat="server"
ErrorMessage="The telephone number is not formatted as a correct
US phone number." ControlToValidate="PhoneTextBox"
ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}"
Text="*" />

• Contrôle CustomValidator. Le code suivant définit le contrôle CustomValidator


qui appelle la méthode PhoneServerValidationHandler servant à comparer
l'entrée dans PhoneTextBox avec une base de données de numéros de
téléphone.

<asp:CustomValidator id="PhoneCustomValidator"
OnServerValidate="PhoneServerValidationHandler" runat="server"
ErrorMessage="This telephone number is not recognized"
ControlToValidate="PhoneTextBox" Text="*" />
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
6-30 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Démoonstration : A
Ajout de con
ntrôles de validation à un
n
formu
ulaire Web

Points clés
Dans ceette démonstration
n, vous verrez comment ajouter des contrôles de validation
à un forrmulaire Web ASPP.NET.

Procéd
dure de démonsstration
1. Ouvvrez une session sur 10557A-GEN
N-DEV en tant qu
ue Stagiaire avecc le mot
de passe
p Pa$$w0rd.
2. Ouvvrez Visual Studiio 2010.
• Dans le menu D
Démarrer de 10557A-GEN-DEV, pointez
p sur Tous les
programmes, clliquez sur Microsoft Visual Studio 2010, puis surr
Microsoft Visua
al Studio 2010.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Validation des entrées utilisateur 6-31

3. Ouvrez un site Web existant à partir de D:\Demofiles\M6\VB\Validation ou


D:\Demofiles\M6\CS\Validation.
• Dans le menu Fichier de la page de démarrage, dans la fenêtre Microsoft
Visual Studio, cliquez sur Ouvrir le site Web.
• Dans la boîte de dialogue Ouvrir le site Web, dans la zone Dossier, entrez
D:\Demofiles\M6\VB\Validation ou D:\Demofiles\M6\CS\Validation,
puis cliquez sur Ouvrir.
4. Ouvrez le formulaire Web Order en mode Création.
• Dans l'Explorateur de solutions, cliquez avec le bouton droit sur
Order.aspx, puis cliquez sur Concepteur de vues.
5. Ajoutez un contrôle RequiredFieldValidator nommé
DueDateRequiredFieldValidator pour le contrôle DueDateTextBox, avec un
astérisque (*) en tant que texte, et The Due Date must be filled in. en tant
que message d'erreur. L'affichage doit être dynamique.

<asp:RequiredFieldValidator ID="DueDateRequiredFieldValidator"
ControlToValidate="DueDateTextBox" runat="server"
ErrorMessage="The Due Date must be filled in."
Text="*"></asp:RequiredFieldValidator>

• Dans la fenêtre Order.aspx, placez le curseur à côté du contrôle TextBox


Due Date.
• Dans la boîte à outils, développez Validation, puis double-cliquez sur
RequiredFieldValidator.
• Dans la fenêtre Propriétés, dans la zone (ID), entrez
DueDateRequiredFieldValidator ; dans la liste ControlToValidate,
cliquez sur DueDateTextBox ; et, dans la liste Affichage, cliquez sur
Dynamique. Dans la zone Text, entrez * ; dans la zone ErrorMessage,
entrez The Due Date must be filled in., puis appuyez sur Entrée.
6. Ajoutez un contrôle RangeValidator nommé DueDateRangeValidator pour le
contrôle DueDateTextBox, avec un astérisque (*) en tant que texte et The Due
Date must be valid. en tant que message d'erreur. Le validateur n'accepte que
les dates. La date du jour doit être définie comme la valeur minimale. La date
correspondant à 30 jours après la date du jour doit être définie comme la
valeur maximale. La définition de ces deux dates doit être effectuée par
programmation.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
6-32 Introduction au développement Web avec Microsoft® Visual Studio® 2010

<asp:RangeValidator ID="DueDateRangeValidator"
ControlToValidate="DueDateTextBox" runat="server"
ErrorMessage="The Due Date must be valid."
Text="*"></asp:RangeValidator >

• Dans la fenêtre Order.aspx, placez le curseur à côté du contrôle


DueDateRequiredFieldValidator.
• Dans la boîte à outils, développez Validation, puis double-cliquez sur
RangeValidator.
• Dans la fenêtre Propriétés, dans la zone (ID), tapez
DueDateRangeValidator ; dans la liste ControlToValidate, cliquez sur
DueDateTextBox et, dans la liste Type, cliquez sur Date. Dans la zone
Text, tapez * ; dans la zone ErrorMessage, entrez The Due Date must be
valid., puis appuyez sur Entrée.
• Dans l'Explorateur de solutions, cliquez avec le bouton droit sur
Order.aspx, puis cliquez sur Afficher le code.
• Dans la fenêtre Order.aspx.vb ou Order.aspx.cs, dans le gestionnaire
d'événements Page_Load, ajoutez le code suivant.

[Visual Basic]
DueDateRangeValidator.MinimumValue =
DateTime.Now.ToShortDateString()
DueDateRangeValidator.MaximumValue = (DateTime.Now +
New TimeSpan(30, 0, 0, 0)).ToShortDateString()

[Visual C#]
DueDateRangeValidator.MinimumValue =
DateTime.Now.ToShortDateString();
DueDateRangeValidator.MaximumValue = (DateTime.Now +
new TimeSpan(30, 0, 0, 0)).ToShortDateString();

• Dans la fenêtre Order.aspx.vb ou Order.aspx.cs, cliquez sur le bouton


Fermer.
• Dans la boîte de message Microsoft Visual Studio, cliquez sur Oui.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Validation des entrées utilisateur 6-33

7. Ajoutez un contrôle RegularExpressionValidator nommé


CustomerEmailAddressRegularExpressionValidator pour le contrôle
CustomerEmailAddressTextBox, avec un astérisque (*) en tant que message
d'erreur et \w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* en tant
qu'expression de validation.

<asp:RegularExpressionValidator
ID="CustomerEmailAddressRegularExpressionValidator"
ControlToValidate="CustomerEmailAddressTextBox" runat="server"
ErrorMessage="*" ValidationExpression="\w+([-+.']\w+)*@\w+([-
.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>

• Dans la fenêtre Order.aspx, placez le curseur à côté du contrôle TextBox


Email Address.
• Dans la boîte à outils, développez Validation, puis double-cliquez sur
RegularExpressionValidator.
• Dans la fenêtre Propriétés, dans la zone (ID), entrez
CustomerEmailAddressRegularExpressionValidator ; dans la liste
ControlToValidate, cliquez sur CustomerEmailAddressTextBox ; et,
dans la zone ErrorMessage, entrez The Email Address must be valid..
Dans la zone Text, entrez * ; dans la zone ValidationExpression, entrez
\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*, puis appuyez sur Entrée.
8. Ajoutez un contrôle ValidationSummary nommé OrderValidationSummary
sous les deux contrôles Button.

<asp:ValidationSummary ID="OrderValidationSummary"
runat="server"></asp:ValidationSummary>

• Dans la fenêtre Order.aspx, placez le curseur à côté du contrôle Textbox


OrderCancelButton et appuyez sur Entrée.
• Dans la boîte à outils, développez Validation, puis double-cliquez sur
ValidationSummary.
• Dans la fenêtre Propriétés, dans la zone (ID), entrez
OrderValidationSummary.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
6-34 Introduction au développement Web avec Microsoft® Visual Studio® 2010

9. Enregistrez le formulaire Web Order et affichez les modifications dans le


navigateur.
• Dans la fenêtre Microsoft Visual Studio Validation, dans le menu Fichier,
cliquez sur Enregistrer Order.aspx.
• Dans l'Explorateur de solutions, cliquez avec le bouton droit sur
Order.aspx, puis cliquez sur Afficher dans le navigateur.

Remarque : notez que la date du jour a été ajoutée à la zone Order Date.

10. Enregistrez la commande.


• Dans la fenêtre Windows Internet Explorer Order Entry, cliquez sur le
bouton Enregistrer.

Remarque : vous pouvez observer la présence d'un astérisque à côté de la zone Due
Date et d'un message d'erreur dans le résumé de validation situé dans la partie inférieure.

11. Indiquez une date d'échéance non valide et enregistrez la commande.


• Dans la fenêtre Windows Internet Explorer Order Entry, dans la zone Due
Date, entrez une date correspondant à 31 jours suivant la date du jour.
Utilisez le format jj/MM/aaaa, puis cliquez sur le bouton Enregistrer.

Remarque : vous pouvez observer la présence d'un astérisque à côté de la zone Due
Date. Celui-ci se trouve au même emplacement que celui affiché lors de la précédente
tentative d'enregistrement de la commande. Le message d'erreur est différent dans le
résumé de validation situé dans la partie inférieure.

12. Indiquez une date d'échéance valide et enregistrez la commande.


• Dans la fenêtre Windows Internet Explorer Order Entry, dans la zone Due
Date, entrez une date correspondant à 30 jours ou moins à compter de la
date du jour. Utilisez le format jj/MM/aaaa, puis cliquez sur le bouton
Enregistrer.

Remarque : notez qu'il n'y a pas d'erreur de validation.


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Validation des entrées utilisateur 6-35

13. Indiquez une adresse de messagerie non valide et enregistrez la commande.


• Dans la fenêtre Windows Internet Explorer Order Entry, dans la zone
Email Address, entrez claus@cohowinery et cliquez sur le bouton
Enregistrer.

Remarque : vous pouvez observer la présence d'un astérisque à côté de la zone Email
Address et d'un message d'erreur dans le résumé de validation situé dans la partie
inférieure.

14. Indiquez une adresse de messagerie valide et enregistrez la commande.


• Dans la fenêtre Windows Internet Explorer Order Entry, dans la zone
Email Address, entrez claus@cohowinery.com et cliquez sur le bouton
Enregistrer.

Remarque : notez qu'il n'y a pas d'erreur de validation.

15. Fermez Windows® Internet Explorer®.


• Dans la fenêtre Windows Internet Explorer Order Entry, cliquez sur le
bouton Fermer.

Question : pourquoi les contrôles de validation partagent-ils les mêmes propriétés


de validation ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
6-36 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Positionnement e
et configurattion de contrrôles de valid
dation
dans un
u formulairre Web

Points clés
Les conntrôles de validatiion des entrées peuvent afficher un message d'erreur en cas
de violaation des entrées. Il est important de positionner lees contrôles de vaalidation
des entrrées de manière à ce que l'utilisateeur sache à quel contrôle
c correspoond
l'entrée incorrecte. Dans Visual Studio 20 010, vous devez positionner
p le conntrôle
dation sur la pagee sur laquelle le teexte du message d'erreur doit app
de valid paraître.
Le codee suivant correspo
ond au balisage standard
s pour un
n contrôle de valid
dation
des entrrées.

<asp:V
ValidatorType id="ID of valida
ator" runat="se
erver"
Co
ontrolToValidat
te="ID of contro
ol"
Er
rrorMessage="Er
rror message for
r error summary
y"
Di
isplay="Static | Dynamic | Non
ne"
Te
ext="Text to di
isplay next to the
t input contr
rol">
</asp:ValidatorType>
>
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Validation des entrées utilisateur 6-37

Les contrôles de validation des entrées ASP.NET contiennent deux propriétés de


message d'erreur : ErrorMessage et Text. Elles peuvent toutes deux être affichées
à l'emplacement du contrôle de validation des entrées. La distinction entre ces
deux propriétés de message d'erreur est la suivante :
• ErrorMessage. Cette propriété correspond au message d'erreur affiché à
l'emplacement du contrôle de validation lorsque celui-ci est déclenché, si la
propriété Text n'est pas définie. Ce message est aussi inclus dans le contrôle
ValidationSummary, si vous l'utilisez sur le formulaire Web.
• Text. Cette propriété correspond au texte de remplacement qui s'affiche à
l'emplacement du contrôle de validation lorsque les propriétés ErrorMessage
et Text sont utilisées et que le contrôle de validation est déclenché. Si vous
avez recours à un contrôle ValidationSummary pour collecter les messages
d'erreur, vous utilisez généralement un astérisque rouge (*) à droite du
contrôle d'entrée non valide afin d'indiquer l'emplacement de l'erreur.

Dans Visual Studio 2010, par défaut, la valeur de la propriété Text est placée entre
les balises de début et de fin du contrôle de validation. Le code suivant illustre ce
scénario.

<asp:ValidatorType...>TextValue</asp:ValidatorType>
You can explicitly declare the Text property. The following code
illustrates this approach.
<asp:ValidatorType...Text="TextValue"></asp:ValidatorType> or
<asp:ValidatorType...Text="TextValue" />

Définition de la propriété Display


La propriété Display définit l'espacement des messages d'erreur de plusieurs
contrôles de validation sur un formulaire Web. La propriété Display ne concerne
que les messages d'erreur à l'emplacement du contrôle de validation. La propriété
Display n'a pas d'influence sur les messages affichés dans ValidationSummary.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
6-38 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Le tableau suivant décrit les options de la propriété Display.

Option Description

Static Définit une disposition fixe du message d'erreur entraînant une


occupation de l'espace par chaque contrôle de validation, même
lorsque aucun texte de message d'erreur n'est visible. Cette option,
qui vous permet de définir une disposition fixe pour la page, est
l'option par défaut dans Visual Studio 2010.

Dynamic Permet aux contrôles de validation d'être restitués sur la page dans le
cadre de l'enchaînement. Cette option permet d'éviter l'affichage
d'espaces vides sur la page lorsque les contrôles de validation des
entrées ne sont pas déclenchés. Elle peut parfois entraîner un
déplacement des contrôles sur le formulaire Web lorsque les
messages d'erreur apparaissent.

None Bloque l'affichage du message d'erreur à l'emplacement du contrôle


de validation.

Le contrôle ValidationSummary doit être placé à un endroit logique pour


l'utilisateur si la page n'est pas publiée sur le serveur. Il est ainsi préférable
de placer le contrôle ValidationSummary à proximité des boutons d'envoi.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Validattion des entrées utilisateuur 6-39

Leçon 3
Validatio
on de formulaires Web

Il est reccommandé de to oujours valider less entrées utilisateeur à la source. Cependant,


afin d'évviter les exploitattions de script et de vérifier que laa validation est biien
effectuéée, il est recommaandé d'appliquer la validation côtéé serveur manuelllement.
Vous po ouvez ajouter du code de validatio on côté serveur à vos formulaires Web W
ASP.NE ET à l'aide de Visuual Studio 2010.

Objecttifs de la leçon
Au term
me de cette leçon, vous serez à mêm
me d'effectuer less tâches suivantess :
• ajou
uter le contrôle V
ValidationSumm
mary ;
• valiider par program
mmation les formu
ulaires Web.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
6-40 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Ajoutt du contrôle
e ValidationS
Summary

Points clés
Le contrrôle ValidationS Summary affiche des messages d'eerreur lorsque la propriété
p
Page.IsV Valid retourne laa valeur false. Ch
haque contrôle dee validation de la page est
interroggé et le contrôle V
ValidationSumm mary agrège les messages
m ErrorMeessage.
Le contrrôle ValidationS Summary n'effecttue pas de validattions sur les entréées de
contenu u des formulairess Web. Il s'agit plu
utôt du contrôle de rapport utiliséé par les
autres contrôles
c de valid
dation d'une pagee.
Vous po ouvez utiliser ce ccontrôle de validaation pour conso olider les rapportss
d'erreurrs de toutes les errreurs de validatio
on qui se produissent sur une pagee, plutôt
que de demander
d à chaqque contrôle de validation
v d'effectu
uer cette opératio
on.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Validation des entrées utilisateur 6-41

Affichage du texte et des messages d'erreur


Le contrôle ValidationSummary peut afficher une boîte de message ou une zone
de texte avec un en-tête statique ou une liste des erreurs. Selon la valeur de la
propriété DisplayMode, vous pouvez afficher les messages d'erreur sous forme de
liste à puces ou de paragraphe. Le contrôle ValidationSummary peut être employé
pour des formulaires plus volumineux dont le processus de validation est complet.
Disposer d'un rapport regroupant toutes les erreurs de validation possibles sous
une forme unique et facilement identifiable se révèle plus convivial pour
l'utilisateur. Les contrôles ValidationSummary se trouvent généralement à
proximité du bouton Envoyer afin que tous les messages d'erreur soient visibles
par l'utilisateur lorsque les contrôles de validation des entrées sont déclenchés.
L'exemple de code HTML ci-dessous présente un contrôle ValidationSummary
par défaut.

<asp:ValidationSummary id="MyValidationSummary"
runat="server"
HeaderText="These errors were found:"
ShowSummary="True"
DisplayMode="List" />

Recherche des erreurs


La propriété Text d'un contrôle de validation apparaît à l'emplacement du contrôle
de validation et la propriété ErrorMessage apparaît dans l'affichage du contrôle
ValidationSummary.
Une propriété Text dotée d'un astérisque rouge (*) est généralement affichée à
droite du contrôle d'entrée afin de prévenir l'utilisateur que le contrôle d'entrée
n'a pas été rempli correctement. Une propriété ErrorMessage accompagnée d'une
description de l'erreur d'entrée sont affichées dans le contrôle ValidationSummary,
qui se trouve habituellement à proximité de l'événement déclenchant le contrôle.

Question : comment résumer les messages d'erreur d'un groupe de contrôles de


validation sur un formulaire Web ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
6-42 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Valida
ation des forrmulaires We
eb par progrrammation

Points clés
Les con ntrôles de validatiion ASP.NET exécutent la validatio on automatiquem ment
lorsqu'u un formulaire Weeb est publié sur le l serveur. Cette opération a lieu après
a
l'initialissation de la page et avant l'exécution du code de gestion
g des événemments
de contrrôle.
Vous po ouvez parfois app
pliquer votre prop
pre validation par programmation
n dans
les cas suivants
s :
• si vous
v ment de l'exécution ;
ajoutez des ccontrôles dynamiiquement au mom
• si vous
v définissez less valeurs de valid
dation lors de l'ex
xécution, telles qu
ue les
valeeurs MinimumVa alue ou Maximu umValue du conttrôle RangeValidator ;
• si vous
v devez détermminer la validité d'une
d page ou d'u
un contrôle indiviiduel
danns le gestionnairee d'événements Pa age_Load, par exxemple pour emp pêcher
l'accès de certaines rressources côté seerveur (comme une
u base de donn nées),
lorssqu'une page n'esst pas valide.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Validation des entrées utilisateur 6-43

La propriété IsValid détermine la validité de la page ou d'un contrôle de validation.


L'inconvénient de cette propriété est qu'une fois définie, elle est accessible sans
qu'une exception ne soit levée. Par conséquent, pour déterminer la validité d'une
page ou d'un contrôle avant l'exécution des méthodes du gestionnaire
d'événements du contrôle de validation, vous pouvez démarrer la validation par
programmation en appelant la méthode Validate de cette page ou de ce contrôle.
Les exemples de code suivants indiquent comment appeler la méthode Validate.

[Visual Basic]
Me.Validate()

[Visual C#]
this.Validate();

Vous pouvez aussi appliquer votre propre validation par programmation lorsque
vous utilisez le contrôle RangeValidator et que vous définissez la propriété
MinimumValue au moment de l'exécution en fonction des valeurs lues à partir
d'un fichier de configuration.
Après l'exécution de la validation, vous pouvez vérifier la propriété IsValid de la
page. Si la propriété IsValid est définie sur la valeur false, vous devrez identifier les
contrôles pour lesquels la validation échoue. Pour cela, vous devrez vérifier la
propriété IsValid de chaque contrôle de validation. Lorsqu'un contrôle exécute
une vérification de la validation, la propriété IsValid est définie en conséquence.
Si une erreur est détectée et que la page est retournée à l'utilisateur, les messages
d'erreur apparaissent.
Les exemples de code suivants illustrent la façon dont vous pouvez valider une
page lors de la publication et identifier le contrôle de validation à l'origine de
l'erreur de validation.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
6-44 Introduction au développement Web avec Microsoft® Visual Studio® 2010

[Visual Basic]

' User postback?


If Me.IsPostBack Then
' Validate page
Me.Validate()

' Is page valid?


If Not Me.IsValid Then
' Loop through validation controls to see which
' generated the error(s)
For Each controlValidator As IValidator In Validators
If controlValidator.IsValid = False Then
...
End If
Next
End If
End If

[Visual C#]
// User postback?
if (this.IsPostBack)
{
// Validate page
this.Validate();

// Is page valid?
if (!this.IsValid)
{
// Loop through all validation controls to see which
// generated the error(s)
foreach (IValidator controlValidator in this.Validators)
{
if (!controlValidator.IsValid)
{
...
}
}
}
}

Question : comment vérifier que le contenu d'un contrôle ou d'une page est valide ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Validattion des entrées utilisateuur 6-45

Atelier pratique
p : Validatio
on des en
ntrées
utilisateu
ur

Remarq que : pour exécuteer les tâches de cett atelier pratique, vous
v pouvez utilise
er le
langage de programmatio on Microsoft Visual Basic® ou Microsoft Visual C#®. Si S vous
utilisez Visual
V Basic comme langage de prog grammation, reporrtez-vous aux instrructions
fournies dans la section 1 du document de l'atelier pratique co orrespondant. Si vous
v
utilisez Visual
V C# comme llangage de progra ammation, reporte ez-vous aux instrucctions
fournies dans la section 2 du document de l'atelier pratique co orrespondant.

Présen
ntation de l'atellier pratique
Dans ceet atelier pratiquee, vous ajouterez et
e configurerez lees contrôles de vaalidation
dans unn contrôle utilisatteur afin de vérifier la validité des entrées utilisateu
ur d'un
projet Web.
W Vous utiliserrez du script côtéé client, ce qui vo ous évitera de vériifier
fréquemmment les entréess utilisateur auprèès du serveur. En n outre, vous exéccuterez
une valiidation côté serveeur afin de protégger le projet Web b contre l'usurpattion et le
code maalveillant.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
6-46 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Objectifs de l’atelier
Au terme de cet atelier pratique, vous serez à même d'effectuer les tâches suivantes :

• ajouter des contrôles de validation ;


• configurer des contrôles de validation ;
• ajouter une validation côté serveur.

Configuration de l'atelier pratique


Pour cet atelier pratique, vous utiliserez l'environnement d'ordinateurs virtuels
disponible. Avant de commencer l'atelier pratique, vous devez :

• Démarrer l'ordinateur virtuel 10557A-GEN-DEV, puis vous connecter à l'aide


des informations d'identification suivantes :
• Nom d'utilisateur : Stagiaire

• Mot de passe : Pa$$w0rd


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Validattion des entrées utilisateuur 6-47

Scéna
ario de l'ateliier pratique

Vous êtes développeur cchez Contoso, Ltd d, une grande enttreprise disposan nt d'une
base de clients mondialee. Votre organisattion gère ses inforrmations clients viav un
site Web b. Pour améliorerr la communicatiion, l'organisationn doit garder les
informaations clients de ssa base de donnéées à jour. Pour saatisfaire à cette ex
xigence,
vous deevez ajouter des ccontrôles de valid
dation au projet Customer
C Manageement et
les conffigurer sans générrer de surcharge administrative ou u de problèmes de d
perform
mances en raison de vérifications fréquentes
fr auprèss du serveur.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
6-48 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Section 1 : Visual Basic


Exercice 1 : Ajout de contrôles de validation
Dans cet exercice, les tâches principales sont les suivantes :

1. Ouvrir un site Web existant.

2. Ajouter des contrôles de validation au contrôle utilisateur.

f Tâche 1 : ouvrir un site Web existant


• Ouvrez une session sur l'ordinateur virtuel 10557A-GEN-DEV avec le nom
d'utilisateur Stagiaire et le mot de passe Pa$$w0rd.
• Ouvrez Microsoft Visual Studio 2010.
• Ouvrez la solution CustomerManagement située dans le dossier
D:\Labfiles\Starter\M6\VB.

f Tâche 2 : ajouter des contrôles de validation au contrôle utilisateur


• Affichez le balisage du contrôle utilisateur Customer.
• Ajoutez un contrôle RequiredFieldValidator nommé
CustomerFirstNameRequiredFieldValidator pour le contrôle
CustomerFirstNameTextBox.

<asp:RequiredFieldValidator
ID="CustomerFirstNameRequiredFieldValidator"
ControlToValidate="CustomerFirstNameTextBox" runat="server"
ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>

• Ajoutez un contrôle RequiredFieldValidator nommé


CustomerLastNameRequiredFieldValidator pour le contrôle
CustomerLastNameTextBox.

<asp:RequiredFieldValidator
ID="CustomerLastNameRequiredFieldValidator"
ControlToValidate="CustomerLastNameTextBox" runat="server"
ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Validation des entrées utilisateur 6-49

• Ajoutez un contrôle RequiredFieldValidator nommé


CustomerAddressRequiredFieldValidator pour le contrôle
CustomerAddressTextBox.

<asp:RequiredFieldValidator
ID="CustomerAddressRequiredFieldValidator"
ControlToValidate="CustomerAddressTextBox" runat="server"
ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>

• Ajoutez un contrôle RequiredFieldValidator nommé


CustomerZipCodeRequiredFieldValidator pour le contrôle
CustomerZipCodeTextBox.

<asp:RequiredFieldValidator
ID="CustomerZipCodeRequiredFieldValidator"
ControlToValidate="CustomerZipCodeTextBox" runat="server"
ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>

• Ajoutez un contrôle RequiredFieldValidator nommé


CustomerCityRequiredFieldValidator pour le contrôle
CustomerCityTextBox.

<asp:RequiredFieldValidator
ID="CustomerCityRequiredFieldValidator"
ControlToValidate="CustomerCityTextBox" runat="server"
ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>

• Ajoutez un contrôle RequiredFieldValidator nommé


CustomerCountryRequiredFieldValidator pour le contrôle
CustomerCountryDropDownList.

<asp:RequiredFieldValidator
ID="CustomerCountryRequiredFieldValidator"
ControlToValidate="CustomerCountryDropDownList" runat="server"
ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
6-50 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Ajoutez un contrôle RequiredFieldValidator nommé


CustomerWebAddressRequiredFieldValidator pour le contrôle
CustomerWebAddressTextBox.

<asp:RequiredFieldValidator
ID="CustomerWebAddressRequiredFieldValidator"
ControlToValidate="CustomerWebAddressTextBox" runat="server"
ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>

• Ajoutez un contrôle RequiredFieldValidator nommé


CustomerCreditLimitRequiredFieldValidator pour le contrôle
CustomerCreditLimitTextBox.

<asp:RequiredFieldValidator
ID="CustomerCreditLimitRequiredFieldValidator"
ControlToValidate="CustomerCreditLimitTextBox" runat="server"
ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>

• Ajoutez un contrôle RegularExpressionValidator nommé


CustomerEmailAddressRegularExpressionValidator pour le contrôle
CustomerEmailAddressTextBox.

<asp:RegularExpressionValidator
ID="CustomerEmailAddressRegularExpressionValidator"
ControlToValidate="CustomerEmailAddressTextBox" runat="server"
ErrorMessage="RegularExpressionValidator"></asp:RegularExpressionV
alidator>

• Ajoutez un contrôle RegularExpressionValidator nommé


CustomerWebAddressRegularExpressionValidator pour le contrôle
CustomerWebAddressTextBox.

<asp:RegularExpressionValidator
ID="CustomerWebAddressRegularExpressionValidator"
ControlToValidate="CustomerWebAddressTextBox" runat="server"
ErrorMessage="RegularExpressionValidator"></asp:RegularExpressionV
alidator>
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Validation des entrées utilisateur 6-51

• Ajoutez un contrôle RangeValidator nommé


CustomerCreditLimitRangeValidator pour le contrôle
CustomerCreditLimitTextBox.

<asp:RangeValidator ID="CustomerCreditLimitRangeValidator"
ControlToValidate="CustomerCreditLimitTextBox" runat="server"
MinimumValue="500" MaximumValue="50000"
ErrorMessage="RangeValidator"></asp:RangeValidator>

• Ajoutez un contrôle ValidationSummary nommé


CustomerValidationSummary pour le contrôle CustomerInsertButton.

<asp:ValidationSummary ID="CustomerValidationSummary"
runat="server"></asp:ValidationSummary>

• Mettez en forme le contrôle utilisateur Customer.ascx.


• Enregistrez le contrôle utilisateur Customer et affichez les modifications dans
le navigateur.
• Testez la fonctionnalité du contrôle utilisateur Customer.
• Fermez Windows® Internet Explorer®.

Résultat : au terme de cet exercice, vous aurez ajouté des contrôles de validation à un
contrôle utilisateur.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
6-52 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Exercice 2 : Configuration de contrôles de validation


Dans cet exercice, les tâches principales sont les suivantes :

1. Supprimer la validation du bouton Cancel.

2. Ajouter des indicateurs et des messages d'erreur aux contrôles de validation.

3. Définir l'adresse de messagerie et les contrôles de validation de la limite de


crédit.

f Tâche 1 : supprimer la validation du bouton Cancel


• Affichez la méthode Response.Redirect par défaut du bouton Cancel.

''' <summary>
''' Redirects to home page
''' </summary>
''' <param name="sender"></param>
''' <param name="e"></param>
''' <remarks></remarks>
Protected Sub CustomerCancelButton_Click(ByVal sender As Object,
ByVal e As System.EventArgs) Handles CustomerCancelButton.Click
' Redirect to home page
Response.Redirect("~/Default.aspx")
End Sub

• Désactivez la validation générée par le contrôle CustomerCancelButton en


définissant la propriété CausesValidation du contrôle utilisateur sur la valeur
false.

<asp:Button ID="CustomerCancelButton" runat="server" Text="Cancel"


CausesValidation="false" />

• Enregistrez le contrôle utilisateur Customer et affichez les modifications dans


le navigateur.

Remarque : notez que le navigateur Web est redirigé vers le formulaire Web par défaut
au lieu d'afficher les messages d'erreur.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Validation des entrées utilisateur 6-53

f Tâche 2 : ajouter des indicateurs et des messages d'erreur aux


contrôles de validation
• Ajoutez une propriété Text avec la valeur * au contrôle
CustomerFirstNameRequiredFieldValidator.
• Remplacez la propriété ErrorMessage du contrôle
CustomerFirstNameRequiredFieldValidator par The Customer First Name
must be filled in.
• Ajoutez une propriété Text avec la valeur * au contrôle
CustomerLastNameRequiredFieldValidator.
• Remplacez la propriété ErrorMessage du contrôle
CustomerLastNameRequiredFieldValidator par The Customer Last Name
must be filled in.
• Ajoutez une propriété Text avec la valeur * au contrôle
CustomerAddressRequiredFieldValidator.
• Remplacez la propriété ErrorMessage du contrôle
CustomerAddressRequiredFieldValidator par The Address must be filled in.
• Ajoutez une propriété Text avec la valeur * au contrôle
CustomerZipCodeRequiredFieldValidator.
• Remplacez la propriété ErrorMessage du contrôle
CustomerZipCodeRequiredFieldValidator par The Zip Code must be filled in.
• Ajoutez une propriété Text avec la valeur * au contrôle
CustomerCityRequiredFieldValidator.
• Remplacez la propriété ErrorMessage du contrôle
CustomerCityRequiredFieldValidator par The City must be filled in.
• Ajoutez une propriété Text avec la valeur * au contrôle
CustomerCountryRequiredFieldValidator.
• Remplacez la propriété ErrorMessage du contrôle
CustomerCountryRequiredFieldValidator par A country must be selected.
• Ajoutez une propriété Text avec la valeur * au contrôle
CustomerEmailAddressRegularExpressionValidator.
• Remplacez la propriété ErrorMessage du contrôle
CustomerEmailAddressRegularExpressionValidator par The Email Address
must be valid.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
6-54 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Ajoutez une propriété Text avec la valeur * au contrôle


CustomerWebAddressRequiredFieldValidator.
• Remplacez la propriété ErrorMessage du contrôle
CustomerWebAddressRequiredFieldValidator par The Web Address must
be filled in.
• Ajoutez une propriété Text avec la valeur * au contrôle
CustomerWebAddressRegularExpressionValidator.
• Remplacez la propriété ErrorMessage du contrôle
CustomerWebAddressRegularExpressionValidator par The Web Address
must be valid.
• Ajoutez une propriété Text avec la valeur * au contrôle
CustomerCreditLimitRequiredFieldValidator.
• Remplacez la propriété ErrorMessage du contrôle
CustomerCreditLimitRequiredFieldValidator par The Credit Limit must be
filled in.
• Ajoutez une propriété Text avec la valeur * au contrôle
CustomerCreditLimitRangeValidator.
• Remplacez la propriété ErrorMessage du contrôle
CustomerCreditLimitRangeValidator par The Credit Limit must be within
the valid range.
• Enregistrez le contrôle utilisateur Customer et affichez les modifications dans
le navigateur.
• Dans la fenêtre Windows Internet Explorer Contoso Customer Management,
dans la zone Email Address, entrez contoso.com, appuyez sur la touche
Tabulation ; dans la zone Web Address, entrez www.contoso, puis appuyez
à nouveau sur la touche Tabulation.

Remarque : si une boîte de message AutoComplete apparaît, cliquez sur Non.

Remarque : notez la présence de l'indicateur d'erreur qui s'affiche à côté des zones
Email Address et Web Address en raison des adresses Web et de messagerie non
valides.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Validation des entrées utilisateur 6-55

• Dans la fenêtre Windows Internet Explorer Contoso Customer Management,


cliquez sur le bouton Insert.

Remarque : notez la présence de l'indicateur et des messages d'erreur à côté des


contrôles First Name, Last Name, Address, Zip Code, City, Country et Credit Limit.

• Fermez Windows® Internet Explorer®.

f Tâche 3 : définir l'adresse de messagerie et les contrôles de validation


de la limite de crédit
• Affichez le formulaire Web InsertCustomer.aspx dans un navigateur.
• Dans la fenêtre Windows Internet Explorer Contoso Customer Management,
cliquez sur le bouton Insert.

Remarque : notez que la valeur de la zone Credit Limit est définie sur 0 et que le texte
de l'indicateur d'erreur de la zone Web Address n'est pas aligné sur les autres
indicateurs d'erreur. En outre, le message d'erreur de la zone Credit Limit est The Credit
Limit must be within the valid range.

• Fermez Windows® Internet Explorer®.


• Ajoutez une propriété Display avec la valeur de Dynamique au contrôle
CustomerWebAddressRequiredFieldValidator pour modifier l'affichage du
texte de l'indicateur d'erreur.
• Ajoutez une propriété Display avec la valeur de Dynamique au contrôle
CustomerCreditLimitRequiredFieldValidator pour modifier l'affichage du
texte de l'indicateur d'erreur.
• Enregistrez le contrôle utilisateur Customer et affichez les modifications dans
le navigateur.
• Cliquez sur le bouton Insert.

Remarque : notez que l'emplacement de l'indicateur d'erreur pour la zone Credit Limit
a changé. Toutefois, le message d'erreur de la zone Credit Limit demeure The Credit
Limit must be within the valid range.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
6-56 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Fermez Windows® Internet Explorer®.


• Ajoutez une propriété ValidationExpression avec la valeur
\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* au contrôle
CustomerEmailAddressRegularExpressionValidator.
• Ajoutez une propriété ValidationExpression avec la valeur
\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* au contrôle
CustomerWebAddressRegularExpressionValidator.
• Définissez la propriété Type sur la valeur Entier dans le contrôle
CustomerCreditLimitRangeValidator.
• Remplacez la propriété MinimumValue du contrôle
CustomerCreditLimitRangeValidator par 0.
• Enregistrez le contrôle utilisateur Customer et affichez les modifications dans
le navigateur.
• Dans la fenêtre Windows Internet Explorer Contoso Customer Management,
dans la zone Email Address, entrez claus@contoso.com ; dans la zone Web
Address, entrez http://www.contoso.com, puis cliquez sur le bouton Insert.

Remarque : notez que l'indicateur et les messages d'erreur ne s'affichent pas pour les
zones Email Address, Web Address et Credit Limit.

Résultats : au terme de cet exercice, vous aurez supprimé le contrôle de validation


du bouton Cancel et ajouté des indicateurs et messages d'erreur aux contrôles de
validation.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Validation des entrées utilisateur 6-57

Exercice 3 : Ajouter une validation côté serveur


Dans cet exercice, la principale tâche consiste à valider le contrôle utilisateur
Customer.

f Tâche 1 : Valider le contrôle utilisateur Customer


• Ouvrez la fenêtre de code Customer.ascx.vb.
• Ajoutez le code pour valider le contrôle utilisateur dans la méthode du
gestionnaire d'événements CustomerInsertButton_Click.

''' <summary>
''' Saves the current customer information and adds default values
''' </summary>
''' <param name="sender"></param>
''' <param name="e"></param>
''' <remarks></remarks>
Protected Sub CustomerInsertButton_Click(ByVal sender As Object,
ByVal e As System.EventArgs) Handles CustomerInsertButton.Click
' Did page validation succeed?
If Not Page.IsValid Then
Return
End If

' Add the current user name


currentCustomer.CreatedBy = Context.User.Identity.Name
' Add the user credit limit
currentCustomer.CreditLimit = 50000
End Sub
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
6-58 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Ajoutez la validation de la publication à la méthode du gestionnaire


d'événements Page_Load.

''' <summary>
''' Instantiates Customer object
''' </summary>
''' <param name="sender"></param>
''' <param name="e"></param>
''' <remarks></remarks>
Protected Sub Page_Load(ByVal sender As Object, ByVal e As
System.EventArgs) Handles Me.Load
If Page.IsPostBack Then
' Validate Page
Page.Validate()

' Did page validation succeed?


If Not Page.IsValid Then
Return
End If
End If

' Instantiate Customer


instantiateCustomerObject()
' Populate the UI controls
populateUI()
End Sub

• Désactivez la validation côté client pour le contrôle


CustomerCountryDropDownList. Pour ce faire, définissez la propriété
EnableClientScript du contrôle CustomerCountryRequiredFieldValidator
sur la valeur false.

<asp:RequiredFieldValidator
ID="CustomerCountryRequiredFieldValidator"
ControlToValidate="CustomerCountryDropDownList" runat="server"
ErrorMessage="A country must be selected." Text="*"
EnableClientScript="false"></asp:RequiredFieldValidator>

• Enregistrez le contrôle utilisateur Customer et affichez les modifications dans


le navigateur.
• Dans la fenêtre Windows Internet Explorer Contoso Customer Management,
entrez les paramètres suivants, puis cliquez sur le bouton Insert :
• First Name : Claus
• Last Name : Hansen
• Address : 4567, Main St.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Validation des entrées utilisateur 6-59

• Zip Code : 98052


• City : Buffalo
• State : New York
• Web Address : http://www.cohowinery.com

Remarque : notez la publication de la page Web avec les entrées. Notez également
qu'après la publication, l'indicateur d'erreur pour la liste Country et le message d'erreur
associé sont affichés.

• Fermez Windows® Internet Explorer®.


• Supprimez la propriété EnableClientScript du contrôle
CustomerCountryRequiredFieldValidator pour activer la validation côté
client du contrôle CustomerCountryDropDownList, puis mettez en forme et
enregistrez le contrôle utilisateur Customer.

<asp:RequiredFieldValidator
ID="CustomerCountryRequiredFieldValidator"
ControlToValidate="CustomerCountryDropDownList" runat="server"
ErrorMessage="A country must be selected."
Text="*"></asp:RequiredFieldValidator>

• Dans la fenêtre Microsoft Visual Studio CustomerManagement, cliquez sur le


bouton Fermer.

f Tâche 2 : désactiver l'ordinateur virtuel et annuler les modifications


• Désactivez l'ordinateur virtuel 10557A-GEN-DEV.
• Annulez les modifications apportées à l'ordinateur virtuel 10557A-GEN-DEV.

Résultats : au terme de cet exercice, vous aurez ajouté des contrôles de validation
côté serveur au contrôle utilisateur Customer.

Remarque : vous trouverez les corrigés des exercices sur le CD-ROM d'accompagnement
du cours.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
6-60 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Section 2 : Visual C#
Exercice 1 : Ajout de contrôles de validation
Dans cet exercice, les tâches principales sont les suivantes :

1. Ouvrir un site Web existant.

2. Ajouter des contrôles de validation au contrôle utilisateur.

f Tâche 1 : ouvrir un site Web existant


• Ouvrez une session sur l'ordinateur virtuel 10557A-GEN-DEV avec le nom
d'utilisateur Stagiaire et le mot de passe Pa$$w0rd.
• Ouvrez Microsoft Visual Studio 2010.
• Ouvrez la solution CustomerManagement située dans le dossier
D:\Labfiles\Starter\M6\CS.

f Tâche 2 : ajouter des contrôles de validation au contrôle utilisateur


• Affichez le balisage du contrôle utilisateur Customer.
• Ajoutez un contrôle RequiredFieldValidator nommé
CustomerFirstNameRequiredFieldValidator pour le contrôle
CustomerFirstNameTextBox.

<asp:RequiredFieldValidator
ID="CustomerFirstNameRequiredFieldValidator"
ControlToValidate="CustomerFirstNameTextBox" runat="server"
ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>

• Ajoutez un contrôle RequiredFieldValidator nommé


CustomerLastNameRequiredFieldValidator pour le contrôle
CustomerLastNameTextBox.

<asp:RequiredFieldValidator
ID="CustomerLastNameRequiredFieldValidator"
ControlToValidate="CustomerLastNameTextBox" runat="server"
ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Validation des entrées utilisateur 6-61

• Ajoutez un contrôle RequiredFieldValidator nommé


CustomerAddressRequiredFieldValidator pour le contrôle
CustomerAddressTextBox.

<asp:RequiredFieldValidator
ID="CustomerAddressRequiredFieldValidator"
ControlToValidate="CustomerAddressTextBox" runat="server"
ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>

• Ajoutez un contrôle RequiredFieldValidator nommé


CustomerZipCodeRequiredFieldValidator pour le contrôle
CustomerZipCodeTextBox.

<asp:RequiredFieldValidator
ID="CustomerZipCodeRequiredFieldValidator"
ControlToValidate="CustomerZipCodeTextBox" runat="server"
ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>

• Ajoutez un contrôle RequiredFieldValidator nommé


CustomerCityRequiredFieldValidator pour le contrôle
CustomerCityTextBox.

<asp:RequiredFieldValidator
ID="CustomerCityRequiredFieldValidator"
ControlToValidate="CustomerCityTextBox" runat="server"
ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>

• Ajoutez un contrôle RequiredFieldValidator nommé


CustomerCountryRequiredFieldValidator pour le contrôle
CustomerCountryDropDownList.

<asp:RequiredFieldValidator
ID="CustomerCountryRequiredFieldValidator"
ControlToValidate="CustomerCountryDropDownList" runat="server"
ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
6-62 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Ajoutez un contrôle RequiredFieldValidator nommé


CustomerWebAddressRequiredFieldValidator pour le contrôle
CustomerWebAddressTextBox.

<asp:RequiredFieldValidator
ID="CustomerWebAddressRequiredFieldValidator"
ControlToValidate="CustomerWebAddressTextBox" runat="server"
ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>

• Ajoutez un contrôle RequiredFieldValidator nommé


CustomerCreditLimitRequiredFieldValidator pour le contrôle
CustomerCreditLimitTextBox.

<asp:RequiredFieldValidator
ID="CustomerCreditLimitRequiredFieldValidator"
ControlToValidate="CustomerCreditLimitTextBox" runat="server"
ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>

• Ajoutez un contrôle RegularExpressionValidator nommé


CustomerEmailAddressRegularExpressionValidator pour le contrôle
CustomerEmailAddressTextBox.

<asp:RegularExpressionValidator
ID="CustomerEmailAddressRegularExpressionValidator"
ControlToValidate="CustomerEmailAddressTextBox" runat="server"
ErrorMessage="RegularExpressionValidator"></asp:RegularExpressionV
alidator>

• Ajoutez un contrôle RegularExpressionValidator nommé


CustomerWebAddressRegularExpressionValidator pour le contrôle
CustomerWebAddressTextBox.

<asp:RegularExpressionValidator
ID="CustomerWebAddressRegularExpressionValidator"
ControlToValidate="CustomerWebAddressTextBox" runat="server"
ErrorMessage="RegularExpressionValidator"></asp:RegularExpressionV
alidator>
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Validation des entrées utilisateur 6-63

• Ajoutez un contrôle RangeValidator nommé


CustomerCreditLimitRangeValidator pour le contrôle
CustomerCreditLimitTextBox. La valeur minimale est 500 et la valeur
maximale 50 000.

<asp:RangeValidator ID="CustomerCreditLimitRangeValidator"
ControlToValidate="CustomerCreditLimitTextBox" runat="server"
MinimumValue="500" MaximumValue="50000"
ErrorMessage="RangeValidator"></asp:RangeValidator>

• Ajoutez un contrôle ValidationSummary nommé


CustomerValidationSummary pour le contrôle CustomerInsertButton.

<asp:ValidationSummary ID="CustomerValidationSummary"
runat="server"></asp:ValidationSummary>

• Mettez en forme le contrôle utilisateur Customer.ascx.


• Enregistrez le contrôle utilisateur Customer et affichez les modifications dans
le navigateur.
• Testez la fonctionnalité du contrôle utilisateur Customer.
• Fermez Windows® Internet Explorer®.

Résultat : au terme de cet exercice, vous aurez ajouté des contrôles de validation à un
contrôle utilisateur.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
6-64 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Exercice 2 : Configuration de contrôles de validation


Dans cet exercice, les tâches principales sont les suivantes :

1. Supprimer la validation du bouton Cancel.

2. Ajouter des indicateurs et des messages d'erreur aux contrôles de validation.

3. Définir l'adresse de messagerie et les contrôles de validation de la limite de


crédit.

f Tâche 1 : supprimer la validation du bouton Cancel


• Affichez la méthode Response.Redirect par défaut du bouton Cancel.

/// <summary>
/// Redirects to home page
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void CustomerCancelButton_Click(object sender, EventArgs e)
{
// Redirect to home page
Response.Redirect("~/Default.aspx");
}

• Désactivez la validation générée par le contrôle CustomerCancelButton en


définissant la propriété CausesValidation du contrôle utilisateur sur la valeur
false.

<asp:Button ID="CustomerCancelButton" runat="server" Text="Cancel"


OnClick="CustomerCancelButton_Click" CausesValidation="false" />

• Enregistrez le contrôle utilisateur Customer et affichez les modifications dans


le navigateur.

Remarque : notez que le navigateur Web est redirigé vers le formulaire Web par défaut
au lieu d'afficher les messages d'erreur.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Validation des entrées utilisateur 6-65

f Tâche 2 : ajouter des indicateurs et des messages d'erreur aux


contrôles de validation
• Ajoutez une propriété Text avec la valeur * au contrôle
CustomerFirstNameRequiredFieldValidator.
• Remplacez la propriété ErrorMessage du contrôle
CustomerFirstNameRequiredFieldValidator par The Customer First Name
must be filled in.
• Ajoutez une propriété Text avec la valeur * au contrôle
CustomerLastNameRequiredFieldValidator.
• Remplacez la propriété ErrorMessage du contrôle
CustomerLastNameRequiredFieldValidator par The Customer Last Name
must be filled in.
• Ajoutez une propriété Text avec la valeur * au contrôle
CustomerAddressRequiredFieldValidator.
• Remplacez la propriété ErrorMessage du contrôle
CustomerAddressRequiredFieldValidator par The Address must be filled in.
• Ajoutez une propriété Text avec la valeur * au contrôle
CustomerZipCodeRequiredFieldValidator.
• Remplacez la propriété ErrorMessage du contrôle
CustomerZipCodeRequiredFieldValidator par The Zip Code must be filled in.
• Ajoutez une propriété Text avec la valeur * au contrôle
CustomerCityRequiredFieldValidator.
• Remplacez la propriété ErrorMessage du contrôle
CustomerCityRequiredFieldValidator par The City must be filled in.
• Ajoutez une propriété Text avec la valeur * au contrôle
CustomerCountryRequiredFieldValidator.
• Remplacez la propriété ErrorMessage du contrôle
CustomerCountryRequiredFieldValidator par A country must be selected.
• Ajoutez une propriété Text avec la valeur * au contrôle
CustomerEmailAddressRegularExpressionValidator.
• Remplacez la propriété ErrorMessage du contrôle
CustomerEmailAddressRegularExpressionValidator par The Email Address
must be valid.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
6-66 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Ajoutez une propriété Text avec la valeur * au contrôle


CustomerWebAddressRequiredFieldValidator.
• Remplacez la propriété ErrorMessage du contrôle
CustomerWebAddressRequiredFieldValidator par The Web Address must
be filled in.
• Ajoutez une propriété Text avec la valeur * au contrôle
CustomerWebAddressRegularExpressionValidator.
• Remplacez la propriété ErrorMessage du contrôle
CustomerWebAddressRegularExpressionValidator par The Web Address
must be valid.
• Ajoutez une propriété Text avec la valeur * au contrôle
CustomerCreditLimitRequiredFieldValidator.
• Remplacez la propriété ErrorMessage du contrôle
CustomerCreditLimitRequiredFieldValidator par The Credit Limit must be
filled in.
• Ajoutez une propriété Text avec la valeur * au contrôle
CustomerCreditLimitRangeValidator.
• Remplacez la propriété ErrorMessage du contrôle
CustomerCreditLimitRangeValidator par The Credit Limit must be within
the valid range.
• Enregistrez le contrôle utilisateur Customer et affichez les modifications dans
le navigateur.
• Dans la fenêtre Windows Internet Explorer Contoso Customer Management,
dans la zone Email Address, tapez contoso.com et appuyez sur la touche
Tabulation. Dans la zone Web Address, tapez www.contoso, puis appuyez à
nouveau sur la touche Tabulation.

Remarque : si la boîte de message AutoComplete s'affiche, cliquez sur le bouton Non.

Remarque : notez la présence de l'indicateur d'erreur qui s'affiche à côté des zones
Email Address et Web Address en raison des adresses Web et de messagerie non
valides.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Validation des entrées utilisateur 6-67

• Dans la fenêtre Windows Internet Explorer Contoso Customer Management,


cliquez sur le bouton Insert.

Remarque : notez la présence de l'indicateur et des messages d'erreur à côté des


contrôles First Name, Last Name, Address, Zip Code, City, Country et Credit Limit.

• Fermez Windows® Internet Explorer®.

f Tâche 3 : définir l'adresse de messagerie et les contrôles de validation


de la limite de crédit
• Affichez le formulaire Web InsertCustomer.aspx dans un navigateur.
• Dans la fenêtre Windows Internet Explorer Contoso Customer Management,
cliquez sur le bouton Insert.

Remarque : notez que la valeur de la zone Credit Limit est définie sur 0 et que le texte
de l'indicateur d'erreur de la zone Web Address n'est pas aligné sur les autres
indicateurs d'erreur. En outre, le message d'erreur de la zone Credit Limit est The Credit
Limit must be within the valid range.

• Fermez Windows® Internet Explorer®.


• Ajoutez une propriété Display avec la valeur de Dynamique au contrôle
CustomerWebAddressRequiredFieldValidator pour modifier l'affichage du
texte de l'indicateur d'erreur.
• Ajoutez une propriété Display avec la valeur de Dynamique au contrôle
CustomerCreditLimitRequiredFieldValidator pour modifier l'affichage du
texte de l'indicateur d'erreur.
• Enregistrez le contrôle utilisateur Customer et affichez les modifications dans
le navigateur.
• Cliquez sur le bouton Insert.

Remarque : notez que l'emplacement de l'indicateur d'erreur pour la zone Credit Limit
a changé. Toutefois, le message d'erreur de la zone Credit Limit demeure The Credit
Limit must be within the valid range.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
6-68 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Fermez Windows® Internet Explorer®.


• Ajoutez une propriété ValidationExpression avec la valeur
\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* au contrôle
CustomerEmailAddressRegularExpressionValidator.
• Ajoutez une propriété ValidationExpression avec la valeur
\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* au contrôle
CustomerWebAddressRegularExpressionValidator.
• Définissez la propriété Type sur la valeur Entier dans le contrôle
CustomerCreditLimitRangeValidator.
• Remplacez la propriété MinimumValue du contrôle
CustomerCreditLimitRangeValidator par 0.
• Enregistrez le contrôle utilisateur Customer et affichez les modifications dans
le navigateur.
• Dans la fenêtre Windows Internet Explorer Contoso Customer Management,
dans la zone Email Address, entrez claus@contoso.com ; dans la zone Web
Address, entrez http://www.contoso.com, puis cliquez sur le bouton Insert.

Remarque : notez que l'indicateur et les messages d'erreur ne s'affichent pas pour les
zones Email Address, Web Address et Credit Limit.

Résultats : au terme de cet exercice, vous aurez supprimé le contrôle de validation du


bouton Cancel et ajouté des indicateurs et messages d'erreur aux contrôles de
validation.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Validation des entrées utilisateur 6-69

Exercice 3 : Ajouter une validation côté serveur


Dans cet exercice, la principale tâche consiste à valider le contrôle utilisateur
Customer.

f Tâche 1 : Valider le contrôle utilisateur Customer


• Ouvrez la fenêtre de code Customer.ascx.cs.
• Ajoutez le code pour valider le contrôle utilisateur dans la méthode du
gestionnaire d'événements CustomerInsertButton_Click.

/// <summary>
/// Saves the current customer information and adds default values
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void CustomerInsertButton_Click(object sender, EventArgs e)
{
// Did page validation succeed?
if (!Page.IsValid)
return;

// Add the current user name


currentCustomer.CreatedBy = Context.User.Identity.Name;
// Add the user credit limit
currentCustomer.CreditLimit = 50000;
}
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
6-70 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Ajoutez la validation de la publication à la méthode du gestionnaire


d'événements Page_Load.

protected void Page_Load(object sender, EventArgs e)


{
if (Page.IsPostBack)
{
// Validate Page
Page.Validate();

// Did page validation succeed?


if (!Page.IsValid)
return;
}

// Instantiate Customer
instantiateCustomerObject();
// Populate the UI controls
populateUI();
}

• Désactivez la validation côté client pour le contrôle


CustomerCountryDropDownList. Pour ce faire, définissez la propriété
EnableClientScript du contrôle CustomerCountryRequiredFieldValidator
sur la valeur false.

<asp:RequiredFieldValidator
ID="CustomerCountryRequiredFieldValidator"
ControlToValidate="CustomerCountryDropDownList" runat="server"
ErrorMessage="A country must be selected." Text="*"
EnableClientScript="false"></asp:RequiredFieldValidator>

• Enregistrez le contrôle utilisateur Customer et affichez les modifications dans


le navigateur.
• Dans la fenêtre Windows Internet Explorer Contoso Customer Management,
entrez les paramètres suivants, puis cliquez sur le bouton Insert.
• First Name : Claus
• Last Name : Hansen
• Address : 4567, Main St.
• Zip Code : 98052
• City : Buffalo
• State : New York
• Web Address : http://www.cohowinery.com
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Validation des entrées utilisateur 6-71

Remarque : notez la publication de la page Web avec les entrées. Notez également
qu'après la publication, l'indicateur d'erreur pour la liste Country et le message d'erreur
associé sont affichés.

• Fermez Windows® Internet Explorer®.


• Supprimez la propriété EnableClientScript du contrôle
CustomerCountryRequiredFieldValidator pour activer la validation côté
client du contrôle CustomerCountryDropDownList, puis mettez en forme et
enregistrez le contrôle utilisateur Customer.

<asp:RequiredFieldValidator
ID="CustomerCountryRequiredFieldValidator"
ControlToValidate="CustomerCountryDropDownList" runat="server"
ErrorMessage="A country must be selected."
Text="*"></asp:RequiredFieldValidator>

• Dans la fenêtre Microsoft Visual Studio CustomerManagement, cliquez sur le


bouton Fermer.

f Tâche 2 : désactiver l'ordinateur virtuel et annuler les modifications


• Désactivez l'ordinateur virtuel 10557A-GEN-DEV.
• Annulez les modifications apportées à l'ordinateur virtuel 10557A-GEN-DEV.

Résultats : au terme de cet exercice, vous aurez ajouté des contrôles de validation
côté serveur au contrôle utilisateur Customer.

Remarque : vous trouverez les corrigés des exercices sur le CD-ROM d'accompagnement
du cours.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
6-72 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Fin de l'atelier pratique


Après avoir terminé l'atelier pratique, vous devez éteindre l'ordinateur virtuel
10557A-GEN-DEV et annuler les modifications.
1. Dans Microsoft Hyper-V™ Manager, dans le volet Ordinateurs virtuels, cliquez
avec le bouton droit sur 10557A-GEN-DEV, puis cliquez sur Éteindre.
2. Dans la boîte de dialogue Éteindre l’ordinateur, cliquez sur Éteindre.
3. Dans Hyper-V Manager, dans le volet Ordinateurs virtuels, cliquez avec le
bouton droit sur 10557A-GEN-DEV, puis cliquez sur Rétablir.
4. Dans la boîte de dialogue Rétablir l’ordinateur virtuel, cliquez sur Rétablir.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Validattion des entrées utilisateuur 6-73

Récap
pitulatif de l'atelier pratiq
que

Parcou
urir les question
ns et les répon
nses
1. Pouurquoi avez-vous ajouté le contrôlle RegularExpresssionValidator pour
p le
chaamp d'adresse de messagerie ?
2. Dan
ns quels cas utilissez-vous un contrrôle ValidationSu
ummary ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
6-74 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Récapitu
ulatif du m
module et
e élémen
nts à retenir

Parcou
urir les question
ns et les répon
nses
1. Quel contrôle utiliseerez-vous pour ex
xécuter les tâchess de validation su
uivantes ?

Problèmes et scénario
os réels
1. Vou us voulez vous asssurer qu'un conttrôle d'entrée est toujours rempli par
p
l'utiilisateur, mais vous souhaitez égallement qu'il respecte un format sp
pécifique.
Quelle est la méthod de d'ajout la plus simple ?
Ajoutez un contrôle RequiredFieldV
Validator et un co
ontrôle
gularExpressionV
Reg Validator.
2. Auccun contrôle de vvalidation intrinsèèque ASP.NET nee correspond à voos
bessoins en matière d
de validation. Quue pouvez-vous faaire pour résoudre ce
pro
oblème ?
Crééez un contrôle C
CustomValidatorr et ajoutez la logiique de validation
n sous
form
me de code.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Validation des entrées utilisateur 6-75

Meilleures pratiques
Indiquez quelques-unes des meilleures pratiques s'appliquant au contexte de vos
propres situations professionnelles.
• Toujours ajouter du code de validation côté serveur lors de l'utilisation de
contrôles de validation car le script côté client pourrait être désactivé ou un
utilisateur malveillant pourrait compromettre l'entrée utilisateur, et cette
dernière pourrait alors être envoyée au serveur.
• Toujours valider l'entrée utilisateur utilisée pour effectuer des opérations côté
serveur, telles que la recherche dans une base de données ou l'accès à des
ressources côté serveur.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Résolution des problèmes liés aux applications Web Microsoft® ASP.NET 7-1

Module 7
Résolution des problèmes liés aux
applications Web Microsoft® ASP.NET
Table des matières :
Leçon 1 : Débogage dans ASP.NET 7-3
Leçon 2 : Traçage dans ASP.NET 7-23
Atelier pratique : Résolution des problèmes liés aux applications Web
Microsoft ASP.NET 7-36
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
7-2 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Vue d'en
nsemble du modu
ule

Lorsquee vous développeez une application n Web, il est diffiicile de détecter toutes les
erreurs éventuelles se troouvant dans le coode. Il peut s'agir d'erreurs survennues lors
ompilation, d'erreeurs logiques ou d'erreurs
de la co d d'exécution. Vous pouveez utiliser
les com
mpilateurs Microso oft® Visual Studio
o® 2010 pour ideentifier les erreurss
survenuues lors de la com
mpilation. Pour lees erreurs logiquees et d'exécution, utilisez
le déboggueur Visual Stud dio 2010, ou utiliisez Visual Studioo 2010 avec les objets
o
Debug ete Trace.
Le débo ogage est essentieel lors du dévelop
ppement car il peermet de vérifier qu'une
q
applicattion Web répond d aux exigences sp pécifiées. Au courrs du processus de
d
débogagge, vous pouvez iidentifier les erreurs et les corrigerr. Vous pouvez éggalement
effectueer un traçage de l''application pourr capturer ses info
ormations d'exécution et
analyserr ses performancces.
Ce moddule décrit les étapes requises pou
ur activer le traçagge et le débogage, et
expliqu
ue notamment com mment utiliser cees fonctions danss une application Web.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Résolution des problèm
mes liés aux applications Web
W Microsoft® ASP.NET 7-3

Leçon 1
Débogag
ge dans A
ASP.NET

Grâce au débogage, vouss pouvez recherch her les erreurs daans une application Web
ASP.NE ET. Le débogage cconsiste à identifiier et à résoudre les
l erreurs logiquues et
techniques dans une app plication Web. Poour la plupart dess opérations de débogage,
d
vous po ouvez exécuter le débogueur Visuaal Studio 2010 su ur l'ordinateur héébergeant
l'applicaation Web. Vous pouvez débogueer une application n Web en ajoutan nt des
points d'arrêt
d et en parco
ourant le code paas à pas en mode débogage. Alors que le
débogagge local permet dde déboguer les ap pplications sur votre ordinateur lo ocal, le
débogagge distant permet de déboguer un ne application Weeb exécutée sur un u
emplaceement distant.
Cette leçon décrit comm
ment effectuer un débogage local et un débogage diistant.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
7-4 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Objectifs de la leçon
Au terme de cette leçon, vous serez à même d'effectuer les tâches suivantes :
• décrire les types d'erreurs ;
• décrire le débogage ;
• décrire la classe Debug ;
• expliquer comment collecter les informations de débogage au moment de
l'exécution ;
• décrire les méthodes d'impression des informations de débogage ;
• décrire le débogage dans une application Web ;
• décrire le débogage distant dans une application Web.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Résolution des problèm
mes liés aux applications Web
W Microsoft® ASP.NET 7-5

Discussion : Typess d'erreurs

Points clés
Lorsquee vous développeez des application ns, vous pouvez rencontrer
r différeents types
d'erreurrs. Pour pouvoir lles résoudre, vou
us devez identifierr le type d'erreur afin
d'apporrter la correction appropriée.
Il existee trois types d'erreeurs à gérer lors du
d développemen nt de vos applicaations :
les erreuurs de syntaxe, lees erreurs d'exécu ution et les erreurrs sémantiques.

Erreurs de syntaxe
Pour qu u'un compilateur puisse compiler le code et que l'aapplication soit ex xécutée,
la syntaaxe d'une applicattion doit être corrrecte. La syntaxe désigne la structture de
l'applicaation et les règless associées à cettee structure. Par ex
xemple, il peut s'aagir
d'accolaades entourant un n bloc de code daans Microsoft Vissual C#®
((!thi is.IsPostBack k) { Block of Code }) ou des d instructions Begin
B et
End corrrespondantes daans Microsoft Visual Basic® (Sub SubName() .. .. End
Sub.). Si
S vous omettez l'une des accoladees dans Visual C# # ou l'instruction End Sub
dans Visual Basic, une errreur de syntaxe se produit.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
7-6 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Les erreurs de syntaxe font partie de ce que l'on appelle les erreurs survenues lors
de la compilation. Visual Studio 2010 vous avertit des erreurs potentielles au
moment de la conception. Des notifications de syntaxe ou des tildes sous le code
indiquent que ce dernier ne sera pas compilé ou qu'une erreur peut se produire.
Vous pouvez identifier les erreurs de syntaxe afin de les résoudre lorsque vous
compilez l'application.

Erreurs d'exécution
Les erreurs d'exécution se produisent lorsque l'application est en cours d'exécution.
Ces erreurs sont également appelées exceptions. Par exemple, une application peut
dépendre d'un autre fichier au moment de l'exécution. Toutefois, si ce fichier n'est
pas disponible lorsque l'application tente d'y accéder, une exception est levée et
votre application doit décider s'il faut gérer cette exception. La gestion des
exceptions peut être implémentée en encapsulant du code dans une construction
Try...Catch/try...catch, comme dans l'exemple suivant.

[Visual Basic]
Try
' Place any code here, that are critical to your application,
' that potentially throws an exception
Catch
' Add any cleanup/resolve code here to handle the exception
' thrown, or code to log the exception details
Finally
' Add any code that must be executed whether an exception
' is thrown or not
End Try

[Visual C#]
try
{
// Place any code here, that are critical to your application,
// that potentially throws an exception
}
catch
{
// Add any cleanup/resolve code here to handle the exception
// thrown, or code to log the exception details
}
finally
{
// Add any code that must be executed whether an exception
// is thrown or not
}
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Résolution des problèmes liés aux applications Web Microsoft® ASP.NET 7-7

Erreurs sémantiques
Les erreurs sémantiques sont les plus difficiles à localiser et à corriger car
l'exécution de votre application semblera correcte et aucun message d'erreur
n'apparaîtra. Cependant, votre application ne fonctionnera peut-être pas comme
prévu. Par exemple, un utilisateur effectue un calcul et le résultat correct est affiché
à l'écran. Si le calcul et les opérations associées ne sont pas enregistrés dans le
stockage de données, un second utilisateur verra les mêmes données que celles
initialement affichées par le premier utilisateur. Cela signifie que la sémantique de
l'application est incorrecte. L'identification de ce type d'erreur peut s'avérer très
délicate et déroutante. En effet, elle requiert que vous suiviez l'entrée, la sortie et le
flux de la logique de l'application pour localiser le bogue.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
7-8 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Présentation du d
débogage

Points clés
Les erreeurs de programmmation sont généralement appeléees « bogues » et lee
processus de suivi assoccié est le débogage.
Lorsqu'un bogue est déttecté, vous devez d'abord décider s'il faut le corrigeer, puis
identifieer la source de l'eerreur et, pour fin
nir, corriger le boggue à l'aide des outils
fournis par Visual Studio o 2010.

Décisio
on concernant la correction du
d bogue
nt de déterminer si un bogue doit être
Un certain nombre de faacteurs permetten
corrigé :
• La correction
c du boggue est-elle trop coûteuse
c à ce stad
de du développem
ment ?
• S'aggit-il d'un défaut ggrave ou d'un pro
oblème mineur ?
• Est--il possible de con
ntourner ce bogu
ue ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Résolution des problèmes liés aux applications Web Microsoft® ASP.NET 7-9

Remarque : au moment du développement, la plupart des bogues sont corrigés, mais ce


n'est pas toujours le cas. La correction des bogues n'est pas uniquement applicable au
logiciel mis en circulation ; elle concerne également les projets en cours de développement.

Localisation du bogue sans utiliser le débogueur


Lorsque vous décidez de corriger un bogue, vous devez trouver la source de l'erreur.
Pour ce faire, il vous suffit de commencer à examiner l'entrée et la sortie de
l'application, et de vérifier manuellement où le bogue est apparu. Lorsque vous
détectez qu'une classe ou une méthode unique est responsable du bogue, vous
pouvez commencer à examiner chaque ligne de code, manuellement ou en ajoutant
des commentaires aux lignes de code, de façon à localiser précisément la ligne
responsable du bogue. Outre ce processus, vous pouvez envoyer la sortie des
résultats intermédiaires à un fichier ou à l'interface utilisateur ; vous finirez par
localiser le bogue. En général, vous recherchez et localisez le bogue au moment de
l'exécution, lorsqu'une action (une entrée utilisateur, par exemple) entraîne une
erreur ou un résultat inattendu.

Correction du bogue
Après avoir repéré la ou les lignes de code problématiques, vous devez les corriger
conformément à la spécification de la méthode ou classe en question que vous
utilisez. Vous devez déterminer comment corriger le bogue en fonction de son type.
Pour certaines erreurs, des corrections simples suffisent, comme la suppression
d'une ligne de code qui n'est pas nécessaire ; en revanche, pour d'autres, une
nouvelle expression ou un nouveau calcul est requis. Il existe également d'autres
bogues qui, après une recherche approfondie, exigent que vous reconceviez toute
une classe ou même un module.
Bien qu'il soit parfaitement possible de localiser et corriger un bogue manuellement,
il est plus pratique de les corriger en utilisant différents outils. Dans la plupart des
cas, l'utilisation d'un ou de plusieurs outils pour déboguer votre code représente un
gain de temps. Visual Studio 2010 vous fournit le débogueur Visual Studio 2010, et
les objets et constructions Microsoft .NET Framework permettant de corriger les
bogues. L'outil Visual Debugger vous permet de définir des points d'arrêt et de
parcourir les lignes de code une à une. Vous définissez un point d'arrêt sur une ligne
de code spécifique. Lorsque la ligne de code est atteinte au moment de l'exécution, le
code ouvre le débogueur. À ce stade, vous pouvez examiner le code pour le corriger,
puis continuer à parcourir le code qui suit, ligne par ligne, si nécessaire.

Question : comment vérifierez-vous que votre programme ou code ne contient


aucune erreur ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
7-10 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Classe
e Debug

Points clés
La classse Debug fournit un ensemble de méthodes et de propriétés
p permettant de
déboguer le code via l'im
mpression des infformations de déb bogage et la vérifi
fication
du codee avec les assertio
ons. Avec la classee Debug, vous po ouvez vérifier quee votre
code est fiable, sans que cela n'ait d'incidence sur les perfo ormances et la taiille du
code dee votre produit fin
nal. Un tel résultaat est possible carr, lors de la comppilation
en mod de Version finale, les appels vers lees méthodes et prropriétés de la claasse
Debug ne n sont pas comp pilés dans l'assemmbly. La classe Deebug est globalem ment
disponiible pour votre appplication lorsquee vous importez l'espace
l de nomss
System.Diagnostics. Parr conséquent, vou us n'avez pas bessoin de créer une instance
de la claasse. Vous ne pou
uvez pas créer d'iinstance de la classe Debug car ellle ne
contient aucun construccteur, et vous ne pouvez
p pas hériteer de cette classe car elle
est sealeed.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Résolution des problèmes liés aux applications Web Microsoft® ASP.NET 7-11

Le tableau suivant répertorie les méthodes de la classe Debug.

Méthode Description

Debug.Write Utilisez cette méthode pour écrire une chaîne de texte de


votre choix ou pour écrire la sortie à partir de la méthode
ToString d'un objet. Le message ou la chaîne de texte est
écrit(e) dans les écouteurs de trace de la collection
Listeners.

Debug.WriteLine Utilisez cette méthode pour écrire une ligne de texte de


votre choix ou pour écrire la sortie à partir de la méthode
ToString d'un objet. Le message ou la chaîne de texte,
suivi(e) d'un terminateur de ligne, est écrit(e) dans les
écouteurs de trace de la collection Listeners.

Debug.WriteIf Utilisez cette méthode pour écrire sous certaines


conditions une chaîne de texte de votre choix ou pour
écrire sous certaines conditions la sortie à partir de la
méthode ToString d'un objet.

Debug.Print Utilisez cette méthode pour écrire une ligne de texte


formatée de votre choix.

Debug.Assert Utilisez cette méthode pour afficher un message si une


condition spécifiée a la valeur false.
La pile des appels affichée dans la boîte de dialogue lors
de l'appel de Debug.Assert contient les mêmes
informations que la fenêtre Pile des appels dans Visual
Studio 2010 en mode arrêt.

Remarque : un écouteur crée une sortie formatée lors du débogage et du traçage. La


collection Listeners contient des écouteurs qui surveillent la sortie de débogage et de
traçage.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
7-12 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Colleccte des inforrmations de débogage au moment de


d
l'exéccution

Points clés
Tout enn vérifiant que votrre application suiit le chemin d'exéécution requis ou effectue
les actio
ons nécessaires, vo ous pouvez affich her les informationns de diagnostic sur
s les
demand des de page. Pour cela, activez la fo onctionnalité de trraçage pour votre page ou
applicattion. Lorsque vou us utilisez les classses Debug et TracceContext, vous pouvez
p
collecterr et afficher les informations de diaagnostic au momeent de l'exécution n:
• Classe Debug. Vous pouvez utiliser laa classe Debug po our extraire les
ormations de débogage. Les instrucctions utilisant la classe Debug ne sont
info
exéécutées que lorsqu ue vous compilez l'application en mode
m débogage et que
l'ap
pplication Web estt exécutée dans lee débogueur. Si vo ous créez une verrsion
finaale (Release), les in
nstructions ne seront pas incluses dans l'assembly compilé.
c
Aveec la classe Debug g, les messages so
ont envoyés sous formef de sortie à la
colllection actuelle dees écouteurs de trrace, qui, par défaaut, affiche la sortiie dans le
voleet Débogage de laa fenêtre Sortie daans Visual Studio 2010. Un écouteeur crée
unee sortie formatée à partir de la sortiie de débogage.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Résolution des problèmes liés aux applications Web Microsoft® ASP.NET 7-13

Lorsque vous utilisez la classe Debug pour imprimer les informations de


débogage et vérifier votre logique, vous pouvez rendre votre code plus stable
sans que cela n'ait une incidence sur les performances du produit final ou la
taille du code.
• Classe TraceContext. La classe TraceContext vous permet d'afficher les
informations sur une page Web ou dans le journal des traces dans la mémoire.
Elle permet de capturer et de présenter les détails d'exécution concernant une
demande Web. Dans un formulaire Web, la classe TraceContext est accessible
à l'aide de la propriété Trace de la classe Page. Gardez à l'esprit que la
propriété Trace est différente de la classe Trace dans l'espace de noms
System.Diagnostics.

Remarque : pour utiliser la classe Debug, vous devez importer l'espace de noms
System.Diagnostics dans votre fichier de code ou préfixer l'espace de noms à l'appel de
méthode de classe.

Question : quelles sont les deux configurations par défaut dans Visual Studio 2010 ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
7-14 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Méthodes d'impression des in


nformations de débogag
ge

Points clés
Pour im
mprimer des inforrmations de débo ogage, plusieurs méthodes
m sont à votre
v
disposittion, dont les méthodes Write et WriteLine.
W
• Wrrite. Écrit une chaaîne de texte danss les écouteurs dee trace. Cette métthode
con
ntient quatre surccharges : deux écrrivant une seule ligne
l de texte, et les
deu
ux autres écrivantt une ligne de tex xte et le nom de catégorie.
c Le nom m de
catéégorie peut servirr à regrouper les messages
m de sorttie.
• WrriteLine. Écrit une chaîne de textee dans les écouteu urs de trace, et ajo
oute un
sau
ut de ligne à la fin
n du texte de sortee que tout nouveeau texte suivant votre
v
app
pel soit écrit sur laa prochaine ligne.. Cette méthode contient
c quatre suurcharges :
deu
ux écrivant une seeule ligne de textte, et les deux auttres écrivant une ligne de
textte et le nom de caatégorie. Vous poouvez utiliser le nom
n de catégorie pour
regrrouper les messaages de sortie.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Résolution des problèmes liés aux applications Web Microsoft® ASP.NET 7-15

Les exemples de code suivants illustrent comment utiliser les méthodes Write et
WriteLine.

[Visual Basic]
Debug.Write("Writing a string of text...")
Debug.WriteLine("Writing a line of text...")
Debug.Write("Writing a string of text...", "Category 1")
Debug.WriteLine("Writing a line of text...", "Category 2")

[Visual C#]
Debug.Write("Writing a string of text...");
Debug.WriteLine("Writing a line of text...");
Debug.Write("Writing a string of text...", "Category 1");
Debug.WriteLine("Writing a line of text...", "Category 2");

Pour imprimer des informations de débogage de façon conditionnelle, deux autres


méthodes sont disponibles : la méthode WriteIf et la méthode WriteLineIf.
• WriteIf. Écrit une chaîne de texte dans les écouteurs de trace sous certaines
conditions. Cette méthode contient quatre surcharges : deux écrivant une
seule ligne de texte, et deux écrivant une ligne de texte et le nom de catégorie
pouvant être utilisé pour regrouper les messages de sortie.
• WriteLineIf. Écrit une chaîne de texte dans les écouteurs de trace sous
certaines conditions, et ajoute un saut de ligne à la fin du texte de sorte que
tout nouveau texte suivant votre appel soit écrit sur la prochaine ligne. Cette
méthode contient quatre surcharges : deux écrivant une seule ligne de texte, et
deux écrivant une ligne de texte et le nom de catégorie. Vous pouvez utiliser le
nom de catégorie pour regrouper les messages de sortie. Les exemples de code
suivants illustrent comment utiliser les méthodes WriteIf et WriteLineIf.

[Visual Basic]
Debug.WriteIf(Page.IsPostBack, "Writing a string of text...")
Debug.WriteLineIf(Page.IsPostBack, "Writing a line of text...")

[Visual C#]
Debug.WriteIf(Page.IsPostBack, "Writing a string of text...");
Debug.WriteLineIf(Page.IsPostBack, "Writing a line of text...");
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
7-16 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Pour formater les informations de débogage lors de l'impression, utilisez la


méthode Print, qui elle-même utilise la méthode String.Format pour convertir la
valeur d'un objet en sa représentation textuelle, puis incorporez cette représentation
dans une chaîne.
La méthode Print écrit une ligne de texte formatée dans les écouteurs de trace.
Cette méthode contient deux surcharges, comme indiqué dans les exemples de
code suivants.

[Visual Basic]
Debug.Print("Printing a line of text...")
Debug.Print("Printing a line a text, Postback = {0}", Page.IsPostBack)

[Visual C#]
Debug.Print("Printing a line of text...");
Debug.Print("Printing a line a text, Postback = {0}",
Page.IsPostBack);

Si vous devez afficher un message ou la pile des appels lorsqu'une condition


spécifique a la valeur false, vous pouvez utiliser la méthode Debug.Assert pour
rechercher la condition. Cette méthode contient quatre surcharges, comme indiqué
dans les exemples de code suivants.

[Visual Basic]
Debug.Assert(Page.IsPostBack)
Debug.Assert(Page.IsPostBack, "Brief Message")
Debug.Assert(Page.IsPostBack, "Brief Message", "Detail description
message")
Debug.Assert(Page.IsPostBack, "Brief Message", "Detail description
message", objectArrayToFormat)

[Visual C#]
Debug.Assert(Page.IsPostBack)
Debug.Assert(Page.IsPostBack, "Brief Message")
Debug.Assert(Page.IsPostBack, "Brief Message", "Detail description
message");
Debug.Assert(Page.IsPostBack, "Brief Message", "Detail description
message", objectArrayToFormat);
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Résolution des problèmes liés aux applications Web Microsoft® ASP.NET 7-17

Une boîte de dialogue apparaît que vous exécutiez l'application avec ou sans
débogage, et que vous compiliez l'application en mode débogage ou en mode
Version finale. Cette boîte de dialogue est générée avec la surcharge de la méthode,
qui prend en compte les trois paramètres suivants : condition, message et description.
La première surcharge indiquée ci-dessus ne prend en compte qu'un paramètre
condition et n'affiche que la pile des appels. La surcharge suivante n'affiche que le
message et la pile des appels. La pile des appels indique le nom des fonctions
qu'elle contient, les types de paramètres et les valeurs de paramètre à un moment
précis.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
7-18 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Débogage d'une application Web


W

Points clés
Si l'une de vos pages Weeb contient une erreur, utilisez le débogage
d pour id
dentifier
la sourcce du problème. L Lorsque vous sou uhaitez déboguerr une application Web,
vous deevez d'abord activver le débogage, puisp décider si vo ous devez générerr une
sortie des informations d de débogage pendant que votre ap pplication Web est
e en
cours d'exécution. Vous devez égalementt décider si vous souhaitez ajouterr des
points d'arrêt
d dans votree code, choisir l'en
ndroit où l'exécution doit être susspendue,
et, pourr finir, exécuter l'aapplication Web en mode débogaage. Si vous avez ajouté
a
des poin nts d'arrêt, vous ppouvez parcourirr le code pas à paas lorsque l'un d'eentre eux
est atteiint.

Activattion du déboga
age d'une appliccation Web
Si vous souhaitez déboguer votre applicaation Web, vous devez
d activer le débogage
dans le fichier web.confiig. Vous devez loccaliser l'élément compilation
c d'ouuverture
se trouvvant dans l'élément system.web et définir la valeurr de l'attribut debbug sur
true. Lees exemples de coode suivants illusstrent comment définir
d la valeur de
d
l'attribu
ut debug.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Résolution des problèmes liés aux applications Web Microsoft® ASP.NET 7-19

[Visual Basic]
<configuration>
<system.web>
<compilation debug="true" strict="false" explicit="true">
...
</system.web>
<configuration>

[Visual C#]
<configuration>
<system.web>
<compilation debug="true">
...
</system.web>
<configuration>

Ajout et suppression de points d'arrêt


Si vous souhaitez que l'exécution de votre application Web soit suspendue à des
points spécifiques du code, vous pouvez ajouter un point d'arrêt. Vous devez
d'abord localiser la ligne de code à laquelle vous souhaitez ajouter le point d'arrêt,
puis appuyer sur la touche F9 ou cliquer sur Basculer le point d'arrêt dans le
menu Débogage. Pour supprimer le point d'arrêt, appuyez de nouveau sur F9 ou
cliquez sur Basculer le point d'arrêt dans le menu Débogage. Par défaut, les lignes
de code avec les points d'arrêt sont mises en surbrillance avec un texte de couleur
blanche sur un arrière-plan rouge foncé.
S'il existe plusieurs points d'arrêts et que vous décidez de tous les supprimer,
appuyez sur les touches Ctrl + Maj + F9. Vous pouvez aussi cliquer sur Supprimer
tous les points d'arrêt dans le menu Débogage afin de supprimer tous les points
d'arrêt en une seule action. Vous serez invité à confirmer cette action.

Exécution en mode débogage


Pour exécuter votre application en mode débogage, vous devez appuyer sur la
touche F5 ou cliquer sur Démarrer le débogage dans le menu Débogage. Si à ce
stade, le débogage n'a pas encore été activé, vous serez invité à effectuer cette
opération dans la boîte de message Débogage non activé qui s'affichera. Dans la
boîte de message, il vous suffit de cliquer sur OK pour activer le débogage. Le
fichier web.config sera alors modifié.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
7-20 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Exécution du code pas à pas


Lorsque le débogueur atteint la ligne contenant le point d'arrêt, l'exécution est
suspendue. Vous pouvez ensuite parcourir le code pas à pas et examiner la logique
de votre application.
Si vous souhaitez que la ligne de code active soit exécutée sans effectuer de pas à
pas détaillé du code sous-jacent (par exemple, une méthode dans la même classe
ou une méthode dans une autre classe), appuyez sur la touche F10 ou, dans le
menu Débogage, cliquez sur Pas à pas principal. L'exécution sera suspendue sur
la ligne de code suivante.
Si vous souhaitez effectuer un pas à pas détaillé du code sous-jacent de la ligne de
code actuelle à exécuter, le cas échéant, appuyez sur la touche F11 ou, dans le menu
Débogage, cliquez sur Pas à pas détaillé. L'exécution sera suspendue sur la ligne de
code suivante du code sous-jacent. Par défaut, les propriétés font souvent l'objet d'un
pas à pas principal car elles ne contiennent généralement pas de logique complexe,
mais vous pouvez toutefois effectuer un pas à pas détaillé dans une propriété.
Cliquez avec le bouton droit sur la ligne de code qui appelle la propriété getter ou
setter, puis, dans le menu contextuel, pointez sur Pas à pas détaillé spécifique et
cliquez sur NamespaceName.ClassName.set_PropertyName.

Utilisation des fenêtres de variable de débogueur


Le débogueur Visual Studio 2010 fournit plusieurs fenêtres, globalement appelées
fenêtres de variable, pour afficher les informations de variable au cours du débogage.
Il s'agit des fenêtres suivantes : Automatique, Variables locales, Espion et Espion 1
à Espion 4. Chaque fenêtre de variable contient une grille dotée des trois colonnes
suivantes : Nom, Valeur et Type. Les fenêtres Automatique et Variables locales
affichent le nom des variables ajoutées automatiquement dans la colonne Nom.
Dans la fenêtre Espion, vous pouvez ajouter vos propres variables ou expressions
dans la colonne Nom. Les colonnes Valeur et Type affichent la valeur et le type de
données du résultat de la variable ou de l'expression correspondante. Vous pouvez
modifier la valeur d'une variable dans la colonne Valeur.

f Pour afficher une fenêtre de variable


• Dans le menu Débogage, cliquez sur Fenêtres, puis choisissez le nom de la
fenêtre de variable à afficher. Pour afficher ces éléments de menu, le débogueur
doit être en cours d'exécution ou en mode arrêt ; vous ne pouvez pas accéder à
ces éléments de menu ou afficher ces fenêtres en mode Création.

Question : comment examinerez-vous une variable ou une valeur de la variable au


cours d'une session de débogage ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Résolution des problèm
mes liés aux applications Web
W Microsoft® ASP.NET 7-21

Débogage distantt

Points clés
Le débo ogage distant est lee processus de débbogage des appliccations Web exécu utées sur
un serveeur différent. Cettee opération vous permet
p de déboguuer les application
ns Web
sur plussieurs serveurs dissparates, à partir d'une
d même station n de travail. Vous pouvez
l'utiliser si vous ne parven nez pas à exécuterr votre application
n Web localement ou que
vous sou uhaitez tester l'app
plication pendantt son déploiementt sur un serveur Web.
W

Remotee Debugging M
Monitor
Lorsquee vous effectuez un n débogage distan nt, vous pouvez uttiliser Remote Deb
bugging
Monitorr, ou msvsmon.exe,, qui est une petitee application à laq
quelle Visual Studiio 2010 se
connectte. Vous pouvez in nstaller Remote Deebugging Monitorr sur l'ordinateur distant
d ou
l'exécuteer à distance à parrtir d'un dossier paartagé.
Par défaaut, Remote Debu ugging Monitor esst exécuté en tantt qu'application Windows®.
W
Pour efffectuer un débogaage dans ASP.NET T ou un autre envvironnement serveeur,
configurrez cette applicatiion de surveillancce de façon à ce qu u'elle soit exécutéée en tant
que servvice Windows. Po our ce faire, utiliseez l'assistant Conffiguration Visual Studio
S
2010 Reemote Debugger. Vous pouvez dém marrer cet assistan nt depuis le dossiier Visual
Studio Tools
T figurant danns le menu Déma arrer.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
7-22 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Avant de commencer le débogage distant, vous devez configurer les


environnements sur l'hôte du débogueur et l'ordinateur distant. Vous devez
également prendre en compte les fonctionnalités de sécurité. Par exemple, le
serveur distant doit accorder l'accès à l'utilisateur qui effectue le débogage.

Configuration du débogage distant


Visual Studio 2010 prend en charge le débogage distant d'un ordinateur à l'autre.
Lorsque vous effectuez un débogage distant, l'ordinateur hôte peut être toute
plateforme prenant en charge Visual Studio 2010. Vous pouvez procéder au
débogage distant lorsque le programme que vous déboguez se trouve sur le
serveur Web ou si ce programme fonctionne différemment sur votre ordinateur.

Question : dans quels scénarios effectuerez-vous un débogage distant ?


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Résolution des problèm
mes liés aux applications Web
W Microsoft® ASP.NET 7-23

Leçon 2
Traçage dans ASP
P.NET

Le traçaage est le processu us de réception des


d messages à caaractère informatif
concern nant l'exécution d d'une application Web au moment de l'exécution ;
autremeent dit, il s'agit d'u
un moyen de survveiller l'exécution de votre applicatiion Web.
Ces messsages à caractèree informatif issuss de l'application Web vous permeettent
d'identifier les problèmees ou d'analyser lees performances sans que cela n'aait
d'influence sur la sortie d du programme. Cela C inclut l'enreggistrement des déétails de
toutes lees exceptions et ll'enregistrement du d flux du programme. Le traçagee est
généraleement utilisé dan ns un environnem ment de productio on, ou un environ nnement
similaire, dans lequel vous pouvez effectu uer le débogage. Les L instructions ded
traçage peuvent rester dans le code lorsq que vous publiez votre application n Web car,
par défaaut, le traçage n'eest pas activé. Cela signifie que tou ute sortie de tracee est
ignorée. Vous pouvez alo ors activer le traççage lorsque vouss trouvez une erreeur ou si
vous ren ncontrez des problèmes liés aux performances.
p Lee traçage s'avère donc
d utile
lorsqu'ill est difficile d'utiiliser le débogueuur. À cet effet, Vissual Studio 2010 fournit
la classee TraceContext.
Cette leçon décrit comm
ment utiliser la claasse TraceContex
xt afin d'implémeenter le
traçage dans une applicaation Web.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
7-24 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Objectifs de la leçon
Au terme de cette leçon, vous serez à même d'effectuer les tâches suivantes :
• décrire le traçage ;
• décrire la classe TraceContext ;
• effectuer une opération de traçage dans une application Web.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Résolution des problèm
mes liés aux applications Web
W Microsoft® ASP.NET 7-25

Qu'esst-ce que le ttraçage ?

Points clés
Le traçaage est le processu us de réception des
d messages à caaractère informatif
concern nant l'exécution d d'une application Web au moment de l'exécution. Utilisez
U
le traçagge si l'une de vos pages Web contient une erreur et que vous souhaaitez
analyserr cette erreur, ou si vous voulez su uivre le chemin d'exécution
d et visu
ualiser le
temps écoulé
é pour les diifférentes méthoddes. Pour tracer une
u application Web,W vous
devez d'abord
d activer le traçage, puis décider si vous deveez obtenir une sorrtie des
informaations de trace lorrsque votre appliication Web est en cours d'exécutiion. Vous
devez éggalement déterm miner si vous souhhaitez utiliser le trraçage au niveau de la
page ouu au niveau de l'ap pplication.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
7-26 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Trace ASP.NET
ASP.NET offre une fonction appelée « traçage », qui vous permet d'afficher les
informations de diagnostic concernant une seule demande pour une page ASP.NET.
Pour cela, il vous suffit d'activer cette fonction pour la page ou l'application. Le traçage
vous permet également d'écrire des instructions de débogage directement dans le
code sans devoir les supprimer de votre application lorsque vous la déployez dans
les serveurs de production. Vous pouvez écrire des variables ou des structures dans
une page, déclarer si une condition est satisfaite ou simplement effectuer un traçage
dans le chemin d'exécution de votre page ou application.
Pour que ces messages et autres informations de traçage puissent être collectés et
affichés, vous devez activer le traçage pour la page ou l'application. Lorsque vous
activez le traçage, deux événements se produisent :
• ASP.NET ajoute une série de tableaux d'informations de diagnostic
immédiatement à la suite de la sortie de la page. Si vous avez activé le traçage
pour l'application, les informations sont également envoyées à une application
visionneuse de trace.
• ASP.NET affiche vos messages de diagnostic personnalisés dans la table
Informations de traçage des données de performances ajoutées.

Question : à quoi sert l'utilisation de la fonctionnalité de traçage ?


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Résolution des problèm
mes liés aux applications Web
W Microsoft® ASP.NET 7-27

Classe
e TraceConte
ext

Points clés
Vous po ouvez utiliser la cclasse TraceConttext pour écrire des
d messages de trace t sur
une pagge ou dans le jourrnal des traces daans la mémoire. PourP implémenter le
journal des traces, utiliseez la collection dee messages TraceeRecords. Il s'agit d'une
collectioon des enregistreements de trace asssociés à la demaande active. Vous n'avez
pas beso oin de créer une instance de la claasse TraceContex xt car celle-ci est
immédiiatement disponib ble lorsque vous utilisez un formuulaire Web ASP.N NET via
la proprriété Trace de la classe Page. En faait, la classe TracceContext est de type
System.Web.HttpConteext. Elle encapsulle toutes les inforrmations HTTP
concern nant une demand de HTTP (Hypertext Transfer Prottocol). Vous ne devez
donc jam mais créer d'instaance de cette classse car le construccteur prend en ch harge
l'infrastrructure .NET Fraamework. Cette cllasse n'est pas prrévue pour être uttilisée
directemment à partir du ccode. En outre, laa classe TraceCon ntext ne peut pass être
héritée car
c elle est sealedd.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
7-28 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Pour écrire des informations dans le journal des traces, utilisez l'une des méthodes
suivantes de la classe TraceContext :
• Write. Écrit un message de trace dans le journal des traces. La méthode Write
contient trois surcharges ; chacune d'entre elles écrit un message de trace dans
le journal des traces. La deuxième surcharge spécifie le nom de catégorie
indiquant la catégorie qui recevra le message de trace. La troisième surcharge
prend en compte un troisième paramètre, de type Exception, qui indique que
vous pouvez fournir une exception interceptée ou définie par l'utilisateur.
• Warn. La méthode Warn est semblable à la méthode Write. Toutefois,
contrairement à la méthode Write, le texte de tous les avertissements apparaît
en rouge dans le journal.

Les exemples de code suivants illustrent comment écrire les messages de trace.

[Visual Basic]
Trace.Write("Trace Message")
Trace.Write("Category 1", "Trace Message")
Trace.Write("Category 2", "Trace Message", New Exception("En Exception
was thrown, because..."))

[Visual C#]
Trace.Write("Trace Message");
Trace.Write("Category 1", "Trace Message");
Trace.Write("Category 2", "Trace Message", new Exception("En Exception
was thrown, because..."));

Si vous activez le traçage, la sortie sera ajoutée à la page dans laquelle le code a été
exécuté.
Sur la page des informations de trace, le paramètre de catégorie vous permet de
classer et regrouper les messages de trace. Par exemple, vous pouvez définir l'ordre
de tri des messages de trace afin d'afficher les messages de la même catégorie
ensemble. L'attribut TraceMode permet de spécifier l'ordre dans lequel vous
souhaitez que les messages de trace apparaissent.
Définissez l'attribut TraceMode sur SortByTime pour trier les messages de trace
dans l'ordre dans lequel ils sont traités.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Résolution des problèmes liés aux applications Web Microsoft® ASP.NET 7-29

Le code suivant montre comment définir l'attribut TraceMode sur SortByCategory


pour trier les messages de trace en fonction des catégories que vous avez indiquées
dans les appels de méthode Warn et Write.

<%@ Page ... Trace="True" TraceMode="SortByCategory" %>

Utilisez la propriété IsEnabled de la classe TraceContext pour modifier de façon


dynamique l'état du traçage dans une page.

Instruction TraceContext.IsEnabled
La classe TraceContext possède une propriété booléenne nommée IsEnabled, qui
vous permet d'appeler les méthodes Write et Warn uniquement lorsque le traçage
est activé. Les exemples de code suivants illustrent comment utiliser l'instruction
Trace.IsEnabled.

[Visual Basic]
If Trace.IsEnabled Then
Trace.Write("Tracing is enabled!")
End If

[Visual C#]
if (Trace.IsEnabled)
{
Trace.Write("Tracing is enabled!");
}

Vous pouvez également utiliser la propriété IsEnabled afin de modifier de façon


dynamique l'état du traçage d'une page. Le code suivant illustre cette opération.

[Visual Basic]
Trace.IsEnabled = False

[Visual C#]
Trace.IsEnabled = false;
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
7-30 Introduction au développement Web avec Microsoft® Visual Studio® 2010

La capture d'écran suivante présente les informations de trace d'une page dans une
application Web :

Utilisez la classe TraceContext pour ajouter des messages à des catégories de trace
spécifiques et obtenir un ensemble d'enregistrements de trace à la fin de
l'exécution de la demande en vue d'un traitement personnalisé.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Résolution des problèm
mes liés aux applications Web
W Microsoft® ASP.NET 7-31

Traçag
ge d'une app
plication We
eb

Points clés
Vous po ouvez activer le trraçage au niveau de la page ou au niveau de l'appliication.
Pour activer le traçage auu niveau de la pagge, vous devez dééfinir l'attribut Trrace de la
directive Page sur la valeeur true pour le formulaire
f Web.

Activattion du traçagee d'une applicattion Web


Le codee suivant montre comment activerr le traçage au nivveau de la page.

[Visua
al Basic]
<%@ Pa
age Language="V
VB" Trace="true"
" %>

[Visua
al C#]
<%@ Pa
age Language="C
C#" Trace="true"
" %>

Lorsquee vous utilisez le traçage au niveauu de la page, touss les messages de trace
sont ajo
outés à la fin de laa page Web, ce quui vous permet d'afficher
d rapidemment les
messagees de trace lorsqu ue vous affichez la page Web.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
7-32 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Pour activer le traçage au niveau de l'application, vous devez configurer le fichier


web.config pour l'application Web et ajouter l'élément trace. Le code suivant
montre comment activer le traçage au niveau de l'application.

<configuration>
...
<system.web>
<trace enabled="true" />
...
</system.web>
</configuration>

Si vous devez afficher les informations de trace lorsque l'application est en cours
d'exécution, utilisez les méthodes de la classe TraceContext.
Lorsque vous activez le traçage au niveau de l'application, vous activez également
le traçage pour toutes les pages de l'application Web. Avec ce type de traçage, vous
disposez également de plus de flexibilité lorsque vous écrivez les instructions de
trace. Par exemple, avec le traçage au niveau de la page, tous les messages de trace
sont ajoutés à la page. Par contre, avec le traçage au niveau de l'application, vous
pouvez écrire les messages de trace dans la page ou la mémoire. La visionneuse de
trace au niveau de l'application trace.axd a accès aux instructions de trace que
vous enregistrez dans la mémoire. Pour afficher la visionneuse de trace au niveau
de l'application, tapez l'URL de votre application et ajoutez-y trace.axd ; par
exemple, http://www.contoso.com/trace.axd.
Lorsqu'une page de votre application Web est demandée, cette page collecte les
informations de trace, puis exécute les instructions de trace qu'elle contient. Vous
pouvez afficher la sortie de trace dans la visionneuse de trace. Cette dernière
répertorie les demandes dans l'ordre dans lequel elles sont traitées, et vous pouvez
sélectionner une demande spécifique à partir de n'importe quelle page
d'application ayant été demandée.

Résultats de trace
Les résultats du traçage au niveau de la page sont ajoutés à la fin de la page .aspx
pour laquelle ils sont activés. Les résultats du traçage contiennent de nombreuses
informations, ainsi que les messages personnalisés que vous avez créés à l'aide des
instructions Trace.Write et Trace.Warn.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Résolution des problèmes liés aux applications Web Microsoft® ASP.NET 7-33

Catégories de trace
Les résultats du traçage contiennent plusieurs catégories d'informations. Le tableau
suivant répertorie toutes les catégories et fournit la description du type
d'informations qu'elles contiennent.

Catégorie Description

Détails de la requête Contient des informations sur la demande : l'identification


(ID) de session, ainsi que l'heure, le type et l'état de la
demande.

Informations de Contient la sortie des instructions de trace standard et


traçage personnalisées. La colonne Du premier (s) indique la durée
totale écoulée entre l'exécution et le moment où le traçage
est effectué, et la colonne Du dernier (s) affiche la durée
d'incrément.
Cette section est très utile pour le débogage. Les
informations sur le minutage qu'elle contient sont précieuses
lorsque l'exécution du profilage et de la recherche de
méthodes dans votre application prend trop de temps.

Arborescence du Répertorie tous les éléments situés sur la page, ainsi que leur
contrôle taille.
Fournit une représentation HTML de l'arborescence du
contrôle ASP.NET. Affiche l'ID unique de chaque contrôle, le
type d'exécution, le nombre d'octets nécessaires à l'affichage
et le nombre d'octets requis dans ViewState et ControlState.
Les trois colonnes affichant le poids de chaque contrôle
indiquent le nombre d'octets qu'un contrôle donné occupe
dans ViewState ou ControlState. Vous devez connaître le
nombre d'octets utilisés par chacun des contrôles,
particulièrement si vous écrivez vos propres contrôles. Vos
contrôles doivent renvoyer le moins d'octets possible pour
que le poids général de la page reste faible.

État de session Contient des informations sur les valeurs stockées dans l'état
de session, le cas échéant.

État de l'application Contient des informations sur les valeurs stockées dans l'état
d'application, le cas échéant.

Collection Cookies Affiche la liste des cookies utilisés pour la demande et la


réponse.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
7-34 Introduction au développement Web avec Microsoft® Visual Studio® 2010

(suite)

Catégorie Description

Collection Headers Affiche la liste des paires nom/valeur d'en-tête des messages
de demande et de réponse.

Collection Form Affiche la liste des contrôles, ainsi que leurs valeurs sur le
formulaire publié.

Collection Affiche la liste des valeurs transmises dans l'URL.


Querystring

Variables serveur Liste de toutes les variables serveur et de leurs valeurs.

Vous pouvez afficher les informations de trace au bas de chaque page.


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Résolution des problèmes liés aux applications Web Microsoft® ASP.NET 7-35

Dans la capture d'écran suivante, les demandes sont affichées dans la visionneuse
de trace :

Question : comment afficherez-vous les informations de trace ?


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
7-36 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Atelier pratique
p : Résolution des problèmess liés
aux appllications W
Web Miccrosoft ASSP.NET

Remarq que : dans cet ateliier pratique, vous pouvez


p exécuter lees tâches en utilisa
ant le
langage de programmatio on Visual Basic ou Visual
V C#. Si vous utilisez Visual Basiic comme
langage de programmatio on, reportez-vous aux
a instructions fo
ournies dans la secttion 1 de
la page ded l'atelier pratiqu
ue correspondant. Si vous utilisez Vissual C# comme lan ngage de
program mmation, reportez--vous aux instructions fournies dans la section 2 de la page de
l'atelier pratique
p correspon ndant.

Introdu
uction
Dans ceet atelier pratiquee, vous déboguereez une application Web ASP.NET afin de
détecterr les erreurs d'exéécution, en ajoutaant des points d'aarrêt et des espions. Vous
implém
menterez égalemen nt le traçage danss l'application Weeb pour afficher des
d
informaations, telles que l'état de session, l'état d'applicatio
on et les variabless serveur.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Résolution des problèmes liés aux applications Web Microsoft® ASP.NET 7-37

Objectifs
Au terme de cet atelier pratique, vous serez à même d'effectuer les tâches suivantes :

• déboguer une application Web pour afficher les informations relatives à


l'exécution ;
• activer et implémenter le traçage d'une application Web.

Configuration de l'atelier pratique


Pour cet atelier pratique, vous utiliserez l'environnement d'ordinateurs virtuels
disponible. Avant de commencer l'atelier pratique, vous devez :

• Démarrer l'ordinateur virtuel 10557A-GEN-DEV, puis vous connecter à l'aide


des informations d'identification suivantes :
• Nom d'utilisateur : Stagiaire

• Mot de passe : Pa$$w0rd


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
7-38 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Scéna
ario de l'ateliier pratique

Vous êtes développeur cchez Contoso, Ltd d, une grande enttreprise disposan nt d'une
base de clients mondialee. Votre organisattion gère ses inforrmations clients via v un
site Web b. Pour conserver des information ns utilisateur corrrectes, vous devezz
déboguer l'application W Web de gestion dee la clientèle afin de détecter les errreurs
logiques dans ses fonctio onnalités. Pour cee faire, vous deveez ajouter les insttructions
de sortie, les points d'arrrêt et les espions appropriés. Vouss devez égalemen nt activer
le traçagge en utilisant le fichier web.configg afin d'identifierr les erreurs possiibles
dans le code après le dép ploiement de l'ap
pplication. La verssion de l'applicattion Web
terminéée dans le modulee précédent a été déployée dans un u serveur interm médiaire
où l'exéécution du débogage est impossiblle. Toutefois, il seemble qu'il existee un
problèmme lié aux perform mances lors du ch hargement ou dee l'affichage du
formulaaire Web InsertCu ustomer.aspx. Vo ous ne pouvez paas ajouter des
informaations de trace à cchaque page. Vou us devez par consséquent activer lee traçage
au niveaau de l'application, puis vérifier quue vous pouvez afficher
a les minuttages du
formulaaire Web InsertCu ustomer.aspx.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Résolution des problèmes liés aux applications Web Microsoft® ASP.NET 7-39

Section 1 : Visual Basic


Exercice 1 : Débogage d'une application Web
Dans cet exercice, les tâches principales sont les suivantes :

1. Ouvrir un site Web ASP.NET existant.

2. Activer le débogage du projet Web CustomerManagement.

3. Ajouter des instructions de sortie de débogage au contrôle utilisateur.

4. Rechercher et corriger un bogue.

f Tâche 1 : ouvrir un site Web ASP.NET existant


• Ouvrez une session sur 10557A-GEN-DEV en tant que Stagiaire avec le mot
de passe Pa$$w0rd.
• Ouvrez Microsoft Visual Studio 2010.
• Ouvrez la solution CustomerManagement située dans le dossier
D:\Labfiles\Starter\M7\VB.

f Tâche 2 : activer le débogage du projet Web CustomerManagement


• Ouvrez le fichier web.config du projet Web CustomerManagement.
• Définissez l'attribut debug de l'élément compilation sur la valeur true.

<compilation debug="true" strict="false" explicit="true"


targetFramework="4.0" />

• Enregistrez et fermez le fichier web.config.

f Tâche 3 : ajouter des instructions de sortie de débogage au contrôle


utilisateur
• Ouvrez le contrôle utilisateur Customer.
• Importez l'espace de noms System.Diagnostics.

Imports System.Diagnostics
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
7-40 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Dans le gestionnaire d'événements Page_Load, lorsque la page est chargée en


réponse à une publication, envoyez le message « Page Postback detected in
Page_Load » aux écouteurs de trace.

Debug.WriteLine("Page Postback detected in Page_Load")

• Dans le gestionnaire d'événements Page_Load, lorsque la page n'est pas


chargée en réponse à une publication, envoyez le message « No Page Postback
detected in Page_Load » aux écouteurs de trace.

Debug.WriteLineIf(Not Page.IsPostBack, "No Page Postback detected


in Page_Load")

• À la fin du gestionnaire d'événements Page_Unload, envoyez le message


« Page has been unloaded » aux écouteurs de trace.

Debug.WriteLine("Page has been unloaded")

• À la fin de l'événement Click du contrôle CustomerInsertButton, envoyez le


message « Customer has been inserted in CustomerInsertButton_Click » aux
écouteurs de trace.

Debug.WriteLine("Customer has been inserted in


CustomerInsertButton_Click");

• À la fin de la méthode privée populateUI, envoyez le message « UI controls


have been populated » aux écouteurs de trace.

Debug.WriteLine("UI controls have been populated")

• À la fin de la méthode privée instantiateCustomerObject, envoyez le message


« Customer object has been instantiated » aux écouteurs de trace.

Debug.WriteLine("Customer object has been instantiated")

• Enregistrez le fichier de code du contrôle utilisateur.


• Ajoutez un élément par défaut au contrôle Country DropDownList.
• Dans la fenêtre Customer.ascx.vb, cliquez avec le bouton droit, puis
cliquez sur Concepteur de vues.
• Dans la fenêtre Customer.ascx, cliquez sur le contrôle
CustomerCountryDropDownList.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Résolution des problèmes liés aux applications Web Microsoft® ASP.NET 7-41

• Cliquez sur le bouton Balise active, puis sur Modifier les éléments.
• Dans la boîte de dialogue Éditeur de collections ListItem, cliquez sur
Ajouter.
• À partir du volet Propriétés ListItem, dans la zone Texte, entrez USA,
puis cliquez sur OK.
• Enregistrez et fermez le fichier du contrôle utilisateur.
• Exécutez l'application Web en mode de débogage.
• Vérifiez la sortie des méthodes Page_Load, Page_Unload et
instantiateCustomerObject en créant un client et en affichant le volet Sortie
des fenêtres de variable du débogueur.

Remarque : Dans le volet Débogage de la fenêtre Sortie, la sortie des instructions de


débogage apparaît. Vous devrez peut-être faire défiler la fenêtre vers le haut pour voir
les instructions.

• Vérifiez la sortie du gestionnaire d'événements Click du contrôle


CustomerInsertButton en créant un client à l'aide des informations suivantes,
puis cliquez sur le bouton Insérer :
• First Name : Claus
• Last Name : Hansen
• Address : 4567, Main St.
• Zip Code : 98052
• City : Buffalo
• State : New York
• Web Address : http://www.cohowinery.com
• Fermez Windows Internet Explorer®.

Remarque : Dans le volet Débogage de la fenêtre Sortie, le message Customer has


been inserted in CustomerInsertButton_Click apparaît.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
7-42 Introduction au développement Web avec Microsoft® Visual Studio® 2010

f Tâche 4 : rechercher et corriger un bogue


• Exécutez l'application Web CustomerManagement pour tester ses
fonctionnalités.
• Créez un client en utilisant les informations suivantes :
• First Name : Claus
• Last Name : Hansen
• Address : 4567, Main St.
• Zip Code : 98052
• City : Buffalo
• State : New York
• Web Address : http://www.cohowinery.com

Remarque : par défaut, la valeur de la zone Limite de crédit est définie sur 0.

• Cliquez sur le bouton Insert.

Remarque : la valeur de la zone Limite de crédit est définie sur 50, ce qui est incorrect.

• Fermez Windows Internet Explorer®.


• Ajoutez un point d'arrêt dans la méthode du gestionnaire d'événements
Page_Load, dans la ligne de code appelant la méthode
instantiateCustomerObject.

instantiateCustomerObject();

• Exécutez l'application Web en mode de débogage.


• Dans la fenêtre Contoso Customer Management — Windows Internet Explorer,
dans le menu Customers, cliquez sur New.
• Exécutez un pas à pas détaillé dans la méthode instantiateCustomerObject.
• Effectuez un pas à pas principal dans la première ligne de code, puis
recherchez la publication dans la méthode instantiateCustomerObject.
• Ajoutez un espion à la propriété Text du contrôle CustomerCreditLimitTextBox.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Résolution des problèmes liés aux applications Web Microsoft® ASP.NET 7-43

• Continuez le débogage de l'application Web.


• Créez un client en utilisant les informations suivantes, puis cliquez sur le
bouton Insérer :
• First Name : Claus
• Last Name : Hansen
• Address : 4567, Main St.
• Zip Code : 98052
• City : Buffalo
• State : New York
• Web Address : http://www.cohowinery.com

Remarque : dans la fenêtre Espion 1, la valeur de la propriété Text


CustomerCreditLimitTextBox est définie sur 0.

• Effectuez un pas à pas principal dans l'appel de la méthode


instantiateCustomerObject.
• Effectuez un pas à pas principal dans l'appel de la méthode populateUI.

Remarque : dans la fenêtre Espion 1, la valeur de CustomerCreditLimitTextBox a été


remplacée par 50.

• Arrêtez le débogage du projet Web.


• Examinez le code dans la méthode populateUI qui assigne une valeur à la
propriété Text CustomerCreditLimitTextBox.

Remarque : la valeur 50 de la propriété CreditLimit n'est pas assignée ici.

• Réexécutez l'application Web en mode débogage pour examiner la classe


Customer.
• Créez un client et ignorez le premier point d'arrêt en poursuivant l'exécution
du programme.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
7-44 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Créez un client en utilisant les informations suivantes, puis cliquez sur le


bouton Insérer :
• First Name : Claus
• Last Name : Hansen
• Address : 4567, Main St.
• Zip Code : 98052
• City : Buffalo
• State : New York
• Web Address : http://www.cohowinery.com
• Exécutez un pas à pas détaillé dans la méthode instantiateCustomerObject.
• Effectuez un pas à pas principal dans la ligne de code, puis recherchez la
publication.
• Effectuez un pas à pas détaillé dans la méthode qui instancie l'objet Customer.

Remarque : le pas à pas détaillé dans l'instanciation de l'action d'objet Customer peut
prendre du temps.

• Effectuez un pas à pas principal dans chaque ligne de code figurant dans la
fenêtre de code Customer.vb, jusqu'à ce que vous atteigniez la ligne de code
suivante du constructeur qui initialise la propriété CreditLimit.

Me.CreditLimit = creditLimit

• Parcourez pas à pas l'assignation de la valeur transmise à la propriété


CreditLimit.
• Localisez l'étape qui permet d'ajouter la valeur supplémentaire 50 à la zone
Limite de crédit du membre customerCreditLimit privé.

Me.customerCreditLimit = value + 50

• Consultez les appels de fonction et de procédure actuellement dans la pile en


affichant la fenêtre Pile des appels.
• Arrêtez le débogage du projet Web.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Résolution des problèmes liés aux applications Web Microsoft® ASP.NET 7-45

• Supprimez la valeur supplémentaire de la propriété customerCreditLimit.

Me.customerCreditLimit = value

• Enregistrez et fermez le fichier de classe.


• Exécutez l'application Web pour vérifier la valeur Limite de crédit.
• Créez un client en utilisant les informations suivantes :
• First Name : Claus
• Last Name : Hansen
• Address : 4567, Main St.
• Zip Code : 98052
• City : Buffalo
• State : New York
• Web Address : http://www.cohowinery.com
• Cliquez sur le bouton Insert.

Remarque : la valeur de la zone Limite de crédit est toujours définie sur 0.

• Fermez Windows Internet Explorer®.

Résultats : au terme de cet exercice, vous aurez activé le débogage pour le projet
Web CustomerManagement, ajouté des instructions de sortie de débogage au
contrôle utilisateur et corrigé un bogue dans les fonctionnalités de l'application Web
CustomerManagement.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
7-46 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Exercice 2 : Traçage d'une application Web


Dans cet exercice, les tâches principales sont les suivantes :
1. Activer le traçage au niveau de l'application du projet Web CustomerManagement.
2. Implémenter le traçage de l'application.

f Tâche 1 : activer le traçage au niveau de l'application du projet Web


CustomerManagement
• Ajoutez un élément de trace au fichier web.config en tant que premier élément
dans system.web et définissez la valeur de l'attribut enabled sur true.

<trace enabled="true" />

• Enregistrez et fermez le fichier web.config.

f Tâche 2 : implémenter le traçage de l'application


• Exécutez l'application Web et affichez les détails de trace.
• Créez un client en utilisant les informations suivantes, puis cliquez sur le
bouton Insérer :
• First Name : Claus
• Last Name : Hansen
• Address : 4567, Main St.
• Zip Code : 98052
• City : Buffalo
• State : New York
• Web Address : http://www.cohowinery.com
• Affichez les détails de trace de l'application à l'aide de l'URL
http://localhost:1111/CustomerManagement/trace.axd dans le navigateur.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Résolution des problèmes liés aux applications Web Microsoft® ASP.NET 7-47

• Affichez les détails de la page Web InsertCustomer.aspx.


• Dans la fenêtre Windows Internet Explorer
http://localhost:1111/CustomerManagement/trace.axd, cliquez sur
l'option Afficher les détails de la page /InsertCustomer.aspx
correspondant au verbe GET.

Remarque : Faites défiler la fenêtre vers le bas pour voir toutes les sorties d'informations,
notamment l'arborescence du contrôle, l'état de session et d'application, la collection
Querystring et Form, et les variables serveur de la page Web InsertCustomer.aspx.
Vérifiez que vous pouvez voir la section Informations de traçage. Elle apporte des
informations sur la durée du chargement, de l'affichage et du déchargement du
formulaire Web.

• Fermez Windows Internet Explorer®.

f Tâche 3 : désactiver l'ordinateur virtuel et annuler les modifications


• Désactivez l'ordinateur virtuel 10557A-GEN-DEV.
• Annulez les modifications apportées à l'ordinateur virtuel 10557A-GEN-DEV.

Résultats : au terme de cet exercice, vous aurez activé et implémenté le traçage au


niveau de l'application pour l'application Web CustomerManagement.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
7-48 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Section 2 : Visual C#
Exercice 1 : Débogage d'une application Web
Dans cet exercice, les tâches principales sont les suivantes :

1. Ouvrir un site Web ASP.NET existant.

2. Activer le débogage du projet Web CustomerManagement.

3. Ajouter des instructions de sortie de débogage au contrôle utilisateur.

4. Rechercher et corriger le bogue.

f Tâche 1 : ouvrir un site Web ASP.NET existant


• Ouvrez une session sur 10557A-GEN-DEV en tant que Stagiaire avec le mot
de passe Pa$$w0rd.
• Ouvrez Microsoft Visual Studio 2010.
• Ouvrez la solution CustomerManagement située dans le dossier
D:\Labfiles\Starter\M7\CS.

f Tâche 2 : activer le débogage du projet Web CustomerManagement


• Ouvrez le fichier web.config du projet Web CustomerManagement.
• Définissez l'attribut debug de l'élément compilation sur la valeur true.

<compilation debug="true" targetFramework="4.0">

• Enregistrez et fermez le fichier web.config.

f Tâche 3 : ajouter des instructions de sortie de débogage au contrôle


utilisateur
• Ouvrez le contrôle utilisateur Customer.
• Importez l'espace de noms System.Diagnostics dans le contrôle utilisateur.

using System.Diagnostics;
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Résolution des problèmes liés aux applications Web Microsoft® ASP.NET 7-49

• Dans le gestionnaire d'événements Page_Load, lorsque la page est chargée en


réponse à une publication, envoyez le message « Page Postback detected in
Page_Load » aux écouteurs de trace.

Debug.WriteLine("Page Postback detected in Page_Load");

• Dans le gestionnaire d'événements Page_Load, lorsque la page n'est pas


chargée en réponse à une publication, envoyez le message « No Page Postback
detected in Page_Load » aux écouteurs de trace.

Debug.WriteLineIf(Not Page.IsPostBack, "No Page Postback detected


in Page_Load");

• À la fin du gestionnaire d'événements Page_Unload, envoyez le message


« Page has been unloaded » aux écouteurs de trace.

Debug.WriteLine("Page has been unloaded");

• À la fin de l'événement Click du contrôle CustomerInsertButton, envoyez le


message « Customer has been inserted in CustomerInsertButton_Click » aux
écouteurs de trace.

Debug.WriteLine("Customer has been inserted in


CustomerInsertButton_Click");

• À la fin de la méthode privée populateUI, envoyez le message « UI controls


have been populated » aux écouteurs de trace.

Debug.WriteLine("UI controls have been populated");

• À la fin de la méthode privée instantiateCustomerObject, envoyez le message


« Customer object has been instantiated » aux écouteurs de trace.

Debug.WriteLine("Customer object has been instantiated");

• Enregistrez le fichier de code du contrôle utilisateur.


• Ajoutez un élément par défaut au contrôle Country DropDownList.
• Dans la fenêtre Customer.ascx.cs, cliquez avec le bouton droit, puis
cliquez sur Concepteur de vues.
• Dans la fenêtre Customer.ascx, cliquez sur le contrôle
CustomerCountryDropDownList.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
7-50 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Cliquez sur le bouton Balise active, puis sur Modifier les éléments.
• Dans la boîte de dialogue Éditeur de collections ListItem, cliquez sur
Ajouter.
• À partir du volet Propriétés ListItem, dans la zone Texte, entrez USA,
puis cliquez sur OK.
• Enregistrez et fermez le fichier du contrôle utilisateur.
• Exécutez l'application Web en mode de débogage.
• Vérifiez la sortie des méthodes Page_Load, Page_Unload et
instantiateCustomerObject en créant un client et en affichant le volet Sortie
des fenêtres de variable du débogueur.

Remarque : Dans le volet Débogage de la fenêtre Sortie, la sortie des instructions de


débogage apparaît. Vous devrez peut-être faire défiler la fenêtre vers le haut pour voir
les instructions.

• Vérifiez la sortie du gestionnaire d'événements Click du contrôle


CustomerInsertButton en créant un client à l'aide des informations suivantes,
puis cliquez sur le bouton Insérer :
• First Name : Claus
• Last Name : Hansen
• Address : 4567, Main St.
• Zip Code : 98052
• City : Buffalo
• State : New York
• Web Address : http://www.cohowinery.com
• Fermez Windows Internet Explorer®.

Remarque : Dans le volet Débogage de la fenêtre Sortie, le message Customer has


been inserted in CustomerInsertButton_Click apparaît.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Résolution des problèmes liés aux applications Web Microsoft® ASP.NET 7-51

f Tâche 4 : rechercher et corriger un bogue


• Exécutez l'application Web CustomerManagement pour tester ses
fonctionnalités.
• Créez un client en utilisant les informations suivantes :
• First Name : Claus
• Last Name : Hansen
• Address : 4567, Main St.
• Zip Code : 98052
• City : Buffalo
• State : New York
• Web Address : http://www.cohowinery.com

Remarque : par défaut, la valeur de la zone Limite de crédit est définie sur 0.

• Cliquez sur le bouton Insert.

Remarque : la valeur de la zone Limite de crédit est définie sur 50, ce qui est incorrect.

• Fermez Windows Internet Explorer®.


• Ajoutez un point d'arrêt dans la méthode du gestionnaire d'événements
Page_Load, dans la ligne de code appelant la méthode
instantiateCustomerObject.

instantiateCustomerObject();

• Exécutez l'application Web en mode de débogage.


• Exécutez un pas à pas détaillé dans la méthode instantiateCustomerObject.
• Effectuez un pas à pas principal dans la première ligne de code, puis
recherchez la publication dans la méthode instantiateCustomerObject.
• Ajoutez un espion à la propriété Text du contrôle CustomerCreditLimitTextBox.
• Continuez le débogage de l'application Web.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
7-52 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Créez un client en utilisant les informations suivantes, puis cliquez sur le


bouton Insérer :
• First Name : Claus
• Last Name : Hansen
• Address : 4567, Main St.
• Zip Code : 98052
• City : Buffalo
• State : New York
• Web Address : http://www.cohowinery.com

Remarque : dans la fenêtre Espion 1, la valeur de la propriété Text


CustomerCreditLimitTextBox est définie sur 0.

• Effectuez un pas à pas principal dans l'appel de la méthode


instantiateCustomerObject.
• Effectuez un pas à pas principal dans l'appel de la méthode populateUI.

Remarque : dans la fenêtre Espion 1, la valeur de CustomerCreditLimitTextBox a été


remplacée par 50.

• Arrêtez le débogage du projet Web.


• Examinez le code dans la méthode populateUI qui assigne une valeur à la
propriété Text CustomerCreditLimitTextBox.

Remarque : la valeur 50 de la propriété CreditLimit n'est pas assignée ici.

• Réexécutez l'application Web en mode débogage pour examiner la classe


Customer.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Résolution des problèmes liés aux applications Web Microsoft® ASP.NET 7-53

• Créez un client et ignorez le premier point d'arrêt en poursuivant l'exécution


du programme. Créez un client en utilisant les informations suivantes, puis
cliquez sur le bouton Insérer :
• First Name : Claus
• Last Name : Hansen
• Address : 4567, Main St.
• Zip Code : 98052
• City : Buffalo
• State : New York
• Web Address : http://www.cohowinery.com
• Exécutez un pas à pas détaillé dans la méthode instantiateCustomerObject.
• Effectuez un pas à pas principal dans la ligne de code, puis recherchez la
publication.
• Effectuez un pas à pas détaillé dans la méthode qui instancie l'objet Customer.

Remarque : le pas à pas détaillé dans l'instanciation de l'action d'objet Customer peut
prendre du temps.

• Effectuez un pas à pas principal dans chaque ligne de code figurant dans la
fenêtre de code Customer.cs, jusqu'à ce que vous atteigniez la ligne de code
suivante du constructeur qui initialise la propriété CreditLimit.

this.CreditLimit = creditLimit;

• Parcourez pas à pas l'assignation de la valeur transmise à la propriété


CreditLimit.
• Localisez l'étape qui permet d'ajouter la valeur supplémentaire 50 à la zone
Credit Limit du membre customerCreditLimit privé.

this.customerCreditLimit = value + 50;

• Consultez les appels de fonction et de procédure actuellement dans la pile en


affichant la fenêtre Pile des appels.
• Arrêtez le débogage du projet Web.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
7-54 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Supprimez la valeur supplémentaire de la propriété customerCreditLimit.

this.customerCreditLimit = value;

• Enregistrez et fermez le fichier de classe.


• Exécutez l'application Web pour vérifier la valeur Limite de crédit.
• Créez un client en utilisant les informations suivantes, puis cliquez sur le
bouton Insérer :
• First Name : Claus
• Last Name : Hansen
• Address : 4567, Main St.
• Zip Code : 98052
• City : Buffalo
• State : New York
• Web Address : http://www.cohowinery.com

Remarque : la valeur de la zone Limite de crédit est toujours définie sur 0.

• Fermez Windows Internet Explorer®.

Résultats : au terme de cet exercice, vous aurez activé le débogage pour le projet
Web CustomerManagement, ajouté des instructions de sortie de débogage au
contrôle utilisateur et corrigé un bogue dans les fonctionnalités de l'application Web
CustomerManagement.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Résolution des problèmes liés aux applications Web Microsoft® ASP.NET 7-55

Exercice 2 : Traçage d'une application Web


Dans cet exercice, les tâches principales sont les suivantes :
1. Activer le traçage au niveau de l'application du projet Web CustomerManagement.
2. Implémenter le traçage de l'application.

f Tâche 1 : activer le traçage au niveau de l'application du projet Web


CustomerManagement
• Ajoutez un élément de trace au fichier web.config en tant que premier élément
dans system.web et définissez la valeur de l'attribut enabled sur true.

<trace enabled="true" />

• Enregistrez et fermez le fichier web.config.

f Tâche 2 : implémenter le traçage de l'application


• Exécutez l'application Web et affichez les détails de trace.
• Créez un client en utilisant les informations suivantes, puis cliquez sur le
bouton Insérer :
• First Name : Claus
• Last Name : Hansen
• Address : 4567, Main St.
• Zip Code : 98052
• City : Buffalo
• State : New York
• Web Address : http://www.cohowinery.com
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
7-56 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Affichez les détails de trace de l'application à l'aide de l'URL


http://localhost:1110/CustomerManagement/trace.axd dans le navigateur.
Affichez les détails de la page Web InsertCustomer.aspx.
• Dans la fenêtre Windows Internet Explorer
http://localhost:1110/CustomerManagement/trace.axd, cliquez sur
l'option Afficher les détails de la page /InsertCustomer.aspx
correspondant au verbe GET.

Remarque : Faites défiler la fenêtre vers le bas pour voir toutes les sorties d'informations,
notamment l'arborescence du contrôle, l'état de session et d'application, la collection
Querystring et Form, et les variables serveur de la page Web InsertCustomer.aspx.
Vérifiez que vous pouvez voir la section Informations de traçage. Elle apporte des
informations sur la durée du chargement, de l'affichage et du déchargement du
formulaire Web.

• Fermez Windows Internet Explorer®.

Résultats : au terme de cet exercice, vous aurez activé et implémenté le traçage au


niveau de l'application pour l'application Web CustomerManagement.

f Tâche 3 : désactiver l'ordinateur virtuel et annuler les modifications


Après avoir terminé l'atelier pratique, vous devez éteindre l'ordinateur virtuel
10557A-GEN-DEV et annuler les modifications.
• Désactivez l'ordinateur virtuel 10557A-GEN-DEV.
• Annulez les modifications apportées à l'ordinateur virtuel 10557A-GEN-DEV.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Résolution des problèm
mes liés aux applications Web
W Microsoft® ASP.NET 7-57

Récap
pitulatif de l'atelier pratiq
que

Parcou
urir les question
ns et les répon
nses
1. Quelles sont les étap
pes requises pourr activer le traçagge au niveau de laa page ?
2. Com ns un composant à l'aide
mment activerez--vous explicitemeent le traçage dan
du code ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
7-58 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Récapitu
ulatif du m
module et
e élémen
nts à retenir

Parcou
urir les question
ns et les répon
nses
1. Quelle est la différen
nce entre l'objet System.Diagnost
S tics.Trace et l'objjet
Sysstem.Diagnosticss.Debug ?
2. Quelle est la différen l page et le traçage au
nce entre le traçagge au niveau de la
niveeau de l'application ?
3. Com
mment activez-vo
ous le traçage au niveau
n de l'appliccation ?
4. Quels sont les typess d'erreurs que vo
ous devez gérer lo
ors du développeement de
voss applications ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Résolution des problèmes liés aux applications Web Microsoft® ASP.NET 7-59

Problèmes et scénarios réels


1. Dans une méthode, vous souhaitez écrire la valeur d'une variable dans les
écouteurs de trace, mais uniquement si une condition spécifique a la valeur
true. Quelle est la méthode d'implémentation la plus simple ?
Appelez la méthode Debug.WriteIf.
2. Sur un serveur de production, vous devez démarrer le traçage mais vous ne
souhaitez pas que les utilisateurs voient la sortie de trace sur chaque page
demandée. Comment procéderez-vous à l'implémentation de ce processus ?
Activez le traçage au niveau de l'application et utilisez la visionneuse de trace
trace.axd pour afficher la sortie de trace.

Meilleures pratiques
Indiquez quelques-unes des meilleures pratiques s'appliquant au contexte de vos
propres situations professionnelles.
• Les messages écrits dans les écouteurs de trace ne devant pas être inclus dans
une version finale de votre application doivent toujours être écrits à l'aide de
l'objet Debug.
• Le traçage doit toujours être désactivé dans une application Web avant le
déploiement dans un serveur de productio.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans une application Web Microsoft® ASP.NET 4.0 8-1

Module 8
Gestion des données dans une application Web
Microsoft® ASP.NET 4.0
Table des matières :
Leçon 1 : Vue d'ensemble d'ADO.NET 8-3
Leçon 2 : Connexion à une base de données 8-16
Leçon 3 : Gestion des données 8-30
Atelier pratique : Gestion des données dans une application
Web ASP.NET 4.0 8-50
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
8-2 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Vue d'en
nsemble du modu
ule

La technnologie Microsoftt® ADO.NET vouss permet de connecter des applicattions


basées sur
s Microsoft .NE ET Framework à des d sources de don nnées, telles que les
l bases
de donnnées Microsoft SQ QL Server® et les fichiers
f XML. ADO O.NET est conçu pour
fonction
nner dans des envvironnements décconnectés, tels qu u'Internet, et vous permet
d'intégreer l'accès aux don
nnées et la manipu ulation des données dans vos appllications
Web, avvec simplicité et fllexibilité. Vu la po
ortée d'Internet en
n tant que moyen n de
communication de donn nées, une technolo ogie telle que ADOO.NET met les do onnées à
disposittion et permet de les mettre à jour dans une architeccture déconnectéee.
Ce mod dule explique ce een quoi consiste ADO.NET
A et com
mment l'incorporeer dans
une appplication Web Microsoft ASP.NET à l'aide d'outils générés
g dans Miccrosoft
Visual Studio®
S 2010.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans
d une application Webb Microsoft® ASP.NET 4.0 8-3

Leçon 1
Vue d'en
nsemble d
d'ADO.NET

Comptee tenu de l'importtance du stockagge de données dan ns les applicationns


Web, voous devez connaîître les méthodes d'accès aux donn nées qu'ADO.NE ET
fournit pour
p les formulaires Web ASP.NE ET. ADO.NET con nstitue la partie de
d la
biblioth
hèque de classes dde base du .NET Framework qui vous v permet d'accéder
aux donnnées et de les manipuler. Avec AD DO.NET, vous po ouvez accéder au ux
données et les gérer danns les sources de données
d non relaationnelles et danns les
systèmees de base de donnnées relationnelss, tels que SQL Server 2008. Les deux
d
compossants d'ADO.NET T (fournisseurs dee données et DataSet) vous permeettent
de vouss connecter et d'accéder aux sourcces de données.
Cette leçon explique ce een quoi consiste ADO.NET,
A ainsi que son fonction
nnement.

Objecttifs de la leçon
Au term
me de cette leçon, vous serez à mêm
me d'effectuer less tâches suivantess :
• déccrire ADO.NET ;
• déccrire le modèle d'o
objet ADO.NET ;
• déccrire ADO.NET En
ntity Framework.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
8-4 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Présentation d'AD
DO.NET

Points clés
ADO.NE ET fait partie de lla bibliothèque de
d classes de basee du .NET Framew work et
représen nte un ensemble de composants permettant
p d'accééder aux donnéess et de
les mannipuler. Bien qu'A ADO.NET permettte d'accéder aux données contenu ues dans
des souurces de données non relationnellees, son objectif prremier est l'accès et la
gestion des données stocckées dans des syystèmes de base de d données relatiionnels,
tels quee SQL Server 2008.

ADO.N
NET
ADO.NE ment conçu pour les connexions liiées aux données dans un
ET est spécifiquem
environnement déconneccté. C'est pourquo oi ADO.NET se réévèle un bon choiix pour
les applications Web basées sur Internet. ADO.NET
A utilise le format XML poour les
transmissions de donnéees entre la base dee données et votree application Web
b.
ADO.NE de deux couches : une couche décconnectée et une autre
ET est composé d
connecttée.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans une application Web Microsoft® ASP.NET 4.0 8-5

Couche déconnectée
La couche déconnectée consiste en plusieurs classes de stockage des données et
des relations. La classe DataSet est la classe principale représentant un cache de
données en mémoire. La classe DataSet contient une collection d'un ou de
plusieurs objets DataTable composés de lignes et de colonnes de données. Elle
contient également les informations de clé primaire, de clé étrangère, de contrainte
et de relation relatives aux données contenues dans les objets DataTable. Vous
pouvez considérer la classe DataSet comme une représentation de la base de
données en mémoire.

Couche connectée
La couche connectée gère le trafic de données vers et à partir de la source de
données. De plus, elle est propre à la source de données, telle que SQL Server ou
un fichier XML. La couche connectée est également appelée fournisseur de données.
ADO.NET est fourni avec plusieurs fournisseurs de données prêts à l'emploi,
notamment :
• Fournisseur de données .NET Framework SQL Server, pour l'accès aux bases
de données SQL Server 7.0 et versions ultérieures.
• Fournisseur de données .NET Framework OLE DB, pour l'accès à toute source
de données OLE DB pour laquelle vous disposez d'un fournisseur OLE DB.
• Fournisseur de données .NET Framework ODBC, pour l'accès à toute source
de données ODBC pour laquelle vous disposez d'un pilote ODBC.

Plusieurs fournisseurs tiers, tels qu'IBM et Oracle, ont créé des implémentations de
fournisseurs de données .NET Framework. La plupart des sources de données des
principaux fournisseurs facilitent l'accès aux données via ADO.NET.

Question : quel est l'usage principal d'ADO.NET ?


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
8-6 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Modè
èle d'objet A
ADO.NET

Points clés
Le mod dèle d'objet ADO.N NET fournit une infrastructure vo ous permettant d''accéder
aux donnnées de différenntes sources de do onnées. Le modèlle d'objet ADO.N NET se
composse de deux couch hes : la couche déconnectée, générralement constitu uée de la
classe DataSet
D et des claasses associées, ett la couche conneectée, également appelée
le fourn
nisseur de donnéees.

Couche déconnectée
La coucche déconnectée iinclut les classes DataTable, Data
aRow, DataColum mn,
Constraaint, DataRelatioon et DataView. Elle
E ne dépend pass d'une source dee données
et perm
met de gérer les doonnées en mémoiire. Par conséqueent, elle peut être utilisée
avec plu
usieurs sources dee données ou donnnées XML, ou peu
ut servir à gérer less données
locales de
d l'application. VVous pouvez également connecterr la couche décon nnectée à
une souurce de données à l'aide de la coucche connectée.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans une application Web Microsoft® ASP.NET 4.0 8-7

La couche connectée est composée de types communs destinés au stockage des


données et des relations, figurant dans l'espace de noms System.Data. Ces types
communs sont répertoriés dans le tableau suivant.

Type Description

Constraint Représente une contrainte qui peut être appliquée à un ou


plusieurs objets DataColumn. Une contrainte représente une
règle permettant de maintenir l'intégrité des données dans
une table. La classe de base abstraite Constraint possède deux
classes dérivées utilisées pour les clés primaires et/ou les valeurs
de colonne uniques à travers la classe UniqueConstraint. La
classe ForeignKeyConstraint détermine si les valeurs contenues
dans les tables associées sont également supprimées, définies
sur null, définies sur les valeurs par défaut ou si aucune action
ne doit être exécutée.

DataColumn Représente le schéma d'une colonne unique dans un DataTable.


Plusieurs objets DataColumn sont utilisés pour spécifier la
structure ou le schéma d'un DataTable.

DataRelation Représente une relation parent/enfant entre deux objets


DataTable. Un objet DataRelation est lié à un nombre égal
d'objets DataColumn dans deux objets DataTable différents.
L'objet DataRelation permet de naviguer entre les tables de
données associées.

DataRow Représente une ligne de données dans un objet DataTable.

DataSet Il s'agit de l'objet conteneur général représentant une base de


données en mémoire ; il est composé d'un ou de plusieurs objets
DataTable et, éventuellement, d'objets DataRelation. Cette
classe est sérialisable et peut être transportée sur la connexion.

DataTable Représente une table de données en mémoire. La structure


des données est composée d'un ou de plusieurs objets
DataColumn et les données sont enregistrées dans des objets
DataRow. Cette classe est sérialisable et peut être transportée
sur la connexion.

DataTableReader Obtient le contenu d'un ou de plusieurs des objets DataTable


sous forme de jeux de résultats avant uniquement et en lecture
seule.

DataView Représente une vue personnalisée d'un DataTable, utilisée


pour le tri, le filtre, la recherche, l'édition et la navigation.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
8-8 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Couche connectée
La couche connectée ADO.NET établit le lien entre la source de données et la
couche déconnectée, qui est un objet DataSet et/ou DataTable. Les types de
bases communs figurent dans l'espace de noms System.Data.Common.
La couche connectée inclut par exemple les classes DataAdapter, Connection,
Command et DataReader. Les fournisseurs de données .NET Framework sont
conçus pour la manipulation des données et pour un accès aux données rapide,
avant uniquement et en lecture seule.
• L'objet Connection fournit la connectivité à une source de données.
• L'objet Command permet d'accéder aux commandes de base de données,
utilisées pour renvoyer et modifier les données, exécuter des procédures
stockées, et envoyer ou extraire des informations relatives aux paramètres.
• La classe DataReader fournit un flux de données hautes performances à partir
de la source de données.
• La classe DataAdapter établit la passerelle entre l'objet DataSet et la source de
données. La classe DataAdapter utilise les objets Command pour exécuter
des commandes SQL sur la source de données, afin de charger l'objet DataSet
avec les données et de rapprocher les modifications apportées aux données de
l'objet DataSet dans la source de données.

Le tableau suivant répertorie les types de base communs fournis par la couche
connectée.
Nom du type Description du type
DbCommand Représente une instruction SQL ou une procédure stockée à
exécuter pour une source de données. Ce type est généralement
divisé en quatre objets de commande différents lors de la gestion
des données : un pour la sélection, un deuxième pour l'insertion,
un troisième pour la mise à jour et un quatrième pour la
suppression des données.

DbConnection Représente la connexion réelle à une source de données et


établit la connexion à l'aide d'une chaîne de connexion.

DbDataAdapter Représente une connexion de base de données et un ensemble


de commandes SQL permettant de remplir l'objet DataSet
et/ou DataTable, et de mettre à jour la source de données.
Ce type représente la passerelle entre le côté client et le côté
serveur. Il utilise un objet de connexion et des objets de
commande pour exécuter ses opérations.

DbDataReader Lit un flux de lignes avant uniquement et en lecture seule à


partir d'une source de données.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans une application Web Microsoft® ASP.NET 4.0 8-9

Les types répertoriés dans le tableau précédent sont tous des types de base
abstraits qui doivent être hérités. Par conséquent, vous devez utiliser les types
suivants pour les implémentations de source de données spécifiques :
• Avec le fournisseur de données .NET Framework SQL Server, utilisez les
classes SqlDataAdapter, SqlDataReader, SqlCommand et SqlConnection,
figurant toutes dans l'espace de noms System.Data.SqlClient.
• Avec le fournisseur de données .NET Framework OLE DB, utilisez les classes
OleDbDataAdapter, OleDbDataReader, OleDbCommand et OleDbConnection,
figurant toutes dans l'espace de noms System.Data.OleDb.
• Avec le fournisseur de données .NET Framework ODBC, utilisez les classes
OdbcDataAdapter, OdbcDataReader, OdbcCommand et OdbcConnection,
figurant toutes dans l'espace de noms System.Data.Odbc.
• Avec le fournisseur de données .NET Oracle, utilisez les classes OracleDataAdapter,
OracleDataReader, OracleCommand et OracleConnection, figurant toutes
dans l'espace de noms System.Data.OracleClient. Le fournisseur de données
.NET Oracle vous permet de vous connecter à une base de données Oracle
version 8.1.7 ou ultérieure.

Remarque : vous ne pouvez pas mélanger les types dans la couche connectée. Tous les
types utilisés pour la gestion des données avec une source de données unique doivent
provenir du même fournisseur de données .NET.

Question : comment utiliser un objet DataSet pour remplir les données ?


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
8-10 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Vue d'ensemble
d d
d'ADO.NET Entity
E Framew
work

Points clés
Entity Framework
F représsente un ensemb
ble de technologiees dans ADO.NET T qui
prend ene charge le dévelloppement d'app plications logiciellles orientées don
nnées,
et fait partie de la platefo
orme de donnéess Microsoft.
Les arch hitectes et développpeurs d'applicatiions orientées données se démèneent afin
d'atteinddre deux objectifs très différents : ilss doivent modéliser les entités, les relations
r
et la loggique des problèm mes d'entreprise à résoudre, et ils doivent égalementt utiliser
les moteeurs de données p permettant de sto ocker et d'extraire les données. Les données
peuventt s'étendre sur plu usieurs systèmes ded stockage, compo ortant chacun son n propre
protocole. Même les applications utilisant un u seul système de stockage doiven nt trouver
l'équilibbre entre les exigences du système de stockage et l'ex xigence imposantt d'écrire
un codee d'application effificace et facile à géérer.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans une application Web Microsoft® ASP.NET 4.0 8-11

Entity Framework vous permet d'utiliser les données sous forme de propriétés et
d'objets propres au domaine (par exemple, les clients et leur adresse) sans vous
soucier des tables et colonnes de la base de données sous-jacente dans lesquelles les
données sont stockées. Ceci est possible lorsque vous élevez le niveau d'abstraction
applicable lors de l'utilisation des données, et si vous réduisez le code requis pour
créer et maintenir les applications orientées données. Dans la mesure où Entity
Framework est un composant du .NET Framework, les applications d'Entity
Framework peuvent être exécutées sur n'importe quel ordinateur, à condition que
le .NET Framework 4 y soit installé.

Modèles conceptuels
Depuis toujours, le modèle de conception standard pour la modélisation des
données consiste à diviser le modèle de données en trois parties : un modèle
conceptuel, un modèle logique et un modèle physique. Le modèle conceptuel
définit les entités et relations du système modélisé. Le modèle logique d'une base
de données relationnelle normalise les entités et relations dans des tables avec des
contraintes de clé étrangère. Le modèle physique s'intéresse aux fonctionnalités d'un
moteur de données particulier en indiquant les détails de stockage, tels que le
partitionnement et l'indexation.
Le modèle physique est affiné par les administrateurs de base de données afin
d'améliorer les performances, mais les programmeurs écrivant le code de
l'application restent dans le cadre du modèle logique en écrivant des requêtes
SQL et en appelant des procédures stockées. Vous pouvez vous servir des modèles
conceptuels comme d'outils pour capturer et communiquer les besoins d'une
application. En outre, ces modèles conceptuels sont souvent utilisés en tant que
diagrammes inertes étudiés et analysés au début d'un projet, puis abandonnés.
Beaucoup d'équipes de développement sautent l'étape de création d'un modèle
conceptuel et commencent directement par indiquer les tables, les colonnes et les
clés d'une base de données relationnelle.
Entity Framework donne vie aux modèles conceptuels en vous permettant
d'interroger les entités et relations dans le modèle conceptuel, tout en laissant
Entity Framework traduire ces opérations en commandes propres à la source
de données. Cela libère les applications des dépendances codées de manière
irréversible à une source de données particulière. Le modèle conceptuel, le modèle
de stockage et le mappage entre les deux sont exprimés dans une spécification
externe, appelée Entity Data Model (EDM). Vous pouvez modifier le modèle de
stockage et les mappages selon vos besoins, sans devoir apporter de modifications
au modèle conceptuel, aux classes de données ou au code d'application. Les
modèles de stockage étant propres au fournisseur, vous pouvez utiliser un modèle
conceptuel cohérent dans différentes sources de données.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
8-12 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Un EDM est défini par les trois fichiers de modèle et de mappage suivants, portant
les extensions de nom de fichier correspondantes :
• Fichier du langage de définition du schéma conceptuel (.csdl). Définit le
modèle conceptuel.
• Fichier du langage de définition du schéma de stockage (.ssdl). Définit le
modèle de stockage, également appelé modèle logique.
• Fichier du langage de spécification du mappage (.msl). Définit le mappage
entre le modèle de stockage et le modèle conceptuel.

Entity Framework utilise ces fichiers de modèles et de mappages au format XML


pour transformer, créer, lire, mettre à jour et supprimer les opérations effectuées
sur les entités et les relations dans le modèle conceptuel pour des opérations
équivalentes dans la source de données. Par ailleurs, l'EDM prend en charge le
mappage des entités du modèle conceptuel avec les procédures stockées de la
source de données.

Mappage d'objets avec des données


La programmation orientée objet rend difficile l'interaction avec les systèmes de
stockage de données. En général, l'organisation des classes ressemble énormément
à celle des tables de bases de données relationnelles, sans être absolument identique.
Les différentes tables normalisées correspondent souvent à une même classe et les
relations entre les classes sont représentées différemment des relations entre les
tables. Par exemple, pour représenter le client d'une commande, la classe Order
utilise une propriété contenant une référence à une instance de la classe Customer,
mais la base de données présente une ligne de la table Order qui contient une
colonne de clé étrangère ou un ensemble de colonnes avec une valeur correspondant
à celle d'une clé primaire dans la table Customer. La classe Customer dispose
peut-être d'une propriété nommée Orders, contenant une collection d'instances de
la classe Order, mais la table Customer de la base de données ne contient aucune
colonne comparable.
Il existe des solutions pour combler cette faille, souvent appelée défaut d'adaptation
d'impédance ; il suffit de mapper les classes et propriétés orientées objet avec les
tables et colonnes relationnelles. Au lieu d'adopter cette approche traditionnelle,
Entity Framework mappe les tables relationnelles, les colonnes et les contraintes
de clé étrangère des modèles logiques avec les entités et relations des modèles
conceptuels. Cela rend plus flexibles la définition des objets et l'optimisation du
modèle logique.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans une application Web Microsoft® ASP.NET 4.0 8-13

Les outils EDM génèrent des classes de données extensibles basées sur le modèle
conceptuel. Il s'agit de classes partielles que le développeur peut étendre en
ajoutant des membres. Les classes générées pour un modèle conceptuel particulier
dérivent des classes de base qui fournissent les services d'objet pour matérialiser
les entités en tant qu'objets, et pour suivre et enregistrer les modifications. Ces
classes vous permettent d'utiliser les entités et relations en tant qu'objets liés par
des propriétés de navigation.

Accès aux données d'entité et modification


Entity Framework permet aux applications d'accéder aux données représentées
sous forme d'entités et de relations dans le modèle conceptuel, et de les modifier.
Les services d'objet utilisent EDM pour traduire les requêtes d'objet sur les types
d'entités représentés dans le modèle conceptuel en requêtes propres à la source de
données. Les résultats de requête sont matérialisés en objets gérés par les services
d'objet.

Contrôle EntityDataSource
Le contrôle EntityDataSource prend en charge les scénarios de liaison de données
basés sur EDM. La spécification EDM représente les données sous forme d'ensembles
d'entités et de relations. Entity Framework utilise EDM dans le mappage
objet-relationnel, ainsi que dans d'autres scénarios tels que les services de données
ADO.NET. Pour les utilisateurs habitués au modèle de conception des contrôles
de liaison de données ASP.NET, la surface de programmation du contrôle
EntityDataSource paraîtra semblable à celle des autres contrôles de source de
données.
Le contrôle EntityDataSource gère les opérations de lecture, de création, de mise
à jour et de suppression effectuées sur une source de données pour le compte de
contrôles liés aux données sur la page. EntityDataSource utilise des grilles
modifiables, des formulaires avec des fonctions de tri et de filtre contrôlées par
l'utilisateur, des listes déroulantes à liaison bidirectionnelle et des pages maîtres/
détails. Le contrôle EntityDataSource peut obtenir les valeurs de paramètre de
requête à partir des contrôles de page, des paramètres de requête ajoutés à l'URI de
la page, des cookies et d'autres objets de paramètre ASP.NET.

Outils EDM
Les outils EDM sont conçus pour vous aider à générer des applications Entity
Framework. Ils vous permettent de créer un modèle conceptuel à partir d'une base
de données existante, puis de le visualiser graphiquement et de le modifier. Vous
pouvez également créer un modèle conceptuel graphiquement pour commencer,
puis générer une base de données prenant en charge votre modèle. Dans les deux
cas, vous pouvez mettre à jour votre modèle automatiquement lorsque la base de
données sous-jacente est modifiée, et générer le code de couche objet de votre
application. La génération de la base de données et du code de couche objet est
personnalisable.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
8-14 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Outre l'exécution Entity Framework, le .NET Framework 4 inclut EDM Generator.


Cet utilitaire de ligne de commande permet de se connecter à une source de
données à l'aide d'un fournisseur de données .NET Framework propre à la source,
et de générer le modèle conceptuel (.csdl), le modèle de stockage (.ssdl) et les
fichiers de mappage (.msl) utilisés par Entity Framework. EDM Generator peut
valider un modèle existant et générer un fichier de code Microsoft Visual Basic® ou
Microsoft Visual C#® contenant les classes d'objet générées à partir d'un fichier de
modèle conceptuel (.csdl). Il peut également générer un fichier de code Visual
Basic ou Visual C# contenant les vues prégénérées d'un modèle existant.

Composants Data Platform


Dans .NET Framework 4, ADO.NET Entity Framework fournit les composants
Data Platform répertoriés dans le tableau suivant.

Composant Description

EDM Spécification de conception qui définit les données de


l'application en tant qu'ensembles d'entités et de relations.
Les données dans ce modèle prennent en charge le mappage
objet-relationnel et la programmabilité des données dans les
limites de l'application. Les types de données et relations EDM
sont définis dans un modèle conceptuel. Il s'agit d'un schéma
XML écrit dans le langage de définition du schéma conceptuel
(CSDL). Le modèle conceptuel vous permet de générer des
classes programmables représentant les données de l'application.
Vous pouvez étendre ces objets, si nécessaire, pour répondre
aux différents besoins de l'application.

Object Services Permettent aux programmeurs d'interagir avec le modèle


conceptuel via un ensemble de classes Common Language
Runtime (CLR). Ces classes peuvent être générées
automatiquement à partir du modèle conceptuel ou
développées indépendamment afin de refléter la structure du
modèle conceptuel. Les services d'objet fournissent également
la prise en charge de l'infrastructure pour Entity Framework, y
compris les services tels que la gestion des états, le suivi des
modifications, la résolution des identités, le chargement des
relations et la navigation parmi celles-ci, la propagation des
changements d'objet aux modifications de base de données
et la prise en charge de la génération de requêtes pour
Entity SQL.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans une application Web Microsoft® ASP.NET 4.0 8-15

(suite)

Composant Description

LINQ to Entities Implémentation LINQ (Language Integrated Query) qui vous


permet de créer des requêtes fortement typées sur le contexte
d'objet Entity Framework à l'aide d'expressions LINQ et
d'opérateurs de requête standard LINQ. LINQ to Entities
permet aux développeurs de travailler à partir d'un modèle
conceptuel avec un mappage objet-relationnel très flexible
à travers SQL Server et les bases de données tierces.

Entity SQL Langage de requête textuel conçu pour l'interaction avec un


EDM. Entity SQL est un dialecte SQL contenant les constructions
de requête en matière de concepts de modélisation de niveau
supérieur, tels que l'héritage, les types complexes et les relations
explicites. Vous pouvez également utiliser Entity SQL directement
avec les services d'objet.

EntityClient Fournisseur de données .NET Framework vous permettant


d'interagir avec un EDM. EntityClient suit le modèle du
fournisseur de données .NET Framework pour l'exposition
d'objets EntityConnection et EntityCommand renvoyant
un objet EntityDataReader. EntityClient utilise le langage
Entity SQL, ce qui permet aux fournisseurs de données propres
au stockage d'effectuer un mappage flexible.

EDM Tools Entity Framework fournit des outils de ligne de commande,


des assistants et des concepteurs afin de faciliter la génération
d'applications EDM. Le contrôle EntityDataSource prend en
charge les scénarios de liaison de données basés sur EDM. La
surface de programmation du contrôle EntityDataSource est
semblable aux autres contrôles de source de données dans
Microsoft Visual Studio®.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
8-16 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Leçon 2
Connexio
on à une base de données

ADO.NE ET vous permet d de connecter les données contenu ues dans une source de
données (une base de do onnées, par exem
mple) aux objets et e contrôles de vo os
formulaaires Web. Vous p pouvez établir unne connexion à un ne source de don nnées à
l'aide dee l'environnemennt de développemment intégré (IDE) de Visual Studio 2010.
Vous po ouvez également utiliser les objetss DataAdapter ett DataReader pou ur établir
une com mmunication de d données entre le client et le serveu
ur. La sélection, l'insertion,
l
la mise à jour et la supprression de donnéées font partie dess tâches courantees que
vous po ouvez exécuter paar programmation n à l'aide d'ADO.NET.
Cette leçon explique com
mment traiter les données en proggrammation à l'aiide
d'ADO.N NET et commentt établir une connnexion afin d'accééder aux donnéess
stockées dans une base d
de données SQL Server.

Objecttifs de la leçon
Au term
me de cette leçon, vous serez à mêm
me d'effectuer less tâches suivantess :
• créeer une connexion
n à une source dee données ;
• actiiver le transport d
de données entree les clients et les serveurs.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans
d une application Webb Microsoft® ASP.NET 4.0 8-17

Création d'une co
onnexion

Points clés
L'IDE de
d Visual Studio 22010 vous permet d'établir une co onnexion à une so
ource
de donnnées en toute sim
mplicité, puis de vérifier
v la connexiion au moment de
d la
concepttion. Vous pouveez également créeer une connexion par programmattion.

Créatio
on d'une conneexion à l'aide de
d l'Explorateurr de serveurs
L'Exploorateur de serveurrs, intégré à l'IDEE de Visual Studio o 2010, vous perm met de
vous connecter aux sourrces de données, de créer des objeets de base de données,
d'explorrer les propriétéss des objets existaants et de prévisu
ualiser les donnéees.
Lorsquee vous explorez le serveur d'une source
s de donnéees, la connexion este
ouverte ; elle le reste tan
nt que la fenêtre a le focus. Cela peeut nuire à la disp
ponibilité,
particullièrement si le serrveur est distant et
e fortement utilisé.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
8-18 Introduction au développement Web avec Microsoft® Visual Studio® 2010

f Pour vous connecter à une base de données SQL Server


1. Dans l'Explorateur de serveurs, cliquez avec le bouton droit sur Connexions
de données, puis cliquez sur Ajouter une connexion. La boîte de dialogue
Ajouter une connexion s'affiche.
2. Dans la boîte de dialogue Ajouter une connexion.
3. Dans la zone Source de données, vérifiez que le fournisseur de données et le
type de source de données corrects sont sélectionnés.
• Dans la boîte de dialogue Ajouter une connexion, lorsque vous cliquez
sur Modifier, une boîte de dialogue Modifier la source de données
apparaît et vous permet de choisir le type de source de données.
4. Dans la zone Nom du serveur, tapez ou sélectionnez le nom du serveur de
source de données.
5. Dans la boîte de dialogue Ajouter une connexion, sous le volet Connexion
au serveur, cliquez sur Utiliser l'authentification Windows ou sur Utiliser
l'authentification SQL Server. Si vous sélectionnez l'authentification SQL
Server, indiquez vos informations d'identification.
6. Sous Connexion à une base de données, dans la liste Sélectionner ou entrer
un nom de base de données, sélectionnez une base de données, puis cliquez
sur OK.

Une fois que vous avez créé une connexion, l'Explorateur de serveurs affiche
la connexion dans Connexions de données. Dans l'Explorateur de serveurs,
développez la connexion, puis le dossier Tables pour afficher les tables dans la
connexion de base de données.
La connexion créée à l'aide de l'Explorateur de serveurs est utile si vous souhaitez
concevoir de nouvelles tables, ou modifier des tables existantes ou des procédures
stockées. La connexion créée permet également de déplacer des objets de table en
les faisant glisser directement vers un formulaire Web ; un contrôle GridView est
alors ajouté au formulaire avec un contrôle de source de données.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans une application Web Microsoft® ASP.NET 4.0 8-19

Création d'une connexion par programmation


Si vous souhaitez que votre connexion soit immédiatement disponible à partir
de votre code, vous pouvez créer un objet de connexion par programmation.
Pour créer une connexion à SQL Server 7.0 ou version ultérieure, vous devez
au préalable importer l'espace de noms System.Data.SqlClient, comme suit.

[Visual Basic]
Imports System.Data.SqlClient

[Visual C#]
using System.Data.SqlClient;

Une fois l'espace de noms importé, vous pouvez créer l'objet de connexion comme
suit.

[Visual Basic]
Dim orderConnection As New SqlConnection()

[Visual C#]
SqlConnection orderConnection = new SqlConnection();

Une fois l'objet de connexion créé, vous devez définir la chaîne de connexion.
Cette dernière dirige l'objet de connexion vers le serveur et la base de données
auxquels se connecter, comme indiqué dans les exemples de code suivants.

[Visual Basic]
orderConnection.ConnectionString =
"Data Source=DatabaseServer;Initial
Catalog=OrderDatabase;Integrated Security=True"

[Visual C#]
orderConnection.ConnectionString =
"Data Source=DatabaseServer;Initial
Catalog=OrderDatabase;Integrated Security=True";

Notez qu'une source de données ou un serveur, un catalogue initial ou une base


de données, et les informations d'identification permettant d'accéder à la base de
données ont tous été indiqués.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
8-20 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Contactez votre administrateur de base de données pour obtenir ces détails. Si vous
connectez à SQL Server, la sécurité intégrée est souvent utilisée selon les spécifications.
Toutefois, ce n'est pas toujours le cas. C'est pourquoi vous devrez peut-être indiquer
les informations d'identification à l'aide des attributs User ID et Password.

Conseil : si vous avez créé une connexion à une base de données à l'aide de l'Explorateur
de serveurs, vous pouvez copier la chaîne de connexion et l'utiliser directement dans le
code. Ouvrez l'Explorateur de solutions, puis cliquez sur la connexion de données.
Ensuite, appuyez sur la touche F4 pour ouvrir la fenêtre Propriétés, si elle n'est pas déjà
ouverte, puis sélectionnez et copiez le texte de la propriété Chaîne de connexion. Enfin,
collez le texte copié dans votre code.

Une fois l'objet de connexion initialisé et instancié, il doit être ouvert avant toute
utilisation par les classes DataAdapter et/ou DataReader. Pour ce faire, procédez
comme suit.

[Visual Basic]
orderConnection.Open()

[Visual C#]
orderConnection.Open();

Remarque : L'objet de connexion utilisant une ressource non gérée, le garbage


collection ne s'exécute pas automatiquement. Vous devez donc fermer ou supprimer
l'objet de connexion après l'avoir utilisé. Sinon, la connexion au serveur restera ouverte,
vous gâcherez des ressources serveur précieuses et dégraderez probablement les
performances du serveur. Vous risquez même d'empêcher les autres utilisateurs
d'accéder au serveur.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans une application Web Microsoft® ASP.NET 4.0 8-21

Lorsque vous avez terminé d'utiliser votre connexion, vous devez la fermer ou la
supprimer, comme suit.

[Visual Basic]
' Close connection
orderConnection.Close()
' Dispose of connection
orderConnection.Dispose()

[Visual C#]
// Close connection
orderConnection.Close();
// Dispose of connection
orderConnection.Dispose();

Vous devez fermer ou supprimer la connexion, car cela supprimera finalement les
ressources gérées et non gérées. Cependant, vous ne serez pas pénalisé par l'appel
de ces deux méthodes et celles-ci peuvent même rendre votre code plus simple à
lire du point de vue de la maintenance. Il s'agit souvent d'une préférence personnelle
ou d'un choix guidé par les conventions d'encodage à votre entreprise.

Une autre méthode garantissant la suppression d'un objet de connexion est d'inclure
cet objet dans une instruction Using/using, comme dans les exemples suivants.

[Visual Basic]
Using orderConnection As New SqlConnection()
orderConnection.ConnectionString = _
"Data Source=DatabaseServer;Initial
Catalog=OrderDatabase;Integrated Security=True"
orderConnection.Open()
...
orderConnection.Close()
End Using
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
8-22 Introduction au développement Web avec Microsoft® Visual Studio® 2010

[Visual C#]
using (SqlConnection orderConnection = new SqlConnection())
{
orderConnection.ConnectionString =
"Data Source=DatabaseServer;Initial
Catalog=OrderDatabase;Integrated Security=True";
orderConnection.Open();
...
orderConnection.Close();
}

Lorsque vous utilisez l'instruction Using/using, il n'est pas nécessaire d'appeler la


méthode Close explicitement, car la méthode Dispose implicitement appelée
lorsque vous incluez l'instanciation de l'objet dans une instruction Using/using
s'en charge. Toutefois, votre code est ainsi plus simple à lire.

Question : comment procéder pour modifier le type de source de données d'une


connexion ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans
d une application Webb Microsoft® ASP.NET 4.0 8-23

Transport facile des données entre les clie


ents et les se
erveurs

Points clés
Une foiss que vous avez ccréé une connexion à la base de données,
d vous devvez
disposeer d'un objet pourr faciliter le transp
port et la synchroonisation des donnnées
entre le client et le serveu
ur. L'objet DataAAdapter s'avère allors utile. Cependdant, si
vous souhaitez uniquem ment extraire les données
d de la basse de données et ne pas
les mannipuler de quelqu ue manière que cee soit, optez pourr l'objet DataRead der.

DataAd
dapter
L'objet DataAdapter
D utillise l'objet Conneection pour se co
onnecter à une baase
de donn nées, ainsi que less objets de commmande pour émetttre les command des
de gestiion des données.
L'objet DataAdapter
D posssède quatre prop
priétés liées à l'ob
bjet de command
de :
• SeleectCommand. Ém T pour extraire les
met une instructiion SQL SELECT
don
nnées d'une sourcce de données.
• Upd dateCommand. Émet une instrucction SQL UPDA ATE pour mettre à jour
les données dans la source de donnéées chaque fois qu
ue des modificatiions sont
appportées au client.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
8-24 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• InsertCommand. Émet une instruction SQL INSERT pour insérer de


nouvelles données sur le serveur, chaque fois que des données sont créées
sur le client.
• DeleteCommand. Émet une instruction SQL DELETE pour supprimer des
données du serveur, chaque fois que des données sont supprimées sur le
client.

Parmi ces quatre propriétés, seule SelectCommand doit être définie. Toutefois, si
vous tentez de mettre à jour, d'insérer ou de supprimer des données, et que vous
n'avez pas défini la propriété correspondante, une exception est générée. Chacune
de ces propriétés peut disposer d'instructions SQL ou constituer un appel de
procédures stockées dans la base de données. Les procédures stockées vous
permettent de réduire la quantité de code requise pour exécuter les opérations
SELECT, INSERT, UPDATE et DELETE. Vous pouvez également obtenir une
couche de sécurité supplémentaire, car le code SQL réel permettant d'exécuter
l'action se trouve sur le serveur. L'autorisation d'exécution peut être limitée aux
procédures stockées.

Création d'un objet DataAdapter par programmation


Si vous souhaitez que votre adaptateur de données soit immédiatement disponible
à partir de votre code, vous pouvez créer un objet DataAdapter par programmation.
Pour créer un objet DataAdapter fonctionnant avec une base de données SQL Server
version 7.0 ou ultérieure, vous devez au préalable importer l'espace de noms
System.Data.SqlClient. Ensuite, vous devez créer l'objet SqlDataAdapter comme
indiqué dans les exemples de code suivant.

Remarque : les exemples présentés dans le reste de cette rubrique ont été créés avec
l'application de l'exercice d'atelier pratique, afin de vous montrer comment créer l'objet
DataAdapter manuellement pour qu'il s'adapte à une solution concrète générale.

[Visual Basic]
' Declare and instantiate data adapter
Dim ordersDataAdapter As New SqlDataAdapter()

[Visual C#]
// Declare and instantiate data adapter
SqlDataAdapter ordersDataAdapter = new SqlDataAdapter();
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans une application Web Microsoft® ASP.NET 4.0 8-25

Lorsque vous instanciez l'adaptateur de données, vous pouvez définir les


propriétés de commande comme suit.

[Visual Basic]
' Declare and instantiate command objects
Dim selectCommand As New SqlCommand("SELECT * FROM Orders",
orderConnection)
Dim deleteCommand As New SqlCommand("DELETE FROM Orders WHERE ID=@ID",
orderConnection)
Dim insertCommand As New SqlCommand("INSERT INTO Orders (CustomerID,
InvoiceDate, CreatedDate, CreatedBy) VALUES(@CustomerID, @InvoiceDate,
@CreatedDate, @CreatedBy)", orderConnection)
Dim updateCommand As New SqlCommand("UPDATE Orders SET
CustomerID=@CustomerID, InvoiceDate=@InvoiceDate,
"ModifiedDate=@ModifiedDate, ModifiedBy=@ModifiedBy WHERE ID=@ID",
orderConnection)

' Assign command objects


ordersDataAdapter.SelectCommand = selectCommand
ordersDataAdapter.DeleteCommand = deleteCommand
ordersDataAdapter.InsertCommand = insertCommand
ordersDataAdapter.UpdateCommand = updateCommand

[Visual C#]
// Declare and instantiate command objects
SqlCommand selectCommand = new SqlCommand("SELECT * FROM Orders",
orderConnection);
SqlCommand deleteCommand = new SqlCommand("DELETE FROM Orders WHERE
ID=@ID", orderConnection);
SqlCommand insertCommand = new SqlCommand("INSERT INTO Orders
(CustomerID, InvoiceDate, CreatedDate, CreatedBy) VALUES(@CustomerID,
@InvoiceDate, @CreatedDate, @CreatedBy)", orderConnection);
SqlCommand updateCommand = new SqlCommand("UPDATE Orders SET
CustomerID=@CustomerID, InvoiceDate=@InvoiceDate,
"ModifiedDate=@ModifiedDate, ModifiedBy=@ModifiedBy WHERE ID=@ID",
orderConnection);

// Assign command objects


ordersDataAdapter.SelectCommand = selectCommand;
ordersDataAdapter.DeleteCommand = deleteCommand;
ordersDataAdapter.InsertCommand = insertCommand;
ordersDataAdapter.UpdateCommand = updateCommand;
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
8-26 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Lorsque vous définissez les propriétés de commande de l'objet adaptateur de


données, si vous créez l'objet Command de façon distincte, puis l'assignez aux
propriétés de commande, votre code devient plus lisible. Cette méthode vous
permet d'assigner des paramètres aux objets Command si nécessaire, en toute
simplicité.
Dans le code, l'objet selectCommand utilise l'instruction SQL SELECT pour
extraire toutes les lignes de la table Orders. L'objet deleteCommand supprime
toutes les lignes contenant une valeur @ID dans la colonne ID. La partie @ID
est également appelée un paramètre nommé, et une valeur peut lui être assignée
ultérieurement. À ce stade, vous avez déclaré et instancié l'objet Command.

Remarque : La colonne ID de la table Orders est unique ; par conséquent, lorsqu'une


valeur est assignée au paramètre @ID, seule une ligne présente cette valeur.

L'objet updateCommand utilise également le paramètre @ID pour identifier la


ligne à mettre à jour (WHERE ID=@ID). De plus, il assigne des valeurs aux différentes
colonnes à l'aide de paramètres nommés (SET CustomerID=@CustomerID,
Invoicedate=@Invoicedate, etc.). L'objet insertCommand exécute la même
fonction que l'objet updateCommand, mais avec une syntaxe différente. Vous
pouvez assigner les valeurs de paramètre comme suit.

[Visual Basic]
' Declare and instantiate parameter objects
Dim deleteIDParameter As New SqlParameter("@ID",
SqlDbType.UniqueIdentifier, 0, "ID")

Dim updateIDParameter As New SqlParameter("@ID",


SqlDbType.UniqueIdentifier, 0, "ID")
Dim updateInvoiceDateParameter As New SqlParameter("@InvoiceDate",
SqlDbType.SmallDateTime, 0, "InvoiceDate")
...

Dim insertInvoiceDateParameter As New SqlParameter("@InvoiceDate",


SqlDbType.SmallDateTime, 0, "InvoiceDate")
...

' Assign parameters to command object


deleteCommand.Parameters.Add(deleteIDParameter)
updateCommand.Parameters.Add(updateIDParameter)
...

insertCommand.Parameters.Add(insertInvoiceDateParameter)
...
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans une application Web Microsoft® ASP.NET 4.0 8-27

[Visual C#]
// Declare and instantiate parameter objects
SqlParameter deleteIDParameter = new SqlParameter("@ID",
SqlDbType.UniqueIdentifier, 0, "ID");

SqlParameter updateIDParameter = new SqlParameter("@ID",


SqlDbType.UniqueIdentifier, 0, "ID");
SqlParameter updateInvoiceDateParameter = new
SqlParameter("@InvoiceDate", SqlDbType.SmallDateTime, 0,
"InvoiceDate");
...

SqlParameter insertInvoiceDateParameter = new


SqlParameter("@InvoiceDate", SqlDbType.SmallDateTime, 0,
"InvoiceDate");
...

// Assign parameters to command object


deleteCommand.Parameters.Add(deleteIDParameter);

updateCommand.Parameters.Add(updateIDParameter);
...

insertCommand.Parameters.Add(insertInvoiceDateParameter);
...

Remarque : l'énumération SqlDbType utilisée pour indiquer le type de données des


différents paramètres fait partie de l'espace de noms System.Data ; c'est pourquoi
l'espace de noms System.Data doit être importé dans vos fichiers de code.

Lors de la définition des propriétés de paramètre des objets Command, si vous


créez les objets Parameter de façon distincte, puis les ajoutez aux paramètres
de commande, vous rendez votre code plus lisible. Cette méthode vous permet
d'indiquer le type de données, la taille, le nom du paramètre, ainsi que le nom
de la colonne source. Certains paramètres sont dupliqués car ils sont assignés à
plusieurs objets Command. Vous pouvez assigner un objet de paramètre à un
seul objet Command.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
8-28 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Création d'un objet DataReader par programmation


Si vous souhaitez créer un flux de lignes rapide, en lecture seule et avant uniquement
à partir de votre source de données, créez un objet DataReader. Pour créer un objet
DataReader fonctionnant avec SQL Server version 7.0 ou ultérieure, vous devez au
préalable importer l'espace de noms System.Data.SqlClient. Une fois l'espace de
noms importé, vous pouvez créer l'objet SqlDataReader à l'aide de la méthode
ExecuteReader de l'objet SqlCommand, comme indiqué dans les exemples de code
suivants.

[Visual Basic]

Dim ordersDataReader As SqlDataReader = selectCommand.ExecuteReader()

' Any more rows?


While ordersDataReader.Read()
...
End While

' Always call Close when done


ordersDataReader.Close()

[Visual C#]

SqlDataReader ordersDataReader = selectCommand.ExecuteReader();

// Any more rows?


while (ordersDataReader.Read())
{
//...
}

// Always call Close when done


ordersDataReader.Close();

Notez que l'objet SqlCommand selectCommand permet de créer l'objet DataReader,


qui sélectionne toutes les lignes de la table Orders. Lorsque la méthode ExecuteReader
est appelée, l'objet SqlConnection associé à l'objet SqlCommand doit être ouvert ;
dans le cas contraire, une exception est générée.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans une application Web Microsoft® ASP.NET 4.0 8-29

Pour lire une ligne de l'objet DataReader, vous devez appeler la méthode Read,
qui renvoie une valeur booléenne indiquant si le curseur se situe dans une ligne
valide. Si le curseur ne se trouve pas dans une ligne valide, il indique que l'objet
DataReader ne contient plus de ligne. Par conséquent, si vous souhaitez lire en
boucle les lignes d'un objet DataReader, vous pouvez uniquement appeler la
méthode Read, car l'objet DataReader est une construction avant uniquement.
(Bien que vous puissiez fermer et rouvrir l'objet, c'est une opération lourde en
matière de ressources serveur.) Enfin, veillez à appeler la méthode Close sur l'objet
DataReader pour permettre la réutilisation de l'objet de connexion à d'autres fins.
L'objet DataReader est en fait utilisé dans les coulisses par l'objet DataAdapter
pour extraire les données et le schéma de la source de données lors du remplissage
d'un DataSet ou DataTable.

Remarque : lorsque vous ouvrez un objet DataReader, il monopolise la connexion


associée à l'objet de commande utilisé pour créer l'objet DataReader jusqu'à ce que
vous fermiez l'objet DataReader. Il est impossible d'utiliser l'objet de connexion, par
exemple pour un objet DataAdapter, lorsqu'il est en cours d'utilisation par l'objet
DataReader.

Pour extraire les données d'une seule table de base de données sans créer les
différents objets de commande manuellement, vous pouvez utiliser la classe
CommandBuilder.

Question : quelles sont les quatre propriétés de type commande de l'objet


DataAdapter ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
8-30 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Leçon 3
Gestion des
d donn
nées

Lorsquee vous disposez d d'une connexion à une source de données


d et que vous
v
pouvez transporter des d données vers le serveur
s et à partirr de celui-ci, la gesstion
des don nnées sur le clientt exige une méthode. L'objectif peeut être la présentation
des don nnées ou d'autoriser les utilisateurrs à manipuler less données. Vous pouvezp
effectueer ces tâches à l'aiide des types de couches
c connectéées et déconnectéées
d'ADO.N NET.
L'objet DataSet
D fournit u
une copie déconn nectée de tout ou
u partie des donnéées
contenuues dans la base d de données. Pourr les applications Web de longue durée,
d
vous poouvez utiliser un o objet DataSet. Ceependant, vous exécuterez
e princip
palement
des opéérations de base, ttelles que l'affichaage d'un ensemble de données un nique
directem
ment pour l'utilisaateur ou l'accès à un mot de passee. Pour des opéraations de
ce genree, il est inutile de conserver un obbjet DataSet. Utiliisez plutôt un objjet
DataReeader.
Cette leçon explique com mment utiliser less objets DataSet et DataReader pour
prendree en charge les exxigences de stock
kage local et de manipulation
m des données
d
relativess aux formulairess Web.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans une application Web Microsoft® ASP.NET 4.0 8-31

Objectifs de la leçon
Au terme de cette leçon, vous serez à même d'effectuer les tâches suivantes :
• extraire des données simples à l'aide de la classe DataReader ;
• extraire des données non simples à l'aide des classes DataSet et DataTable ;
• manipuler des données à l'aide de l'objet DataAdapter ;
• lier des données à des contrôles serveur à l'aide de l'IDE de Visual Studio 2010.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
8-32 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Extracction de don
nnées simple
es

Points clés
Lorsquee vous devez extrraire une valeur unique,
u telle qu'un
n mot de passe ou o le
nombree de lignes d'une base de données, vous pouvez utiiliser la méthode
ExecuteeScalar de la classse SqlCommand d. Si vous souhaittez extraire des données
d
de la baase de données qu ui n'apparaîtront que pour les utillisateurs, la classee
DataReeader représente u un bon choix de conteneur pour les l données extraaites.

Extracttion de donnéees en lecture seeule


L'objet Command
C vous permet d'appelerr la méthode ExeecuteReader, d'en nvoyer la
comman nde SELECT à laa source de donnéées, puis d'obteniir les résultats ren nvoyés
dans unn objet DataRead der. La méthode Read
R de l'objet DataReader
D vous permet
ensuite d'accéder au jeu de résultats. Si laa commande SEL LECT renvoie plusieurs
jeux de résultats, la méthhode NextResultt vous permet de passer au jeu de résultats
suivant.. En général, plussieurs jeux de réssultats sont le résu
ultat de plusieurss
instructtions SELECT. Paar exemple, l'objeet SelectComman nd suivant est utilisé avec
le fourn
nisseur de donnéees .NET Framewo ork SQL Server.

SELECT
T * FROM Orders
s;SELECT * FROM Customers
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans une application Web Microsoft® ASP.NET 4.0 8-33

Remarque : les deux instructions SELECT sont séparées par un point-virgule.

Les exemples de code suivants créent et ouvrent une connexion, exécutent la


commande, stockent le résultat dans l'objet ordersDataReader, puis ferment
la connexion une fois les résultats traités.

[Visual Basic]
' Declare and instantiate connection
Dim orderConnection As New SqlConnection()
' Initialize connection
orderConnection.ConnectionString = "..."
' Declare and instantiate command object
Dim selectCommand As New SqlCommand("SELECT * FROM Orders",
orderConnection)

' Open connection


orderConnection.Open()

' Declare, instantiate and initialize datareader


Dim ordersDataReader As SqlDataReader = _
selectCommand.ExecuteReader()

' Any rows returned?


If Not ordersDataReader.HasRows Then
' ...
Else
' Any more rows?
While ordersDataReader.Read()
...
End While
End If

' Close datareader


ordersDataReader.Close()
' Close connection
orderConnection.Close()
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
8-34 Introduction au développement Web avec Microsoft® Visual Studio® 2010

[Visual C#]
// Declare and instantiate connection
SqlConnection orderConnection = new SqlConnection();
// Initialize connection
orderConnection.ConnectionString = "...";
// Declare and instantiate command objects
SqlCommand selectCommand = new SqlCommand("SELECT * FROM Orders",
orderConnection);

// Open connection
orderConnection.Open();

// Declare, instantiate and initialize datareader


SqlDataReader ordersDataReader = selectCommand.ExecuteReader();

// Any rows returned?


if (!ordersDataReader.HasRows)
{
...
}
else
{
// Any more rows?
while (ordersDataReader.Read())
{
...
}
}

// Close datareader
ordersDataReader.Close();
// Close connection
orderConnection.Close();

La propriété HasRows de l'objet DataReader vérifie si des lignes ont été renvoyées.
Si aucune ligne n'a été renvoyée, vous pouvez en informer l'utilisateur ou exécuter
une action appropriée. Si la propriété HasRows a la valeur True, les lignes sont
lues en boucle à l'aide de la méthode Read, qui avance à la ligne suivante en
commençant par la première ligne lorsqu'elle est appelée la première fois. Si la
méthode Read renvoie la valeur False, cela signifie qu'il n'existe plus aucune ligne
et que vous n'avez plus accès aux données contenues dans l'objet DataReader. Si
vous tentez d'y accéder, une exception est générée.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans une application Web Microsoft® ASP.NET 4.0 8-35

Si vous devez extraire une seule valeur, au lieu d'utiliser la méthode ExecuteReader,
vous pouvez tout simplement utiliser la méthode ExecuteScalar. La méthode
suivante renvoie une valeur scalaire unique, telle que la valeur renvoyée par cette
instruction SELECT.

SELECT ID FROM Orders WHERE CreatedBy='Weber'

Si un seul client portant le nom « Weber » est trouvé, une entrée unique indiquant
le nom « Weber » est renvoyée. Cependant, si plusieurs clients portant le nom
« Weber » sont trouvés, seule la première entrée détectée est renvoyée. L'ID
renvoyé dépend du mode de tri des lignes dans la table Orders. Si l'instruction
SELECT renvoie plusieurs champs (par exemple, une ligne entière), la méthode
ExecuteScalar renvoie la première colonne de la ligne. La méthode ExecuteScalar
renvoie la valeur du type System.Object. Par conséquent, vous devrez probablement
effectuer une conversion de type sur la valeur de retour avant de pouvoir l'utiliser.
Les exemples de code suivants illustrent la méthode ExecuteScalar.

[Visual Basic]
' Declare and instantiate command object
Dim selectCommand As New SqlCommand("SELECT ID FROM Orders WHERE
CreatedBy='Weber'", orderConnection)

' Open connection


orderConnection.Open()

' Get scalar value


Dim name As String = CType(selectCommand.ExecuteScalar(), String)

' Close connection


orderConnection.Close()
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
8-36 Introduction au développement Web avec Microsoft® Visual Studio® 2010

[Visual C#]
// Declare and instantiate connection
SqlConnection orderConnection = new SqlConnection();
// Initialize connection
orderConnection.ConnectionString = "...";
// Declare and instantiate command objects
SqlCommand selectCommand = new SqlCommand("SELECT ID FROM Orders WHERE
CreatedBy='Weber'", orderConnection);

// Open connection
orderConnection.Open();

// Get scalar value


string name = (string) selectCommand.ExecuteScalar();

// Close connection
orderConnection.Close();
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans
d une application Webb Microsoft® ASP.NET 4.0 8-37

Extracction de don
nnées non sim
mples

Points clés
Si vous devez extraire dees données non simples,
s telles que le contenu d'unne
ntière ou d'un sou
table en us-ensemble de lignes d'une table,, les classes DataS
Set
ou DataaTable représentent un excellent choix dans un sccénario déconneccté.
Vous po ouvez appliquer ll'intégrité des don
nnées dans une classe
c DataSet à l'aide
l
des conntraintes. La classe DataSet vous permet
p de stockerr les données locales
(à ajoutter manuellementt) ou d'importer des
d documents XML.
X Elle vous peermet
égalemeent de stocker un ne copie ou un cache de données, ou encore un sou us-
ensemb ble de ceux-ci, danns une source de données sur un serveur différentt.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
8-38 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Utilisation du DataSet par programmation


Pour créer un objet DataSet, vous pouvez utiliser un des deux constructeurs, le
premier ne prenant aucun paramètre, le second prenant le nom du DataSet. Les
exemples de code suivants montrent comment déclarer et instancier un objet
DataSet.

[Visual Basic]
Dim ordersDataSet As New DataSet("OrdersDataSet")

[Visual C#]
DataSet ordersDataSet = new DataSet("OrdersDataSet");

Remplissage du DataSet
Une fois que vous avez créé un objet DataSet, vous pouvez le remplir à l'aide d'un
objet DataAdapter. Vous pouvez appeler la méthode Fill sur l'objet DataAdapter,
puis indiquer le nom de l'objet DataTable créé pour vous dans le DataSet. Les
exemples de code suivants créent et remplissent la table Orders. Le schéma de la
table Orders dans la base de données est automatiquement copié vers l'objet
Orders DataTable.

[Visual Basic]
ordersDataAdapter.Fill(ordersDataSet, "Orders")

[Visual C#]
ordersDataAdapter.Fill(ordersDataSet, "Orders");

La méthode Fill exécute l'instruction SQL contenue dans l'objet Command,


auquel vous accédez à l'aide de la propriété SelectCommand de l'objet
DataAdapter.
Nommez toujours la table en cours de création et de remplissage, de préférence
avec le nom de la table contenue dans la base de données. Cela vous permettra
d'utiliser ce nom pour accéder aux données ultérieurement.
La méthode DataAdapter.Fill utilise l'objet DataReader de manière implicite pour
renvoyer les noms et types de colonnes utilisés pour créer les tables dans le DataSet,
ainsi que les données permettant de remplir les lignes des tables dans le DataSet.
Les tables et colonnes sont créées uniquement si elles n'existent pas ; sinon, la
méthode Fill utilise le schéma DataSet existant.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans une application Web Microsoft® ASP.NET 4.0 8-39

Accès à un DataTable
Après avoir placé des données dans un objet DataSet, vous pouvez accéder à
celles-ci par programmation. Comme l'indiquent les exemples de code suivants,
chaque objet DataSet est composé d'un ou de plusieurs objets DataTable
auxquels vous pouvez faire référence par leur nom ou leur position ordinale.

[Visual Basic]
' Access Orders table by name
ordersDataSet.Tables("Orders")
' Access Orders table by ordinal position
ordersDataSet.Tables(0)

[Visual C#]
// Access Orders table by name
ordersDataSet.Tables["Orders"];
// Access Orders table by ordinal position
ordersDataSet.Tables[0];

Les classes DataRow et DataColumn sont les composants principaux d'une classe
DataTable, dans laquelle les objets DataColumn composent la structure du
DataTable et les objets DataRow contiennent les données réelles. Vous pouvez
utiliser un objet DataRow, ainsi que ses propriétés et méthodes, pour extraire et
évaluer les valeurs que contient un objet DataTable. Le DataRowCollection
représente les objets DataRow réels contenus dans l'objet DataTable et le
DataColumnCollection contient les objets DataColumn définissant le schéma de
l'objet DataTable. La propriété Rows de l'objet DataTable fournit un accès par
programmation au DataRowCollection. La propriété Columns de l'objet
DataTable fournit un accès par programmation au DataColumnCollection.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
8-40 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Les exemples de code suivants extraient les noms de colonne de l'objet DataTable
nommé Orders, contenu dans l'objet ordersDataSet.

[Visual Basic]
For Each col As DataColumn In ordersDataSet.Tables("Orders").Columns
Response.Write(col.ColumnName)
Next

[Visual C#]
foreach (DataColumn col in ordersDataSet.Tables["Orders"].Columns)
{
Response.Write(col.ColumnName);
};

Les objets DataRowCollection et DataColumnCollection possèdent une propriété


Count qui vous permet de déterminer le nombre de lignes ou de colonnes que
contient un objet DataTable. Le code suivant illustre cette opération.

[Visual Basic]
ordersDataSet.Tables("Orders").Rows.Count
ordersDataSet.Tables("Orders").Columns.Count

[Visual C#]
ordersDataSet.Tables["Orders"].Rows.Count;
ordersDataSet.Tables["Orders"].Columns.Count;
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans une application Web Microsoft® ASP.NET 4.0 8-41

En général, n'utilisez pas l'index pour localiser une ligne dans l'objet DataTable,
car cela ne vous garantit pas d'accéder à la bonne ligne. Alors que la colonne est
accessible car elle est dérivée de la source de données, les lignes peuvent être triées
de différentes façons ou marquées comme supprimées ; il est donc difficile de
savoir exactement à quelle ligne accéder. Vous pouvez lire les lignes en boucle et,
lorsque vous trouvez la bonne ligne, extraire les valeurs des différentes colonnes.
Vous pouvez également utiliser la méthode Find de l'objet DataRowCollection,
exposé par la propriété Rows, pour localiser une ou plusieurs lignes à l'aide des
clés primaires, comme indiqué ci-dessous.

[Visual Basic]
' Apply the full schema from the data source
ordersDataAdapter.FillSchema(ordersDataSet, SchemaType.Source,
"Orders")
' Get the data row
Dim ordersDataRow As DataRow =
ordersDataSet.Tables("Orders").Rows.Find("a05c7f53-9c4e-de11-aa78-
0003ffa70544")

[Visual C#]
// Apply the full schema from the data source
ordersDataAdapter.FillSchema(ordersDataSet, SchemaType.Source,
"Orders");
// Get the data row
DataRow ordersDataRow =
ordersDataSet.Tables["Orders"].Rows.Find("a05c7f53-9c4e-de11-aa78-
0003ffa70544");

Notez que l'appel à la méthode FillSchema de l'objet DataAdapter est effectué


avant l'appel de la méthode Find de l'objet DataRowCollection. Vous devez
appeler la méthode FillSchema pour appliquer l'ensemble du schéma à l'objet
Orders DataTable, car seuls le type de données et le nom sont appliqués lorsque
vous utilisez la méthode Fill de l'objet DataAdapter. Si vous souhaitez appliquer
une clé primaire, vous devez appeler la méthode FillSchema au préalable.

Question : comment la méthode Fill renvoie-t-elle les noms de colonne ?


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
8-42 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Manip
pulation dess données

Points clés
Si vous devez manipulerr les données conntenues dans votrre base de données,
que ce soit
s localement ou directement su ur le serveur, vouss pouvez utiliser l'objet
DataAddapter. Vous pouvvez également acccéder aux comm mandes de la base de
données et manipuler lees données à l'aide de l'objet Comm mand.

Manipu
ulation des don
nnées à l'aide d'un
d objet Data
aAdapter
Les exem
mples de code su
uivants illustrent la procédure d'in
nsertion locale d'u
une
nouvelle ligne de données.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans une application Web Microsoft® ASP.NET 4.0 8-43

[Visual Basic]
' Create new row locally
Dim newOrderDataRow As DataRow =
ordersDataSet.Tables("Orders").NewRow()
newOrderDataRow("ID") = Guid.NewGuid()
newOrderDataRow("CustomerID") = currentCustomer.ID
newOrderDataRow("InvoiceDate") = DateTime.Now
newOrderDataRow("CreatedDate") = DateTime.Now
newOrderDataRow("CreatedBy") = currentUser.Name

' Insert new row locally


ordersDataSet.Tables("Orders").Rows.Add(newOrderDataRow)

' Update data source


ordersDataAdapter.Update(ordersDataSet, "Orders")

[Visual C#]
// Create new row locally
DataRow newOrderDataRow = ordersDataSet.Tables["Orders"].NewRow();
newOrderDataRow["ID"] = Guid.NewGuid();
newOrderDataRow["CustomerID"] = currentCustomer.ID;
newOrderDataRow["InvoiceDate"] = DateTime.Now;
newOrderDataRow["CreatedDate"] = DateTime.Now;
newOrderDataRow["CreatedBy"] = currentUser.Name;

// Insert new row locally


ordersDataSet.Tables["Orders"].Rows.Add(newOrderDataRow);
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
8-44 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Vous pouvez modifier les données existantes localement, comme l'indiquent les
exemples de code suivants.

[Visual Basic]
' Find row
Dim orderDataRow As DataRow = _
ordersDataSet.Tables("Orders").Rows.Find("a05c7f53-9c4e-de11-aa78-
0003ffa70544")

' Update row locally


orderDataRow("ModifiedDate") = DateTime.Now
orderDataRow("ModifiedBy") = currentUser.Name

[Visual C#]
// Find row
DataRow orderDataRow =
ordersDataSet.Tables["Orders"].Rows.Find("a05c7f53-9c4e-de11-aa78-
0003ffa70544");

// Update row locally


orderDataRow["ModifiedDate"] = DateTime.Now;
orderDataRow["ModifiedBy"] = currentUser.Name;

Vous pouvez supprimer les données existantes localement, comme l'indiquent les
exemples de code suivants.

[Visual Basic]
' Find row
Dim orderDataRow As DataRow = _
ordersDataSet.Tables("Orders").Rows.Find("20389eb1-f24f-de11-aa78-
0003ffa70544")

' Delete row locally


orderDataRow.Delete()

[Visual C#]
// Find row
DataRow orderDataRow =
ordersDataSet.Tables["Orders"].Rows.Find("20389eb1-f24f-de11-aa78-
0003ffa70544");

// Delete row locally


orderDataRow.Delete();
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans une application Web Microsoft® ASP.NET 4.0 8-45

Remarque : Les exemples de code dans cette rubrique supposent que vous avez
configuré les objets Command pour les propriétés InsertCommand, UpdateCommand
et DeleteCommand de l'objet DataAdapter.

Après avoir manipulé les données localement, vous devrez peut-être les envoyer au
serveur. Le code suivant illustre cette opération.

[Visual Basic]
' Update data source
ordersDataAdapter.Update(ordersDataSet, "Orders")

[Visual C#]
// Update data source
ordersDataAdapter.Update(ordersDataSet, "Orders");

Question : quel est le principal intérêt d'utiliser l'objet DataAdapter ?


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
8-46 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Envoi de donnéess aux contrôlles serveur via


v l'IDE

Points clés
Pour géérer les données aavec efficacité, Vissual Studio 2010 vous permet de créer
une connnexion de base d de données admiinistrativement, ainsi
a qu'un contrôôle
serveur GridView sur un n formulaire Web b. Vous pouvez ennsuite ajouter un
n objet
SqlDataaSource au formu ulaire Web et lierr le contrôle Grid
dView à la base de
données en toute simplicité.

Afficha
age des donnéees sur un formu
ulaire Web
Une foiss que vous avez ccréé une connexion à une base dee données, l'Explo orateur
de serveeurs vous permett d'ajouter des doonnées directemeent à un formulairre Web.
Dans l'EExplorateur de seerveurs, si vous déplacez une tablee en la faisant glissser vers
l'éditeurr de texte en mod
de Création, Visuual Studio 2010 crrée des contrôless
GridVieew et SqlDataSou urce par défaut :
• Conntrôle GridView.. Affiche les valeu
urs d'une source de d données dans une
tablle où chaque colo
onne représente un u champ et chaq que ligne représeente
un enregistrement. UUn utilisateur peu ut, s'il le souhaitee, sélectionner, trier et
modifier les élémentts affichés dans lee contrôle.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans une application Web Microsoft® ASP.NET 4.0 8-47

• Contrôle SqlDataSource. Permet d'utiliser un contrôle serveur pour accéder


aux données contenues dans une base de données relationnelle, telle que les
bases de données SQL Server.

Visual Studio 2010 définit automatiquement les propriétés ConnectionString et


Command du contrôle SqlDataSource, comme illustré par le code suivant.

<asp:SqlDataSource ID="SqlDataSource1" runat="server"


ConnectionString="<%$ ConnectionStrings:OrderConnectionString1 %>"
DeleteCommand="DELETE FROM [Orders] WHERE [ID] = @ID"
InsertCommand="INSERT INTO [Orders] ([ID], [CustomerID],
[InvoiceDate], [CreatedDate], [CreatedBy], [ModifiedDate],
[ModifiedBy]) VALUES (@ID, @CustomerID, @InvoiceDate, @CreatedDate,
@CreatedBy, @ModifiedDate, @ModifiedBy)"
ProviderName="<%$
ConnectionStrings:OrderConnectionString1.ProviderName %>"
SelectCommand="SELECT [ID], [CustomerID], [InvoiceDate],
[CreatedDate], [CreatedBy], [ModifiedDate], [ModifiedBy] FROM
[Orders]"
UpdateCommand="UPDATE [Orders] SET [CustomerID] = @CustomerID,
[InvoiceDate] = @InvoiceDate, [CreatedDate] = @CreatedDate,
[CreatedBy] = @CreatedBy, [ModifiedDate] = @ModifiedDate, [ModifiedBy]
= @ModifiedBy WHERE [ID] = @ID">
...
</asp:SqlDataSource>

Le balisage suivant présente la configuration de la chaîne de connexion


OrderConnectionString1 dans le fichier web.config, à laquelle le balisage
précédent fait référence.

<configuration>
...
<appSettings/>
<connectionStrings>
<add name="OrderConnectionString1" connectionString="Data
Source=DatabaseServer;Initial Catalog=OrderDatabase;Integrated
Security=True"
providerName="System.Data.SqlClient" />
</connectionStrings>
...
</configuration>
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
8-48 Introduction au développement Web avec Microsoft® Visual Studio® 2010

La propriété DataSourceID du contrôle GridView est également définie sur le


nom du contrôle SqlDataSource. Le code suivant indique comment la propriété
DataSourceID est définie sur le contrôle SqlDataSource.

<asp:GridView ID="GridView1" runat="server"


AutoGenerateColumns="False" DataKeyNames="ID"
DataSourceID="SqlDataSource1" EmptyDataText="There are no data records
to display.">

À ce stade, vous pouvez afficher le formulaire Web dans un navigateur pour faire
apparaître les données de la source de données.

Configuration des propriétés d'affichage des sources de données et des


contrôles
Le contrôle SqlDataSource associé à un contrôle lié aux données vous permet
d'extraire les données d'une base de données relationnelle. Vous pouvez également
afficher, modifier et trier les données figurant sur un formulaire Web avec très peu
de code, voire aucun. Lorsque vous sélectionnez un contrôle SqlDataSource, vous
pouvez en définir les propriétés dans la fenêtre Propriétés.
Le contrôle SqlDataSource inclut les propriétés principales suivantes :
• ConnectionString. Chaîne de connexion permettant d'établir la connexion à
la base de données.
• ProviderName. Nom de l'assembly du fournisseur de données .NET.

Le contrôle GridView inclut les propriétés principales suivantes, que vous pouvez
également définir dans la fenêtre Propriétés :
• AllowPaging. Active la pagination dans le contrôle.
• AllowSorting. Active le tri dans le contrôle.
• Columns. Affiche l'ensemble de colonnes qui doit apparaître dans le contrôle.
• DataSourceID. Affiche l'ID de contrôle d'une source de données.
• PageSize. Nombre de lignes d'une source de données à afficher par page.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans une application Web Microsoft® ASP.NET 4.0 8-49

Vous pouvez définir les propriétés dans la fenêtre Propriétés et en mode Création.
Le contrôle SqlDataSource vous permet d'établir une connexion à la base de
données avec très peu de code, voire aucun. Le contrôle SqlDataSource est
également le contrôle par défaut lorsque vous déplacez une table en la faisant
glisser de l'Explorateur de serveurs vers un formulaire Web. Toutefois, vous
pouvez également utiliser d'autres contrôles serveurs, tels que LinqDataSource.
Le contrôle LinqDataSource expose LINQ aux développeurs Web à travers
l'architecture du contrôle de source de données ASP.NET. LINQ fournit un
modèle de programmation unifié pour la requête et la mise à jour de données
à partir de différents types de sources de données. En outre, il étend les
fonctionnalités de données directement dans les langages de programmation
du .NET Framework, tels que Visual Basic et Visual C#. LINQ simplifie
l'interaction entre la programmation orientée objet et les données relationnelles
en appliquant les principes de la programmation orientée objet aux données
relationnelles.

Question : quel est l'intérêt d'utiliser le contrôle SqlDataSource ?


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
8-50 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Atelier pratique
p : Gestion des donn
nées danss
une appllication W
Web ASP..NET 4.0

Remarqque : dans cet ateliier pratique, vous pouvez


p exécuter lees tâches en utilisa
ant le
langage de programmatio on Visual Basic ou Visual
V C#. Si vous utilisez Visual Basiic comme
langage de programmatio on, reportez-vous aux
a instructions fo ournies dans la secttion 1 du
documeent de l'atelier prattique correspondant. Si vous utilisez Visual C# comme langage
de programmation, reporttez-vous aux instru uctions fournies da ans la section 2 duu
documeent de l'atelier prattique correspondant.

Introdu
uction
Dans ceet atelier pratiquee, vous connecterez l'application Web
W ASP.NET à une u
base de données SQL Seerver à l'aide du contrôle
c serveur, puis
p lierez le conntrôle
utilisateeur contenu danss l'application à une source de donnnées. De plus, vo
ous
modifieerez la base de doonnées source et vérifierez
v les mod
difications apporttées.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans une application Web Microsoft® ASP.NET 4.0 8-51

Objectifs
Au terme de cet atelier pratique, vous serez à même d'effectuer les tâches suivantes :
• établir une connexion à une base de données SQL Server à l'aide du contrôle
SqlDataSource ;
• lier un contrôle utilisateur à une source de données ;
• modifier la base de données source et vérifier les modifications.

Configuration de l'atelier pratique


Pour cet atelier pratique, vous utiliserez l'environnement d'ordinateurs virtuels
disponible. Avant de commencer l'atelier pratique, vous devez :
• Démarrer l'ordinateur virtuel 10557A-GEN-DEV, puis vous connecter à l'aide
des informations d'identification suivantes :
• Nom d'utilisateur : Stagiaire
• Mot de passe : Pa$$w0rd
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
8-52 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Scéna
ario de l'ateliier pratique

Vous êtes développeur cchez Contoso, Ltd d, une grande enttreprise disposan nt d'une
base de clients mondialee. Votre organisattion gère ses inforrmations clients viav un
site Web b. Vous êtes resp
ponsable de la gesstion des informaations utilisateur dans
votre orrganisation. Pour mener à bien cettte tâche, vous deevez ajouter des
fonctionnnalités pour quee les tâches d'accèès aux données simples
s puissent extraire
e
les donnnées rapidement sans utiliser trop p de code. Pour minimiser
m les risq
ques de
créer unn code susceptiblle d'engendrer dees erreurs lorsquee vous accédez au ux
données de la base de do onnées, vous devvez ajouter un con ntrôle de source de
données au contrôle utillisateur et le conffigurer. Par ailleurrs, vous devez ajoouter et
lier un contrôle
c serveur aau contrôle utilissateur pour l'affich
hage de donnéess
spécifiq
ques de la base dee données.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans une application Web Microsoft® ASP.NET 4.0 8-53

Section 1 : Visual Basic


Exercice 1 : Connexion à une source de données
Dans cet exercice, les tâches principales sont les suivantes :
1. Ouvrir un projet Web ASP.NET existant.
2. Ajouter une base de données SQL Server 2008 Express.
3. Ajouter un contrôle de source de données au contrôle utilisateur.
4. Configurer un contrôle de source de données.

f Tâche 1 : ouvrir un projet Web ASP.NET existant


• Ouvrez une session sur 10557A-GEN-DEV en tant que Stagiaire avec le mot
de passe Pa$$w0rd.
• Ouvrez Microsoft Visual Studio 2010.
• Ouvrez la solution CustomerManagement située dans le dossier
D:\Labfiles\Starter\M8\VB.

f Tâche 2 : ajouter une base de données SQL Server 2008 Express


• Ajoutez un nouveau dossier de base de données nommé App_Data et une
base de données existante au dossier de la base de données,
D:\LabFiles\Starter\M8\CustomerManagement.mdf.

f Tâche 3 : ajouter un contrôle de source de données au contrôle


utilisateur
• Ouvrez le contrôle utilisateur Customer en mode Création.
• Ajoutez un contrôle SqlDataSource au contrôle utilisateur pour établir une
connexion à une base de données SQL Server.
• Renommez le contrôle SqlDataSource en CountriesSqlDataSource.
• Enregistrez le contrôle utilisateur Customer.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
8-54 Introduction au développement Web avec Microsoft® Visual Studio® 2010

f Tâche 4 : configurer un contrôle de source de données


• En mode Création, avec le contrôle CountriesSqlDataSource sélectionné,
affichez la balise active.
• Ouvrez l'assistant Configurer la source de données, connectez-vous à la base
de données CustomerManagement.mdf, puis créez une chaîne de connexion
nommée CustomerManagementConnectionString.
• Configurez l'instruction SELECT pour inclure les colonnes ID et Name de la
table Countries.
• Testez la requête et vérifiez que vous obtenez des données correctes de la table
Countries.

Remarque : assurez-vous que les lignes renvoyées incluent les valeurs des colonnes ID et
Name pour les différents pays.

• Enregistrez le contrôle utilisateur Customer.


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans une application Web Microsoft® ASP.NET 4.0 8-55

Exercice 2 : Liaison d'un contrôle serveur à une source de


données
Dans cet exercice, les tâches principales sont les suivantes :
1. Lier le contrôle DropDownList à une source de données.
2. Transmettez les valeurs à l'objet Customer.

f Tâche 1 : lier le contrôle DropDownList à une source de données


• Ouvrez le contrôle utilisateur Customer en mode Source.
• Localisez le balisage du contrôle CustomerCountryDropDownList.
• Supprimez l'élément ListItem statique du contrôle
CustomerCountryDropDownList.

<asp:ListItem>USA</asp:ListItem>

• Liez le contrôle CustomerCountryDropDownList au contrôle


CountriesSqlDataSource à l'aide de l'attribut DataSourceID.

DataSourceID="CountriesSqlDataSource"

• Définissez le champ de valeur du contrôle CustomerCountryDropDownList


sur la colonne ID de la base de données, à l'aide de l'attribut DataValueField.

DataValueField="ID"

• Définissez le champ de texte du contrôle CustomerCountryDropDownList


sur la colonne Name de la base de données, à l'aide de l'attribut DataTextField.

DataTextField="Name"

• Générez le contrôle utilisateur et corrigez les erreurs.

Remarque : le message Message de build a réussi apparaît dans le volet Build de la


fenêtre Sortie.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
8-56 Introduction au développement Web avec Microsoft® Visual Studio® 2010

f Tâche 2 : transmettre les valeurs à l'objet Customer


• Ouvrez le contrôle utilisateur Customer en mode Code.
• Localisez le code de la méthode privée instantiateCustomerObject et
transmettez la valeur sélectionnée du contrôle CustomerCountryDropDownList
au constructeur de classe Customer à l'aide de la propriété SelectedValue incluse
dans un objet new Guid.

' Instantiate new Customer object with user input


currentCustomer = New CustomerManagementEntities.Customer(
Nothing, CustomerFirstNameTextBox.Text,
CustomerLastNameTextBox.Text,
CustomerAddressTextBox.Text, CustomerZipCodeTextBox.Text,
CustomerCityTextBox.Text,
CustomerStateTextBox.Text, New
Guid(CustomerCountryDropDownList.SelectedValue),
CustomerPhoneTextBox.Text,
CustomerEmailAddressTextBox.Text,
CustomerWebAddressTextBox.Text,
CustomerNewsSubscriberCheckBox.Checked,
Integer.Parse(CustomerCreditLimitTextBox.Text), DateTime.Now,
"", Nothing, "")

• Générez le contrôle utilisateur et corrigez les erreurs.


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans une application Web Microsoft® ASP.NET 4.0 8-57

Exercice 3 : Modification d'une source de données


Dans cet exercice, les tâches principales sont les suivantes :
1. Créer le formulaire Web Customers.
2. Ajouter le contrôle SqlDataSource au formulaire Web.
3. Configurer le contrôle SqlDataSource.
4. Ajouter le contrôle ListView au formulaire Web.
5. Ajouter du code pour enregistrer manuellement un client dans une source
de données.
6. Mettre à jour le plan de site pour activer l'affichage de tous les clients.
7. Créer un client et vérifier la source de données.

f Tâche 1 : créer le formulaire Web Customers


• Créez le formulaire Web Customers basé sur la page maître Site.master.
• Ouvrez le formulaire Web Customers en mode Création.

f Tâche 2 : ajouter le contrôle SqlDataSource au formulaire Web


• Ajoutez le contrôle SqlDataSource au formulaire Web Customers.aspx.
• Renommez le contrôle SqlDataSource en CustomersSqlDataSource.
• Enregistrez le formulaire Web Customers.

f Tâche 3 : configurer le contrôle SqlDataSource


• En mode Création, avec le contrôle CustomersSqlDataSource sélectionné,
affichez la balise active.
• Ouvrez l'assistant Configurer la source de données.
• Sélectionnez la chaîne de connexion CustomerManagementConnectionString
du contrôle CustomersSqlDataSource.
• Configurez l'instruction SELECT pour inclure toutes les colonnes de la table
Customers et vérifiez qu'il est possible de manipuler les données dans la
source de données et d'utiliser un accès concurrentiel optimiste.
• Enregistrez le formulaire Web Customers.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
8-58 Introduction au développement Web avec Microsoft® Visual Studio® 2010

f Tâche 4 : ajouter le contrôle ListView au formulaire Web


• Ajoutez le contrôle ListView au formulaire Web Customers.
• Renommez le contrôle ListView en CustomersListView.
• Liez le contrôle CustomersListView au contrôle CustomersSqlDataSource
à l'aide de la balise active.
• Activez la pagination dans le contrôle CustomersListView.
• Enregistrez le formulaire Web Customers.
• Générez le contrôle utilisateur et corrigez les erreurs.
• Affichez le formulaire Web Customers dans le navigateur.
• Fermez Windows® Internet Explorer®.

f Tâche 5 : ajouter du code pour enregistrer manuellement un client


dans une source de données
• Ouvrez le contrôle utilisateur Customer en mode Code.
• Importez l'espace de noms utilisé pour accéder à une base de données
SQL Server 2008, System.Data.SqlClient.
• Importez l'espace de noms utilisé avec la couche ADO.NET déconnectée,
System.Data.
• Importez l'espace de noms permetant de lire la chaîne de connexion à partir
du fichier web.config, System.Configuration.
• Localisez le gestionnaire d'événements CustomerInsertButton_Click.

Protected Sub CustomerInsertButton_Click(ByVal sender As Object,


ByVal e As System.EventArgs) Handles CustomerInsertButton.Click
' Did page validation succeed?
If Not Page.IsValid Then
Exit Sub
End If

' Add the current user name


currentCustomer.CreatedBy = Context.User.Identity.Name
' Add the user credit limit
currentCustomer.CreditLimit = 50000
End Sub
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans une application Web Microsoft® ASP.NET 4.0 8-59

• Supprimez l'assignation de la valeur 50 000 à la propriété CreditLimit.

' Add the user credit limit


currentCustomer.CreditLimit = 50000

• Ajoutez le code suivant au gestionnaire d'événements


CustomerInsertButton_Click, à l'aide d'un extrait de code nommé ADO.NET
Insert Customer. L'extrait de code a été fourni par le développeur principal et
il est placé dans le dossier Mes extraits de code.

' Create and instantiate connection


Using customerManagementConnection As New SqlConnection()
' Initialize connection string from web.config
customerManagementConnection.ConnectionString =

ConfigurationManager.ConnectionStrings("CustomerManagementConnecti
onString").ConnectionString

' Open connection


customerManagementConnection.Open()
' Declare and instantiate data adapter
Dim customerManagementDataAdapter As New SqlDataAdapter()

' Declare and instantiate command objects


Dim selectCommand As New SqlCommand("SELECT * FROM Customers",
customerManagementConnection)
Dim insertCommand As New SqlCommand(
"INSERT INTO Customers (FirstName, LastName, Address,
ZipCode, City, State, CountryID, Phone, EmailAddress, " &
"Url, CreditLimit, NewsSubscriber, CreatedDate, CreatedBy)
VALUES(@FirstName, @LastName, @Address, @ZipCode, @City, @State, "
&
"@CountryID, @Phone, @EmailAddress, @WebAddress,
@CreditLimit, @NewsSubscriber, @CreatedDate, @CreatedBy)",
customerManagementConnection)

' Assign command objects


customerManagementDataAdapter.SelectCommand = selectCommand
customerManagementDataAdapter.InsertCommand = insertCommand

' Declare and instantiate parameter objects


Dim insertFirstNameParameter As New SqlParameter("@FirstName",
SqlDbType.NVarChar, 50, "FirstName")
Dim insertLastNameParameter As New SqlParameter("@LastName",
SqlDbType.NVarChar, 30, "LastName")

(Pour la suite du code, reportez-vous à sur la page suivante.)


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
8-60 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Dim insertAddressParameter As New SqlParameter("@Address",


SqlDbType.NVarChar, 50, "Address")
Dim insertZipCodeParameter As New SqlParameter("@ZipCode",
SqlDbType.NVarChar, 10, "ZipCode")
Dim insertCityParameter As New SqlParameter("@City",
SqlDbType.NVarChar, 30, "City")
Dim insertStateParameter As New SqlParameter("@State",
SqlDbType.NVarChar, 30, "State")
Dim insertCountryIDParameter As New SqlParameter("@CountryID",
SqlDbType.UniqueIdentifier, 0, "CountryID")
Dim insertPhoneParameter As New SqlParameter("@Phone",
SqlDbType.VarChar, 30, "Phone")
Dim insertEmailAddressParameter As New
SqlParameter("@EmailAddress", SqlDbType.NVarChar, 50,
"EmailAddress")
Dim insertWebAddressParameter As New
SqlParameter("@WebAddress", SqlDbType.NVarChar, 80, "Url")
Dim insertCreditLimitParameter As New
SqlParameter("@CreditLimit", SqlDbType.Int, 0, "CreditLimit")
Dim insertNewsSubscriberParameter As New
SqlParameter("@NewsSubscriber", SqlDbType.Bit, 0,
"NewsSubscriber")
Dim insertCreatedDateParameter As New
SqlParameter("@CreatedDate", SqlDbType.SmallDateTime, 0,
"CreatedDate")
Dim insertCreatedByParameter As New SqlParameter("@CreatedBy",
SqlDbType.VarChar, 15, "CreatedBy")

' Assign parameters to command object


insertCommand.Parameters.Add(insertFirstNameParameter)
insertCommand.Parameters.Add(insertLastNameParameter)
insertCommand.Parameters.Add(insertAddressParameter)
insertCommand.Parameters.Add(insertZipCodeParameter)
insertCommand.Parameters.Add(insertCityParameter)
insertCommand.Parameters.Add(insertStateParameter)
insertCommand.Parameters.Add(insertCountryIDParameter)
insertCommand.Parameters.Add(insertPhoneParameter)
insertCommand.Parameters.Add(insertEmailAddressParameter)
insertCommand.Parameters.Add(insertWebAddressParameter)
insertCommand.Parameters.Add(insertCreditLimitParameter)
insertCommand.Parameters.Add(insertNewsSubscriberParameter)
insertCommand.Parameters.Add(insertCreatedDateParameter)
insertCommand.Parameters.Add(insertCreatedByParameter)

(Pour la suite du code, reportez-vous à sur la page suivante.)


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans une application Web Microsoft® ASP.NET 4.0 8-61

' Declare and instantiate dataset


Dim customerManagementDataSet As New
DataSet("CustomerManagementDataSet")
' Apply the full schema from the data source

customerManagementDataAdapter.FillSchema(customerManagementDataSet,
SchemaType.Source, "Customers")
customerManagementDataAdapter.MissingSchemaAction =
MissingSchemaAction.AddWithKey
customerManagementDataAdapter.MissingMappingAction =
MissingMappingAction.Passthrough
' Populate Customers DataTable
customerManagementDataAdapter.Fill(customerManagementDataSet,
"Customers")

' Create new row locally


Dim newCustomerDataRow As DataRow =
customerManagementDataSet.Tables("Customers").NewRow()
newCustomerDataRow("ID") = Guid.NewGuid()
newCustomerDataRow("FirstName") = currentCustomer.FirstName
newCustomerDataRow("LastName") = currentCustomer.LastName
newCustomerDataRow("Address") = currentCustomer.Address
newCustomerDataRow("ZipCode") = currentCustomer.ZipCode
newCustomerDataRow("City") = currentCustomer.City
newCustomerDataRow("State") = currentCustomer.State
newCustomerDataRow("CountryID") = currentCustomer.CountryID
newCustomerDataRow("Phone") = currentCustomer.Phone
newCustomerDataRow("EmailAddress") =
currentCustomer.EmailAddress
newCustomerDataRow("Url") = currentCustomer.EmailAddress
newCustomerDataRow("CreditLimit") =
currentCustomer.CreditLimit
newCustomerDataRow("NewsSubscriber") =
currentCustomer.NewsSubscriber
newCustomerDataRow("CreatedDate") =
currentCustomer.CreatedDate
newCustomerDataRow("CreatedBy") = currentCustomer.CreatedBy

' Insert new row locally

customerManagementDataSet.Tables("Customers").Rows.Add(newCustomer
DataRow)

(Pour la suite du code, reportez-vous à sur la page suivante.)


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
8-62 Introduction au développement Web avec Microsoft® Visual Studio® 2010

' Update data source


If
customerManagementDataAdapter.Update(customerManagementDataSet,
"Customers") = 1 Then
' Instantiate new Customer object
currentCustomer = New
CustomerManagementEntities.Customer()
' Reload page to refresh with "blank" input controls
Response.Redirect("~/InsertCustomer.aspx")
End If
End Using

• Enregistrez le fichier code-behind Customer.

f Tâche 6 : mettre à jour le plan de site pour activer l'affichage de tous


les clients
• Ouvrez le fichier web.sitemap.
• Ajoutez le nouvel élément siteMapNode au siteMapNode Customers.

<siteMapNode title="All" description="View All Customers"


url="~/Customers.aspx" />

• Enregistrez et fermez le fichier web.sitemap.

f Tâche 7 : créer un client et vérifier la source de données


• Générez la solution CustomerManagement.
• Exécutez l'application Web CustomerManagement.
• Ouvrez le formulaire Web InsertCustomer et cliquez sur New dans le menu
Customers.
• Créez un client en utilisant les informations suivantes, puis cliquez sur le
bouton Insert :
• First Name : Kim
• Last Name : Abercrombie
• Address : 9876, Maine Road
• Zip Code : M24NG
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans une application Web Microsoft® ASP.NET 4.0 8-63

• City : Manchester
• Country : Royaume-Uni
• Phone : 0161-123 555
• Email Address : kim@litwareinc.com
• Web Address : http://www.litwareinc.com
• Credit Limit : 50 000
• News Subscriber : Oui
• Vérifiez que le nouveau client a été ajouté dans la source de données à l'aide
du nouveau formulaire Web Customers.
• Fermez Internet Explorer.

f Tâche 8 : désactiver l'ordinateur virtuel et annuler les modifications


• Désactivez l'ordinateur virtuel 10557A-GEN-DEV.
• Annulez les modifications apportées à l'ordinateur virtuel 10557A-GEN-DEV.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
8-64 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Section 2 : Visual C#
Exercice 1 : Connexion à une source de données
Dans cet exercice, les tâches principales sont les suivantes :
1. Ouvrir un projet Web ASP.NET existant.
2. Ajouter une base de données SQL Server 2008 Express.
3. Ajouter un contrôle de source de données au contrôle utilisateur.
4. Configurer un contrôle de source de données.

f Tâche 1 : ouvrir un projet Web ASP.NET existant


• Ouvrez une session sur 10557A-GEN-DEV en tant que Stagiaire avec le mot
de passe Pa$$w0rd.
• Ouvrez Microsoft Visual Studio 2010.
• Ouvrez la solution CustomerManagement située dans le dossier
D:\Labfiles\Starter\M8\CS.

f Tâche 2 : ajouter une base de données SQL Server 2008 Express


• Ajoutez un nouveau dossier de base de données nommé App_Data et une
base de données existante au dossier de la base de données,
D:\LabFiles\Starter\M8\CustomerManagement.mdf.

f Tâche 3 : ajouter un contrôle de source de données au contrôle


utilisateur
• Ouvrez le contrôle utilisateur Customer en mode Création.
• Ajoutez un contrôle SqlDataSource au contrôle utilisateur pour établir une
connexion à une base de données SQL Server.
• Renommez le contrôle SqlDataSource en CountriesSqlDataSource.
• Enregistrez le contrôle utilisateur Customer.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans une application Web Microsoft® ASP.NET 4.0 8-65

f Tâche 4 : configurer un contrôle de source de données


• En mode Création, avec le contrôle CountriesSqlDataSource sélectionné,
affichez la balise active.
• Ouvrez l'assistant Configurer la source de données, connectez-vous à la base
de données CustomerManagement.mdf, puis créez une chaîne de connexion
nommée CustomerManagementConnectionString.
• Configurez l'instruction SELECT pour inclure les colonnes ID et Name de la
table Countries.
• Testez la requête et vérifiez que vous obtenez des données correctes de la table
Countries.

Remarque : assurez-vous que les lignes renvoyées incluent les valeurs des colonnes ID et
Name pour les différents pays.

• Enregistrez le contrôle utilisateur Customer.


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
8-66 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Exercice 2 : Liaison d'un contrôle serveur à une source de


données
Dans cet exercice, les tâches principales sont les suivantes :
1. Lier le contrôle DropDownList à la source de données.
2. Transmettez les valeurs à l'objet Customer.

f Tâche 1 : lier le contrôle DropDownList à une source de données


• Ouvrez le contrôle utilisateur Customer en mode Source.
• Localisez le balisage du contrôle CustomerCountryDropDownList.
• Supprimez l'élément ListItem statique du contrôle
CustomerCountryDropDownList.

<asp:ListItem>USA</asp:ListItem>

• Liez le contrôle CustomerCountryDropDownList au contrôle


CountriesSqlDataSource à l'aide de l'attribut DataSourceID.

DataSourceID="CountriesSqlDataSource"

• Définissez le champ de valeur du contrôle CustomerCountryDropDownList


sur la colonne ID de la base de données, à l'aide de l'attribut DataValueField.

DataValueField="ID"

• Définissez le champ de texte du contrôle CustomerCountryDropDownList


sur la colonne Name de la base de données, à l'aide de l'attribut DataTextField.

DataTextField="Name"

• Générez le contrôle utilisateur et corrigez les erreurs.


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans une application Web Microsoft® ASP.NET 4.0 8-67

f Tâche 2 : transmettre les valeurs à l'objet Customer


• Ouvrez le contrôle utilisateur Customer en mode Code.
• Localisez le code de la méthode privée instantiateCustomerObject et
transmettez la valeur sélectionnée du contrôle CustomerCountryDropDownList
au constructeur de classe Customer à l'aide de la propriété SelectedValue
incluse dans un objet new Guid.

// Instantiate new Customer object with user input


currentCustomer = new CustomerManagementEntities.Customer(
null, CustomerFirstNameTextBox.Text,
CustomerLastNameTextBox.Text,
CustomerAddressTextBox.Text, CustomerZipCodeTextBox.Text,
CustomerCityTextBox.Text, CustomerStateTextBox.Text,
new Guid(CustomerCountryDropDownList.SelectedValue),
CustomerPhoneTextBox.Text,
CustomerEmailAddressTextBox.Text,
CustomerWebAddressTextBox.Text,
int.Parse(CustomerCreditLimitTextBox.Text),
CustomerNewsSubscriberCheckBox.Checked,
DateTime.Now, "", null, "");

• Générez le contrôle utilisateur et corrigez les erreurs.


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
8-68 Introduction au développement Web avec Microsoft® Visual Studio® 2010

Exercice 3 : Modification d'une source de données


Dans cet exercice, les tâches principales sont les suivantes :
1. Créer le formulaire Web Customers.
2. Ajouter le contrôle SqlDataSource au formulaire Web.
3. Configurer le contrôle SqlDataSource.
4. Ajouter le contrôle ListView au formulaire Web.
5. Ajouter du code pour enregistrer manuellement un client dans une source de
données.
6. Mettre à jour le plan de site pour activer l'affichage de tous les clients.
7. Créer un client et vérifier la source de données.

f Tâche 1 : créer le formulaire Web Customers


• Créez le formulaire Web Customers en vous basant sur la page maître Site.master.
• Ouvrez le formulaire Web Customers en mode Création.

f Tâche 2 : ajouter le contrôle SqlDataSource au formulaire Web


• Ajoutez le contrôle SqlDataSource au formulaire Web Customers.aspx.
• Renommez le contrôle SqlDataSource en CustomersSqlDataSource.
• Enregistrez le formulaire Web Customers.

f Tâche 3 : configurer le contrôle SqlDataSource


• En mode Création, avec le contrôle CustomersSqlDataSource sélectionné,
affichez la balise active.

• Ouvrez l'assistant Configurer la source de données.


• Sélectionnez la chaîne de connexion CustomerManagementConnectionString
du contrôle CustomersSqlDataSource.
• Configurez l'instruction SELECT pour inclure toutes les colonnes de la table
Customers et vérifiez qu'il est possible de manipuler les données dans la
source de données et d'utiliser un accès concurrentiel optimiste.

• Enregistrez le formulaire Web Customers.


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans une application Web Microsoft® ASP.NET 4.0 8-69

f Tâche 4 : ajouter le contrôle ListView au formulaire Web


• Ajoutez le contrôle ListView au formulaire Web Customers.
• Renommez le contrôle ListView en CustomersListView.
• Liez le contrôle CustomersListView au contrôle CustomersSqlDataSource
à l'aide de la balise active.
• Activez la pagination dans le contrôle CustomersListView.
• Enregistrez le formulaire Web Customers.
• Générez le contrôle utilisateur et corrigez les erreurs.
• Affichez le formulaire Web Customers dans le navigateur.
• Fermez Internet Explorer.

f Tâche 5 : ajouter du code pour enregistrer manuellement un client


dans une source de données
• Ouvrez le contrôle utilisateur Customer en mode Code.
• Importez l'espace de noms utilisé pour accéder à une base de données
SQL Server 2008, System.Data.SqlClient.
• Importez l'espace de noms utilisé avec la couche ADO.NET déconnectée,
System.Data.
• Importez l'espace de noms permetant de lire la chaîne de connexion à partir
du fichier web.config, System.Configuration.

• Localisez le gestionnaire d'événements CustomerInsertButton_Click.

protected void CustomerInsertButton_Click(object sender, EventArgs e)


{
// Did page validation succeed?
if (!Page.IsValid)
return;

// Add the current user name


currentCustomer.CreatedBy = Context.User.Identity.Name;
// Add the user credit limit
currentCustomer.CreditLimit = 50000;
}
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
8-70 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Supprimez l'assignation de la valeur 50 000 à la propriété CreditLimit.

// Add the user credit limit


currentCustomer.CreditLimit = 50000;

• Ajoutez le code suivant au gestionnaire d'événements


CustomerInsertButton_Click, à l'aide d'un extrait de code nommé ADO.NET
Insert Customer. L'extrait de code a été fourni par le développeur principal et
il est placé dans le dossier Mes extraits de code.

// Create and instantiate connection


using (SqlConnection customerManagementConnection = new
SqlConnection())
{
// Initialize connection string from web.config
customerManagementConnection.ConnectionString =

ConfigurationManager.ConnectionStrings["CustomerManagementConnecti
onString"].ConnectionString;

// Open connection
customerManagementConnection.Open();
// Declare and instantiate data adapter
SqlDataAdapter customerManagementDataAdapter = new
SqlDataAdapter();

// Declare and instantiate command objects


SqlCommand selectCommand = new SqlCommand("SELECT * FROM
Customers",
customerManagementConnection);
SqlCommand insertCommand = new SqlCommand(
"INSERT INTO Customers (FirstName, LastName, Address,
ZipCode, City, State, CountryID, Phone, EmailAddress, " +
"Url, CreditLimit, NewsSubscriber, CreatedDate, CreatedBy)
VALUES(@FirstName, @LastName, @Address, @ZipCode, @City, @State, "
+
"@CountryID, @Phone, @EmailAddress, @WebAddress,
@CreditLimit, @NewsSubscriber, @CreatedDate, @CreatedBy)",
customerManagementConnection);

// Assign command objects


customerManagementDataAdapter.SelectCommand = selectCommand;
customerManagementDataAdapter.InsertCommand = insertCommand;

(Pour la suite du code, reportez-vous à sur la page suivante.)


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans une application Web Microsoft® ASP.NET 4.0 8-71

// Declare and instantiate parameter objects


SqlParameter insertFirstNameParameter = new
SqlParameter("@FirstName", SqlDbType.NVarChar, 50, "FirstName");
SqlParameter insertLastNameParameter = new
SqlParameter("@LastName", SqlDbType.NVarChar, 30, "LastName");
SqlParameter insertAddressParameter = new
SqlParameter("@Address", SqlDbType.NVarChar, 50, "Address");
SqlParameter insertZipCodeParameter = new
SqlParameter("@ZipCode", SqlDbType.NVarChar, 10, "ZipCode");
SqlParameter insertCityParameter = new SqlParameter("@City",
SqlDbType.NVarChar, 30, "City");
SqlParameter insertStateParameter = new SqlParameter("@State",
SqlDbType.NVarChar, 30, "State");
SqlParameter insertCountryIDParameter = new
SqlParameter("@CountryID", SqlDbType.UniqueIdentifier, 0,
"CountryID");
SqlParameter insertPhoneParameter = new SqlParameter("@Phone",
SqlDbType.VarChar, 30, "Phone");
SqlParameter insertEmailAddressParameter = new
SqlParameter("@EmailAddress", SqlDbType.NVarChar, 50,
"EmailAddress");
SqlParameter insertWebAddressParameter = new
SqlParameter("@WebAddress", SqlDbType.NVarChar, 80, "Url");
SqlParameter insertCreditLimitParameter = new
SqlParameter("@CreditLimit", SqlDbType.Int, 0, "CreditLimit");
SqlParameter insertNewsSubscriberParameter = new
SqlParameter("@NewsSubscriber", SqlDbType.Bit, 0,
"NewsSubscriber");
SqlParameter insertCreatedDateParameter = new
SqlParameter("@CreatedDate", SqlDbType.SmallDateTime, 0,
"CreatedDate");
SqlParameter insertCreatedByParameter = new
SqlParameter("@CreatedBy", SqlDbType.VarChar, 15, "CreatedBy");

// Assign parameters to command object


insertCommand.Parameters.Add(insertFirstNameParameter);
insertCommand.Parameters.Add(insertLastNameParameter);
insertCommand.Parameters.Add(insertAddressParameter);
insertCommand.Parameters.Add(insertZipCodeParameter);
insertCommand.Parameters.Add(insertCityParameter);
insertCommand.Parameters.Add(insertStateParameter);
insertCommand.Parameters.Add(insertCountryIDParameter);
insertCommand.Parameters.Add(insertPhoneParameter);
insertCommand.Parameters.Add(insertEmailAddressParameter);

(Pour la suite du code, reportez-vous à sur la page suivante.)


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
8-72 Introduction au développement Web avec Microsoft® Visual Studio® 2010

insertCommand.Parameters.Add(insertWebAddressParameter);
insertCommand.Parameters.Add(insertCreditLimitParameter);
insertCommand.Parameters.Add(insertNewsSubscriberParameter);
insertCommand.Parameters.Add(insertCreatedDateParameter);
insertCommand.Parameters.Add(insertCreatedByParameter);

// Declare and instantiate dataset


DataSet customerManagementDataSet = new
DataSet("CustomerManagementDataSet");
// Apply the full schema from the data source

customerManagementDataAdapter.FillSchema(customerManagementDataSet,
SchemaType.Source, "Customers");
customerManagementDataAdapter.MissingSchemaAction =
MissingSchemaAction.AddWithKey;
customerManagementDataAdapter.MissingMappingAction =
MissingMappingAction.Passthrough;
// Populate Customers DataTable
customerManagementDataAdapter.Fill(customerManagementDataSet,
"Customers");

// Create new row locally


DataRow newCustomerDataRow =
customerManagementDataSet.Tables["Customers"].NewRow();
newCustomerDataRow["ID"] = Guid.NewGuid();
newCustomerDataRow["FirstName"] = currentCustomer.FirstName;
newCustomerDataRow["LastName"] = currentCustomer.LastName;
newCustomerDataRow["Address"] = currentCustomer.Address;
newCustomerDataRow["ZipCode"] = currentCustomer.ZipCode;
newCustomerDataRow["City"] = currentCustomer.City;
newCustomerDataRow["State"] = currentCustomer.State;
newCustomerDataRow["CountryID"] = currentCustomer.CountryID;
newCustomerDataRow["Phone"] = currentCustomer.Phone;
newCustomerDataRow["EmailAddress"] =
currentCustomer.EmailAddress;
newCustomerDataRow["Url"] = currentCustomer.EmailAddress;
newCustomerDataRow["CreditLimit"] =
currentCustomer.CreditLimit;
newCustomerDataRow["NewsSubscriber"] =
currentCustomer.NewsSubscriber;
newCustomerDataRow["CreatedDate"] =
currentCustomer.CreatedDate;
newCustomerDataRow["CreatedBy"] = currentCustomer.CreatedBy;

(Pour la suite du code, reportez-vous à sur la page suivante.)


UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans une application Web Microsoft® ASP.NET 4.0 8-73

// Insert new row locally

customerManagementDataSet.Tables["Customers"].Rows.Add(newCustomer
DataRow);

// Update data source


if
(customerManagementDataAdapter.Update(customerManagementDataSet,
"Customers") == 1)
{
// Instantiate new Customer object
currentCustomer = new
CustomerManagementEntities.Customer();
// Reload page to refresh with "blank" input controls
Response.Redirect("~/InsertCustomer.aspx");
}
}

• Enregistrez le fichier code-behind Customer.

f Tâche 6 : mettre à jour le plan de site pour activer l'affichage de tous


les clients
• Ouvrez le fichier web.sitemap.
• Ajoutez le nouvel élément siteMapNode au siteMapNode Customers.

<siteMapNode title="All" description="View All Customers"


url="~/Customers.aspx" />

• Enregistrez et fermez le fichier web.sitemap.

f Tâche 7 : créer un client et vérifier la source de données


• Générez la solution CustomerManagement.
• Exécutez l'application Web CustomerManagement.
• Ouvrez le formulaire Web InsertCustomer.
• Créez un client en utilisant les informations suivantes, puis cliquez sur le
bouton Insert :
• First Name : Kim
• Last Name : Abercrombie
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
8-74 Introduction au développement Web avec Microsoft® Visual Studio® 2010

• Address : 9876, Maine Road


• Zip Code : M24NG
• City : Manchester
• Country : Royaume-Uni
• Phone : 0161-123 555
• Email Address : kim@litwareinc.com
• Web Address : http://www.litwareinc.com
• Credit Limit : 50 000
• News Subscriber : Oui
• Vérifiez que le nouveau client a été ajouté dans la source de données à l'aide
du nouveau formulaire Web Customers.
• Fermez Internet Explorer.

f Tâche 8 : désactiver l'ordinateur virtuel et annuler les modifications


• Désactivez l'ordinateur virtuel 10557A-GEN-DEV.
• Annulez les modifications apportées à l'ordinateur virtuel 10557A-GEN-DEV.

Remarque : vous trouverez les corrigés des exercices sur le CD-ROM d'accompagnement
du cours.

Fin de l'atelier pratique


Après avoir terminé l'atelier pratique, vous devez éteindre l'ordinateur virtuel
10557A-GEN-DEV et annuler les modifications.
1. Dans Microsoft Hyper-V™ Manager, dans le volet Ordinateurs virtuels, cliquez
avec le bouton droit sur 10557A-GEN-DEV, puis cliquez sur Éteindre.
2. Dans la boîte de dialogue Éteindre l’ordinateur, cliquez sur Éteindre.
3. Dans Hyper-V Manager, dans le volet Ordinateurs virtuels, cliquez avec le
bouton droit sur 10557A-GEN-DEV, puis cliquez sur Rétablir.
4. Dans la boîte de dialogue Rétablir l’ordinateur virtuel, cliquez sur Rétablir.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans
d une application Webb Microsoft® ASP.NET 4.0 8-75

Récap
pitulatif de l'atelier pratiq
que

Parcou
urir les question
ns et les répon
nses
1. Com
mment activer la pagination d'un contrôle GridVieew ?
2. Com
mment se conneccter à une base dee données SQL Server
S ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
8-76 Introductionn au développement Webb avec Microsoft® Visuall Studio® 2010

Récapitu
ulatif du m
module et
e élémen
nts à retenir

Parcou
urir les question
ns et les répon
nses
1. Com
mment créer une connexion à unee base de donnéess dans Visual Studio 2010 ?
2. Quel objet permet d de faciliter le transsport de la source de données à un
u objet
DattaSet, et inversem
ment ?
3. Quelle est la princip
pale différence en
ntre un DataSet ett un objet DataR
Reader ?
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT
Gestion des données dans une application Web Microsoft® ASP.NET 4.0 8-77

Problèmes et scénarios réels


1. Vous devez vous connecter à une base de données Oracle. Quelle est la
méthode la plus simple pour y parvenir ?
Utilisez le fournisseur de données .NET Framework OLE DB.
2. Sur un serveur de production, sur lequel de nombreuses connexions sont
ouvertes vers la base de données, il semble qu'après quelques jours d'activité,
le serveur Web et le serveur de base de données ralentissent en raison de
l'augmentation de la quantité de mémoire et des ressources de connexion
utilisées. Quelle est la première chose à vérifier ?
Vérifiez que vous avez correctement fermé les objets de connexion.

Meilleures pratiques
Indiquez quelques-unes des meilleures pratiques s'appliquant au contexte de vos
propres situations professionnelles.
• Les objets de connexion doivent toujours être supprimés de manière explicite.
• Utilisez un objet DataTable lorsque vous devez uniquement utiliser le
contenu d'une seule entité de base de données localement, et non un objet
DataSet. Cela permet de sauvegarder les ressources.
• Autant que possible, placez la chaîne de connexion dans le fichier web.config,
ce qui la rend accessible à l'ensemble de l'application Web et permet à un
administrateur de modifier le fichier simplement, sans devoir recompiler le code.
UTILISATION RÉSERVÉE À L'INSTRUCTEUR MCT UNIQUEMENT

Vous aimerez peut-être aussi