ASP.NET Part 1 - Aide scolaire - 2009 - FR

Embed Size (px)

DESCRIPTION

A tutorial I did for my school in 2008/2009 about ASP.NET. It is the 1st part and it's in french only. ------------------------------------------------------------ Un tutorial que j'ai fait pour mon école en 2008/2009 sur ASP.NET. C'est la première partie et c'est en français seulement.

Text of ASP.NET Part 1 - Aide scolaire - 2009 - FR

ASP.NET Aide scolaire Partie 1Par Sonny Brabez, pour les tudiants de SUPINFO.

Rsum de cours les points suivants sont tudis dans ce document:1. Mettre en place une solution ASP.NET sur Visual Studio 2008.1. Mettre en place une MasterPage.1. Ajouter des pages ASPX en fonction de la MasterPage.1. Prvoir un thme et lassocier notre solution: lui placer un fichier CSS et un fichier SKIN.1. Connatre la gestion des pages ASPX: comment la mettre en mode source, en mode design, savoir utiliser du code-behind.1. Savoir mettre en place des contrleurs dans les pages ASPX: label, textbox, dropdownlist1. Utiliser le fichier web.config en lui demandant la mise en place dun debug, dun thme ou encore de variables (AppSettings).1. Savoir grer les AppSettings au niveau de votre code-behind.1. Savoir utiliser des objets serveurs dont notamment Response.1. Comprendre la notion de PostBack et la faire appliquer sur les pages.1. Utiliser des Validators sur vos contrleurs: RequiredFieldValidator, RangeValidator, CustomValidator1. Savoir mettre en place un rsum des Validators: ValidationSummary.1. Savoir utiliser un ObjectDataSource, savoir remplir un contrle avec laide du ObjectDataSource.1. Mettre en place des contrles utilisateurs personnaliss: les fichiers ASCX.1. Savoir mettre en place un SiteMap et construire via ce SiteMap, un menu.

1. Mettre en place une solution ASP.NET sur Visual Studio 2008.

Cest trs simple, il suffit de faire: File > New > Web site.Ensuite, vous remarquez que le nom de votre site web sera en fait le chemin que vous lui mettez en place. De plus, vous pouvez choisir le framework sur lequel vous voulez travailler (de prfrence, utiliser le 3.5) ainsi que le type de langage (C# ou VB.NET).

Ici, ma solution sera nomme MerciSonny.

Votre solution au dpart ne contient que trs peu de chose. De prfrence, supprimez la page Default.aspx.

1. Mettre en place une MasterPage.

La mise en place dune MasterPage demande daller sur la racine de votre solution (l ou vous avezC:\...\NomWebSite) et clic-droit: Add New Item.Choisir MasterPage et laisser le reste par dfaut.Remarquez que la case Place code in separate file est coche pour permettre la mise en place du code-behind (= partie programmable en C#) dans une classe nomme: NomMaster.master.cs (ou .vb si VB.NET). La logique est la mme pour les pages ASPX (nommes Web Form).

Votre MasterPage est une sorte de modle de vos pages. Si vous lassociez une page ASPX (Web Form), la page ASPX va obligatoirement contenir tous les lments prsents dans la MasterPage. La MasterPage est donc trs intressante pour la mise en page par dfaut de toutes vos pages (: pour lentte du site, le pied du site, le menu etc).Les balises ContentPlaceHolder de la MasterPage sont les endroits qui pourront tre modifies par chaque page ASPX.Attention ne mettre aucune balise dedans tant donnes quelles doivent tre redfinies niveau page ASPX.

Ici, ma MasterPage permet une modification du title au niveau du head pour chacune de mes pages. Je pourrais galement modifier le contenu de mon unique div sur les pages ASPX.

1. Ajouter des pages ASPX en fonction de la MasterPage.

Pour crer une page ASPX dpendante de ma MasterPage, sur la racine de notre solution, faire: Add New Item et choisir Web Form.Attention: ici penser cocher la case Select master page pour la faire dpendre de notre MasterPage!

Penser ensuite choisir la MasterPage adquate.

Le rsultat de votre page devrait ressembler ceci:

Vous remarquez quune page dpendante dune MasterPage ne peut avoir de balises HTML que dans les Content, qui sont les lments modifiables de notre MasterPage (en effet, elles dpendent des ContentPlaceHolder via ContentPlaceHolderID).Si vous placer des balises en dehors des Content, votre solution ne fonctionnera pas!

1. Prvoir un thme et lassocier notre solution: lui placer un fichier CSS et un fichier SKIN.

Pour mettre en place du CSS en passant par un fichier CSS, il est ncessaire en ASP.NET de mettre en place un thme. Pour cela, il faut dabord dployer un rpertoire App_Themes.Pour ceci, aller sur la racine de votre solution et cliquez-droit: faire Add ASP.NET Folder > Theme.Un rpertoire App_Themes sera automatiquement cr ainsi quun premier thme.

Dans ce premier thme, cliquer droit: faire Add New Item > StyleSheet. Ceci ajoute un CSS.Maintenant, mettons en place un skin. Dans le premier thme, cliquer droit: faire Add New Item > Skin File.

Les fichiers CSS fonctionnent comme en HTML classique: noubliez pas que lattribut id dun lment HTML demande dutiliser dans le CSS, #valeurID et en ce qui concerne lattribut class dun lment HTML demande dutiliser dans le CSS, .valeurClass.

En ce qui concerne le skin, le but cest de pouvoir grer le style de tous les contrleurs ASP.NET (Label, TextBox, DropDownList etc) associs au thme. Malheureusement, un fichier skin ne possde pas lauto-compltion (donc prparer tout sur une page ASPX et copier le direction le fichier skin en enlevant videmment lattribut ID et lattribut Text).

Exemple de CSS:

Exemple de skin:

Attention: dans un fichier skin, noubliez surtout pas lattribut runat=server.

A ce moment l, nos CSS et skin ne sont pas encore associes notre solution. On peut le faire via la directive @Page dans une page ASPX, mais pas pour la MasterPage. Nous allons voir cela au moment de la partie sur web.config!

1. Connatre la gestion des pages ASPX: comment la mettre en mode source, en mode design, savoir utiliser du code-behind.

Il faut savoir quune page ASPX contient des balises HTML de deux types: les balises classiques (div, span) et les balises dtes contrleurs. Les balises contrleurs seront vues juste aprs.

Ces balises peuvent tre mises de deux manires: en les tapant dans la source de la page ou en les glissant/dposant en mode design.Pour pouvoir interchanger entre les deux, aller au niveau de votre page ASPX et double cliquez dessus.De base, vous tes en mode source. En bas gauche, vous trouverez le moyen de mettre en mode design ou les deux ensembles.

Version source.

Version design.

Pour glisser/dposer une balise/un contrleur en mode design, penser placer votre Toolbox (View > Toolbox) [ou raccourci clavier: Ctrl+W puis X].

Une page ASPX ne se gre jamais toute seule, il y a galement la prsence de code, dans un fichier spar (si on a choisi loption de le sparer) qui se nomme le code-behind. Pour louvrir, il suffit daller sur votre page ASPX et cliquer sur le + qui est devant.Double cliquer ensuite sur llment nomm en XXX.aspx.cs (ou .vb).

Remarque: Dans le code-behind, vous pouvez appeler tout contrleur possdant un attribut ID.

Le code-behind contient par dfaut la mthode Page_Load(object sender, EventArgs e). Elle peut contenir dautres mthodes venant des contrleurs.

Ex de code-behind:

1. Savoir mettre en place des contrleurs dans les pages ASPX: label, textbox, dropdownlist

Dans les pages ASPX, on peut mettre des contrleurs qui sont des lments en fait grs par des classes mais totalement invisibles pour nous.Les contrleurs commencent toujours par (XXX = Label etc).Attention: toujours mettre lattribut runat=serversinon a ne fait rien!

Les contrleurs les plus importants retenir sont: 1. Label: met en place du texte non ditable.1. TextBox: met en place une bote texte.1. Button: met en place un bouton denvoi/de validation.1. DropDownList: met en place une liste droulante.

Voici sur une page ASPX, en source, comment un TextBox se prsente:

Remarque: Lattribut ID dun contrleur permet de lutiliser dans le code-behind.

Essayons maintenant de mettre en place un vnement de clic sur notre bouton. Voici comment faire:

Premier point: glisser/dposer le bouton.

Mettez vous sur votre bouton en mode design et aller voir ses Proprits, cliquer sur lclair puis double-cliquer sur Click

Rsultat dans votre code behind de la page:

Maintenant, regarder galement la source de votre bouton sur la page ASPX, lvnement a t li notre bouton:

A savoir: Le code behind peut tre intressant pour remplir dynamiquement une DropDownList (au lieu des ListItem).

1. Utiliser le fichier web.config en lui demandant la mise en place dun debug, dun thme ou encore de variables (AppSettings).

Le fichier web.config est un fichier prsent par dfaut dans votre projet. Ce qui nous intresse cest de prvoir des lments pour le site: ceci seront dans la balise .

Pour mettre en place du debug dans notre solution, il faut penser rgler la balise de .

Maintenant, nous avons auparavant vu quil est impossible de mettre un thme sur une MasterPage. Et bien, ce sera possible via la balise de .

Evidemment, lattribut theme prend comme valeur le nom dun de vos thmes.

Maintenant, il faut savoir quil est galement possible de placer des valeurs utilisables dans nos pages, ceci via la balise suivi de balises . ATTENTION: il ne faut pas le mettre dans mais dans !Voyons un exemple:

Ici je joins ma cl Sonny, une valeur MyPassword.

Voyons maintenant comment intgrer a dans notre code-behind:

ATTENTION: par dfaut, WebConfigurationManager nest pas import. Il faut penser le rajouter en Using (clic-droit sur WebConfigurationManager et aller sur Resolve).Remarquer que je reprends ma valeur de mot de passe via un tableau AppSettings dont je prcise la cl.

1. Savoir utiliser des objets serveurs dont notamment Response.

Si je veux passer dune page ASPX A vers une page B, il me faut un vnement dclenchant une rponse du serveur laction cliente. Pour cela, il suffit de grer des objets serveurs.L je me penche que sur Response mais il existe Session, Request, Application et Server.Via Response, je peux donc grer ce que le serve