Académique Documents
Professionnel Documents
Culture Documents
Microsoft France
Microsoft
Sommaire
1
INTRODUCTION......................................................................................................................................................3
1.1
1.2
CONTEXTE FONCTIONNEL.....................................................................................................................................3
CONTEXTE TECHNIQUE.........................................................................................................................................3
Automne 2005
Page 2 sur 19
Microsoft
1 Introduction
Cet atelier sinscrit dans le cadre du tutorial de dcouverte de ASP.NET 2.0 dont lobjectif est la construction
dune application web pas pas.
Les exercices de latelier 1 se proposent de vous prsenter les toutes premires tapes de cration dune
application web avec ASP.NET 2.0 et de vous familiariser avec loutil de dveloppement Visual Web
Developer Express Edition.
Vous trouverez galement dans ces exercices une prsentation de loutil de dveloppement Visual Web
Developer Express Edition, tout particulirement cible sur quelques nouveauts sympathiques de cette
version de loutil par rapport la prcdente.
Automne 2005
Page 3 sur 19
Microsoft
Crer une application web avec Visual Web Developer Express Edition.
Objectif
Lobjectif de cet exercice est de crer un projet vierge avec Visual Web Developer Express Edition pour votre
application web.
Contexte fonctionnel
Lapplication sappelle AffairesSansRisque.
Droulement de lexercice :
1. Lancez Visual Web Developer Express Edition.
2. Crez un nouveau projet de type Web :
Cliquez le menu Fichier > Nouveau Site Web
Slectionnez le modle de projet web Site Web vide.
Remarquez le modle Starter kit de site Web personnel qui est un exemple dapplication complet et
facilement extensible de site personnel. Pour en savoir plus et dcouvrir dautres Starter kit existants, la
communaut ASP.NET vous invite vous rendre sur http://beta.asp.net/default.aspx?tabindex=4&tabid=41.
Visual Web Developer Express Edition offre la possibilit de crer une application web sur la base
dun simple rpertoire de fichiers de votre ordinateur. Il nest pas question de dvelopper sans serveur web,
mais il se trouve que Visual Web Developer Express Edition contient son propre serveur web ASP.NET
intgr ce qui permet de se passer de Internet Information Server pour dvelopper et tester son application !
Autres alternatives :
Vous pouvez choisir dutiliser IIS (localement sans les extensions FrontPage) en slectionnant HTTP ou de
travailler sur un serveur distance (via HTTP ou mme un serveur FTP).
Automne 2005
Page 4 sur 19
Microsoft
Si vous ne savez pas quel langage choisir, vous pouvez consulter le livre blanc Diffrences entre
Visual Basic.NET et Visual C#.NET sur le site Aide et Support de Microsoft France.
Cliquez sur OK. Le contenu de lExplorateur de solutions pointe sur votre rpertoire de
travail et est vide.
Pour ajouter un lment existant dans votre application, par exemple une image ou une page web
existante, il suffit de copier le fichier correspondant dans le rpertoire de lapplication AffairesSansRisque
depuis lExplorateur de Windows. Pour le voir apparatre dans votre projet il faut cliquer sur licne
Actualiser
de lExplorateur de Solutions de Visual Web Developer. Vous pouvez aussi faire un
copier/dplacer du fichier directement dans lExplorateur de solutions de Visual Web Developer.
Un fichier de solution dextension .sln est constitu par Visual Web Developer dans le rpertoire
C:\ Documents and Settings \ <Propritaire> \ Mes documents \ Visual Studio 2005 \ Projects \
AffairesSansRisque.
Note :
Automne 2005
Page 5 sur 19
Microsoft
Objectif
Lobjectif de cet exercice est de crer une premire page web dans lapplication web cre prcdemment.
Contexte fonctionnel
Le site doit avoir une page daccueil qui sera charge par dfaut. Elle sappelle Default.aspx. Pour linstant
elle est vierge.
Droulement de lexercice :
1. Crez la page Default.aspx depuis lExplorateur de solutions :
Faites un clic droit sur le projet > Ajouter un nouvel lment.
Chaque page de votre application web peut tre dveloppe dans un langage diffrent ! Trs utile
pour dvelopper plusieurs lorsquon a des langages de prdilection diffrents ou pour rcuprer une page
existante crite dans un autre langage ...
Cochez Placer le code dans un fichier distinct. Puis cliquez Ajouter.
Automne 2005
Page 6 sur 19
Microsoft
Remarquez la balise < !DOCTYPE> qui apparat. Vous constatez que le runtime ASP.NET 2.0 gnre
un flux qui respecte la norme XHTML 1.1 (plus propre, compatibilit totale avec les navigateurs etc)
Basculer en mode Design, avec longlet au bas gauche de la page, pour voir la
reprsentation graphique de la page avec lditeur WYSIWYG de Visual Web Developer. La
page est vierge pour linstant.
Lextension du
fichier (.cs ou .vb)
dpend du
langage choisi.
Automne 2005
Page 7 sur 19
Microsoft
Code VB.NET :
Note :
Automne 2005
Page 8 sur 19
Microsoft
Objectif
Lobjectif de cet exercice est de parcourir quelques unes des nouvelles fonctionnalits de Visual Web
Developer Express Edition en matire de construction de cration de contenu dans une page web. En
finalit, vous allez dessiner un contrle serveur de type Label sur la page default.aspx pour afficher un
message de bienvenue.
Contexte fonctionnel
Lide dans cet exercice, est avant toute chose dutiliser lditeur de pages de VWD. Pour cela, on imagine
simplement que la page Default.aspx de votre application contient un message de bienvenue sur le site.
Droulement de lexercice :
1. Ouvrez la page Default.aspx dans le concepteur de vue en mode Design :
.
Concepteur
de vue.
Affiche
le code.
Automne 2005
Depuis la bote outils, faites un glisser dplacer dun contrle Label de la catgorie
Standard sur la page.
Tutorial Dcouverte de ASP.NET 2.0
Page 9 sur 19
Microsoft
Notez que les contrles sont organiss dans la bote outils par thme. Les diffrentes rubriques font
directement rfrence aux nouveaux services de ASP.NET 2.0, tels que le service de navigation (avec les
contrles de menu), le service de connexion (avec les contrles de scurit)etc. Vous dcouvrirez tous
ces services dans les ateliers suivants.
Si lon regarde dun peu plus prt le source de la page, vous constatez que les balises de contrles
server commence par <asp : suivi du nom du contrle. En effet, le source html que vous voyez ici nest
pas tout fait le flux final que vous obtiendrez dans le navigateur. Chacun des contrles server va devoir
donner sa reprsentation html au runtime ASP.NET de faon construire la page dfinitive de rponse
renvoye au navigateur client. Cest dailleurs pour cela quon les appelle des contrles server car ils
sont instancis en mmoire au moment du traitement de la page ct serveur puis meurent juste aprs
avoir donn leur rendu en html.
Schmatiquement, cela revient :
1. Requte page.aspx
Serveur
web
Navigateur
client
5. Rponse en html 1.1
Notez galement que le format de votre html est prserv lorsque vous basculez dun mode lautre.
Lorsque vous passez une balise de fin la ligne avec un retour chariot, elle y est encore aprs un aller
retour en mode Design .
Automne 2005
Page 10 sur 19
Microsoft
Curseur sur le
premier label.
Balises englobantes
correspondantes.
5. Utilisez la fonctionnalit IntelliSense qui est maintenant disponible partout (pas seulement dans la
fentre de code-behind) :
En mode Source, supposons que vous voulez ajouter un attribut bgcolor la balise
<body> : positionnez le curseur droite de la lettre y et cliquez la barre despace du clavier
pour crire le nom de lattribut. LIntelliSense se dclenche et vous propose une liste
dattributs pour la balise.
Tapez bg. LIntelliSense se positionne directement sur le premier attribut commenant par
ces lettres. Avec la touche Tab du clavier (ou la barre despace ou directement en tapant =),
lIntelliSense rcupre lintgralit de lattribut pour vous.
Automne 2005
Tapez =. LIntelliSense vous propose alors toutes les variables associes lattribut.
Page 11 sur 19
Microsoft
Pour fonctionner, lIntelliSense se base sur un schma HTML associ au type de navigateur ou au
standard html attendu par le poste client. Le schma lui permet de vous proposer les attributs et variables
supports par le navigateur et de vous aider en soulignant les lments qui posent problme lorsque vous
faites une erreur (ou pour vous suggrer un commentaire).
Changez le schma de validation utilis par dfaut par lditeur bas sur Internet Explorer
6.0. Dans la barre doutils Modification de la source HTML, slectionnez dans la liste
droulante Schma cible valider le schma de navigateur bas sur lHTML 4.01.
Barre doutils
Modification
de la source
HTML
Attention, la validation de lhtml par rapport au schma nest propose par VWD qu titre indicatif
uniquement.
Code VB.NET
Code C#
Automne 2005
Page 12 sur 19
Microsoft
Vous constatez que vous avez accs notamment directement aux IDs des contrles server de votre
page, savoir les deux contrles Label1 et Label2. A noter que lIntelliSense est videmment disponible
aussi dans le fichier de code-behind, Default.aspx.vb (ou .cs).
Vous pouvez utiliser la barre despace pour retrouver plus facilement les IDs de vos contrles ou
nimporte quel autre lment : il suffit de saisir les premires lettres du mot ; ds que vous tapez la barre
despace, lIntelliSense vous suggre tous les mots commenant par ces mmes lettres. Cest trs utile
lorsquon a oubli le nom exact des contrles ou notamment en C# o la casse des noms est importante !
Tapez la puis barre despace
Enfin, lIntelliSense est mme au rendez-vous dans un fichier de configuration (ou un fichier XML
contenant un schma), dans une feuille de style et lorsque vous vous battez avec les attributs lintrieur de
lattribut style des balises html ! Avec a on ne pourra plus jamais vous dire que vous ntes pas productif
6. Supprimer le second contrle Label de la page. Ne gardez que Label1 qui nous servira afficher un
message de bienvenue.
7. Supprimer la balise de script galement.
8. Sauvegardez tout.
Note :
Automne 2005
Page 13 sur 19
Microsoft
Objectif
Lobjectif de cet exercice est de comprendre comment lancer lexcution de lapplication AffairesSansRisque
et comment fonctionne la compilation.
Contexte fonctionnel
Nous allons afficher un message de bienvenue par lintermdiaire du contrle server de type Label dessin
prcdemment sur la page Default.aspx.
Droulement de lexercice :
1. Lancez lexcution de lapplication :
Menu Dboguer > Excutez sans dbogage (ou Ctrl+F5)
Pour lancer lapplication au besoin en mode dbogage (menu Dboguer > Dmarrer le dbogage
ou F5) vous tes invit activer le dbogage par lintermdiaire du fichier de configuration de lapplication.
Rpondez alors oui au message suivant :
Automne 2005
Page 14 sur 19
Microsoft
Une fois la page Default.aspx charge dans IE, vous remarquez que :
dans la coin bas gauche de Visual Web Developer, il est indiqu dbut de la gnration puis la
gnration a russi . Il y a donc bien eu une phase de COMPILATION de votre projet.
dans la zone de notification de la barre de tches de Windows XP, vous constatez que Visual Web
Developer a lanc une instance de son serveur web intgr pour vous permettre de tester lapplication.
Attention : ce mini serveur web local comporte quelques limitations et nest propos que pour vous
donner les moyens de dvelopper et tester vos applications sans IIS dans un premier temps. Par exemple, il
ne supporte pas la mtabase, il na pas la capacit denvoyer des emails ou il utilise lidentit de lutilisateur
connect au lieu du compte ASPNET(IIS5) ou NETWORK SERVICE(IIS6) pour sexcuter.
Automne 2005
Page 15 sur 19
Microsoft
Autre ide intressante : grce VWD et ce mini serveur, vous pouvez donc ouvrir nimporte quelle
page aspx (rcupre dun endroit quelconque) depuis lexplorateur Windows et lexcuter seule pour la
tester. En dautres termes, vous ntes pas obligs de compiler tout votre projet pour excuter et tester le
comportement dune page particulire
2. Trs important pour pouvoir observer la compilation dynamique dans la suite de lexercice : ne
fermez pas IE et garder la fentre ainsi affiche.
3. Vous allez maintenant rpondre lvnement de chargement de la page en mmoire de faon
afficher un message de bienvenue :
Afficher la page Default.aspx en mode Design et double cliquez nimporte o sur la page
pour faire apparatre la fentre de code behind et gnrer automatiquement la signature de
la procdure de rponse lvnement de chargement de la page (cest lvnement
associ par dfaut au double clic sur la page).
Code VB.NET
Code C#
Code VB.NET
Label1.Text = "Bienvenue sur le N1 des sites de bonnes affaires sans risque sur Internet"
Code C#
Label1.Text = "Bienvenue sur le N1 des sites de bonnes affaires sans risque sur Internet";
4. Sauvegardez la page.
5. Basculer sur Internet Explorer encore ouvert sur la page Default.aspx.
6. Cliquez sur Actualiser
Automne 2005
Page 16 sur 19
Microsoft
Vous constatez que le message saffiche. Pourtant vous navez pas compil votre code ni mme utiliser
Visual Web Developer pour lancer lexcution de la page. Cest magique ! Il se trouve que le serveur web
intgr Visual Web Developer a constat que vous aviez sauv la page et en a donc dduit quil fallait
redemander une compilation de celle-ci avant de la r-excuter. Cest le principe dit de la compilation
dynamique.
Evidemment en cas derreur de compilation, vous rcuprez un message directement dans IE du type :
Il manque
le t de
Text ici.
7. Dans IE, faites un clic droit sur la page > Afficher la source pour afficher le source HTML de la
page de rponse ainsi obtenue. Vous constatez que ASP.NET 2.0 a gnr de lHTML conforme la
norme XHTML 1.1.
Note :
Automne 2005
Page 17 sur 19
Microsoft
Automne 2005
Page 18 sur 19
Requte
dinterrogati
on
type
Microsoft
XPath.
Automne 2005
Page 19 sur 19