Transcript
Page 1: ASP.NET Part 1 - Aide scolaire - 2009 - FR

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

Résumé de cours – les points suivants sont étudiés dans ce document: Mettre en place une solution ASP.NET sur Visual Studio 2008. Mettre en place une MasterPage. Ajouter des pages ASPX en fonction de la MasterPage. Prévoir un thème et l’associer à notre solution : lui placer un fichier CSS et un fichier SKIN. Connaître la gestion des pages ASPX : comment la mettre en mode source, en mode design,

savoir utiliser du code-behind. Savoir mettre en place des contrôleurs dans les pages ASPX : label, textbox, dropdownlist… Utiliser le fichier web.config en lui demandant la mise en place d’un debug, d’un thème ou

encore de variables (AppSettings). Savoir gérer les AppSettings au niveau de votre code-behind. Savoir utiliser des objets serveurs dont notamment Response. Comprendre la notion de PostBack et la faire appliquer sur les pages. Utiliser des Validators sur vos contrôleurs : RequiredFieldValidator, RangeValidator,

CustomValidator… Savoir mettre en place un résumé des Validators : ValidationSummary. Savoir utiliser un ObjectDataSource, savoir remplir un contrôle avec l’aide du

ObjectDataSource. Mettre en place des contrôles utilisateurs personnalisés : les fichiers ASCX. Savoir mettre en place un SiteMap et construire via ce SiteMap, un menu.

Page 2: ASP.NET Part 1 - Aide scolaire - 2009 - FR

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

C’est très 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 préférence, utiliser le 3.5) ainsi que le type de langage (C# ou VB.NET).

Ici, ma solution sera nommée « MerciSonny ».

Votre solution au départ ne contient que très peu de chose. De préférence, supprimez la page Default.aspx.

Mettre en place une MasterPage.

La mise en place d’une MasterPage demande d’aller sur la racine de votre solution (là ou vous avez C:\...\NomWebSite) et clic-droit : Add New Item.Choisir « MasterPage » et laisser le reste par défaut.Remarquez que la case « Place code in separate file » est cochée pour permettre la mise en place du code-behind (= partie programmable en C#) dans une classe nommée : NomMaster.master.cs (ou .vb si VB.NET). La logique est la même pour les pages ASPX (nommées Web Form).

Page 3: ASP.NET Part 1 - Aide scolaire - 2009 - FR

Votre MasterPage est une sorte de modèle de vos pages. Si vous l’associez à une page ASPX (Web Form), la page ASPX va obligatoirement contenir tous les éléments présents dans la MasterPage. La MasterPage est donc très intéressante pour la mise en page par défaut de toutes vos pages ( : pour l’entête du site, le pied du site, le menu etc).Les balises ContentPlaceHolder de la MasterPage sont les endroits qui pourront être modifiées par chaque page ASPX.Attention à ne mettre aucune balise dedans étant données qu’elles doivent être redéfinies 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.

Page 4: ASP.NET Part 1 - Aide scolaire - 2009 - FR

Ajouter des pages ASPX en fonction de la MasterPage.

Pour créer une page ASPX dépendante 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 dépendre de notre MasterPage !

Penser ensuite à choisir la MasterPage adéquate.

Le résultat de votre page devrait ressembler à ceci :

Vous remarquez qu’une page dépendante d’une MasterPage ne peut avoir de balises HTML que dans les Content, qui sont les éléments modifiables de notre MasterPage (en effet, elles dépendent des ContentPlaceHolder via ContentPlaceHolderID).Si vous placer des balises en dehors des Content, votre solution ne fonctionnera pas !

Prévoir un thème et l’associer à 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 nécessaire en ASP.NET de mettre en place un thème. Pour cela, il faut d’abord déployer un répertoire App_Themes.Pour ceci, aller sur la racine de votre solution et cliquez-droit : faire Add ASP.NET Folder > Theme.Un répertoire App_Themes sera automatiquement créé ainsi qu’un premier thème.

Dans ce premier thème, cliquer droit : faire Add New Item > StyleSheet. Ceci ajoute un CSS.

Page 5: ASP.NET Part 1 - Aide scolaire - 2009 - FR

Maintenant, mettons en place un skin. Dans le premier thème, cliquer droit : faire Add New Item > Skin File.

Les fichiers CSS fonctionnent comme en HTML classique : n’oubliez pas que l’attribut « id » d’un élément HTML demande d’utiliser dans le CSS, « #valeurID » et en ce qui concerne l’attribut « class » d’un élément HTML demande d’utiliser dans le CSS, « .valeurClass ».

En ce qui concerne le skin, le but c’est de pouvoir gérer le style de tous les contrôleurs ASP.NET (Label, TextBox, DropDownList etc) associés au thème. Malheureusement, un fichier skin ne possède pas l’auto-complétion (donc préparer tout sur une page ASPX et copier le direction le fichier skin en enlevant évidemment l’attribut ID et l’attribut Text).

Exemple de CSS :

Exemple de skin :

Attention : dans un fichier skin, n’oubliez surtout pas l’attribut runat= « server ».

A ce moment là, nos CSS et skin ne sont pas encore associées à 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 !

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

Il faut savoir qu’une page ASPX contient des balises HTML de deux types : les balises classiques (div, span…) et les balises dîtes contrôleurs. Les balises contrôleurs seront vues juste après.

Ces balises peuvent être mises de deux manières : en les tapant dans la source de la page ou en les glissant/déposant en mode design.

Page 6: ASP.NET Part 1 - Aide scolaire - 2009 - FR

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.

Page 7: ASP.NET Part 1 - Aide scolaire - 2009 - FR

Pour glisser/déposer une balise/un contrôleur en mode design, penser à placer votre Toolbox (View > Toolbox) [ou raccourci clavier : Ctrl+W puis X].

Une page ASPX ne se gère jamais toute seule, il y a également la présence de code, dans un fichier séparé (si on a choisi l’option de le séparer) qui se nomme le code-behind. Pour l’ouvrir, il suffit d’aller sur votre page ASPX et cliquer sur le + qui est devant.Double cliquer ensuite sur l’élément nommé en XXX.aspx.cs (ou .vb).

Remarque : Dans le code-behind, vous pouvez appeler tout contrôleur possédant un attribut ID.

Le code-behind contient par défaut la méthode Page_Load(object sender, EventArgs e). Elle peut contenir d’autres méthodes venant des contrôleurs.

Ex de code-behind :

Savoir mettre en place des contrôleurs dans les pages ASPX : label, textbox, dropdownlist…

Dans les pages ASPX, on peut mettre des contrôleurs qui sont des éléments en fait gérés par des classes mais totalement invisibles pour nous.Les contrôleurs commencent toujours par <asp :XXX> (XXX = Label etc).Attention : toujours mettre l’attribut runat= « server » sinon ça ne fait rien !

Les contrôleurs les plus importants à retenir sont : Label : met en place du texte non éditable. TextBox : met en place une boîte à texte. Button : met en place un bouton d’envoi/de validation. DropDownList : met en place une liste déroulante.

Voici sur une page ASPX, en source, comment un TextBox se présente :

Remarque : L’attribut ID d’un contrôleur permet de l’utiliser dans le code-behind.

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

Page 8: ASP.NET Part 1 - Aide scolaire - 2009 - FR

Premier point : glisser/déposer le bouton.

Mettez vous sur votre bouton en mode design et aller voir ses Propriétés, cliquer sur l’éclair puis double-cliquer sur « Click »…

Résultat dans votre code behind de la page :

Maintenant, regarder également la source de votre bouton sur la page ASPX, l’événement a été lié à notre bouton :

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

Utiliser le fichier web.config en lui demandant la mise en place d’un debug, d’un thème ou encore de variables (AppSettings).

Le fichier web.config est un fichier présent par défaut dans votre projet. Ce qui nous intéresse c’est de prévoir des éléments pour le site : ceci seront dans la balise <system.web>.

Page 9: ASP.NET Part 1 - Aide scolaire - 2009 - FR

Pour mettre en place du debug dans notre solution, il faut penser à régler la balise <compilation> de <system.web>.

Maintenant, nous avons auparavant vu qu’il est impossible de mettre un thème sur une MasterPage. Et bien, ce sera possible via la balise <pages> de <system.web>.

Evidemment, l’attribut theme prend comme valeur le nom d’un de vos thèmes.

Maintenant, il faut savoir qu’il est également possible de placer des valeurs utilisables dans nos pages, ceci via la balise <appSettings> suivi de balises <add>. ATTENTION : il ne faut pas le mettre dans <system.web> mais dans <configuration> !Voyons un exemple :

Ici je joins à ma clé « Sonny », une valeur « MyPassword ».

Voyons maintenant comment intégrer ça dans notre code-behind :

ATTENTION : par défaut, WebConfigurationManager n’est 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 précise la clé.

Savoir utiliser des objets serveurs dont notamment Response.

Si je veux passer d’une page ASPX A vers une page B, il me faut un événement déclenchant une réponse du serveur à l’action cliente. Pour cela, il suffit de gérer des objets serveurs.Là je me penche que sur Response mais il existe Session, Request, Application et Server.Via Response, je peux donc gérer ce que le serveur donne au client.

Pour cela, faisons nous même un événement (clic sur un bouton par exemple) qui permet de répondre d’aller à une autre page. Voici comment on ferait :

On redirige vers une page présente dans notre solution.

Comprendre la notion de PostBack et la faire appliquer sur les pages.

Le PostBack est en fait la réponse automatique à une action client. Cette réponse est souvent de naviguer vers une autre page ou bien de revenir sur la page en cours.Il n’y a rien a gérer sauf de préciser la page où il faut revenir et également la mise en place du PostBack via l’attribut AutoPostBack (à mettre à true).

Utiliser des Validators sur vos contrôleurs : RequiredFieldValidator, RangeValidator, CustomValidator…

Les Validators ont pour but de valider un contrôle. Très souvent le contrôle à valider est un TextBox.

Page 10: ASP.NET Part 1 - Aide scolaire - 2009 - FR

Un Validator est en soi un contrôle : <asp :XXXValidator>.Il en existe plusieurs dont :

RequiredFieldValidator : force à mettre une valeur dans le contrôle. RangeValidator : la valeur (si remplie) doit être entre la valeur minimale et la valeur

maximale. CompareValidator : la valeur (si remplie) doit être égale à la valeur placée dans ce validator. CustomValidator : la valeur va passer une validation selon du code javascript et/ou code-

behind personnalisé.

ATTENTION : Un CustomValidator ne gérant que du code behind ne sera lancé QUE SI les autres Validators ont été validés.

Autre note importante : un Validator doit dépendre d’un autre contrôle. Pour cela mettre l’attribut ControlToValidate= « idDuControleAValider ».Pour dire à l’utilisateur pourquoi le Validator considère son entrée non valide, il faut mettre l’attribut ErrorMessage suivi d’un message d’erreur.Une fois de plus, ne pas oublier l’attribut runat= « server » !

Petit exemple de RequiredFieldValidator rattaché à un TextBox :

Vous pouvez générer un résumé des messages d’erreurs des Validators via le contrôle ValidationSummary.

Savoir utiliser un ObjectDataSource, savoir remplir un contrôle avec l’aide du ObjectDataSource.

Mettre en place des contrôles utilisateurs personnalisés : les fichiers ASCX.

Pour ces deux là, je ne vais pas les étudier dans ce mail. Sachez que un fichier ASCX permet de mettre en place son propre contrôleur.L’ObjectDataSource sera simplement une liste/une collection d’éléments.

Sachez également qu’une DropDownList peut prendre une DataSource en charge et ainsi obtenir les valeurs de cette DataSource (dans ce cas, faut quand même penser à gérer les propriétés DataNameField et DataValueField).

Savoir mettre en place un SiteMap et construire via ce SiteMap, un menu.

Pour créer un SiteMap, il faut mettre en place un fichier XML nommé : web.sitemap. Celui-ci est unique pour un projet et se fait en allant sur la racine du projet, clic-droit : Add New Item > Site Map.Dans ce fichier, vous trouverez un siteMapNode racine (qui est unique) qui contient d’autre siteMapNode.Ceux-ci doivent être remplis par une URL permettant d’accéder à la page puis un titre pour les faire apparaître sur le menu.

Exemple :

Page 11: ASP.NET Part 1 - Aide scolaire - 2009 - FR

De « Accueil », je peux aller vers « Default ».

Maintenant, il faut savoir qu’on peut le mettre en place avec 3 contrôles : Menu, TreeView et SiteMapPath (partie Navigation dans Toolbox).Le Menu et le TreeView nécessite qu’on leur créé un SiteMapDataSource et qu’on leur attribue la DataSource.SiteMapPath quant à lui ne demande aucune modification, juste le placer.

Exemple de Menu :

A savoir : Dans le SiteMapDataSource, il existe une propriété capable d’éviter la présence de l’élément racine : ShowStartingNode (true ou false).


Top Related