1 Des contrôles serveurs spécialisés
1.1 Literal
1.2 Table, TableRow, TableCell
1.3 Image
1.4 ImageButton
1.5 ImageMap
1.6 Calendar
1.7 FileUpload
1.8 Panel
1.9 MultiView et View
1.10 Wizard
1.11 XML
2 Le bind, qu’est-ce ?
3 Les contrôles serveur Data-Bound
3.1 Introduction
3.2 Utilisation d’une collection pour le bind
3.3 La classe ListControl
3.3.1 DropDownList
3.3.2 ListBox
3.3.3 CheckBoxList et RadioButtonList
3.3.4 BulletedList
3.3.5 AdRotator
3.4 CompositeDataBoundControl
3.4.1 GridView
3.4.2 DetailsView
3.4.3 FormView
3.5 HierarchicalDataBoundControl
3.5.1 TreeView
3.5.2 Menu
4 Conclusion

Des contrôles serveurs spécialisés

Rappel : On peut ajouter un contrôle serveur grâce à un drag & drop depuis la ToolBox.
1.1 Literal
Tout comme le Label, le contrôle serveur Literal va afficher du texte. A la différence du Label, qui lui va rajouter des balises <span></span> dans le code source, le contrôle serveur Literal ne va rajouter aucun code HTML. Ce qui veut dire qu’il est impossible de lui appliquer un style. On peut en revanche lui appliquer un ID et donc faire appel à lui depuis le code behind pour changer ses propriétés (comme Text, Mode, …).
1.2 Table, TableRow, TableCell
Un tableau est un bon moyen pour mettre en forme/présenter des informations à l’utilisateur.
Pour cela le contrôle serveur Table crée un tableau. TableRow correspond à une nouvelle ligne du tableau et TableCell correspond à une nouvelle cellule (plus exactement il fait une colonne comme en HTML).
Donc dans le Table on a une balise racine Table, puis des TableRow qui contiennent des TableCell. Il existe aussi des balises comme TableHeaderRow et TableFooterRow. TableHeaderRow est le Header du tableau. Il se situe donc en haut de celui-ci (c’est le titre de chaque colonne) : il correspond aux th en HTML. Le TableFooterRow fonctionne lui aussi comme en HTML, c’est-à-dire qu’il contient des cellules normales (TableCell).
1.3 Image
On l’utilise pour afficher une image sur la page. Ce contrôle génère une balise HTML <img />.
Important : Il n’existe pas d’évènement onclick sur un contrôle Image. Pour l’avoir, il faut utiliser les contrôles ImageButton ou ImageMap que nous verrons dans les deux prochaines parties. Ces contrôles permettent de récupérer les coordonnées du click.
1.4 ImageButton
Il hérite de la classe Image. Il possède donc tout d’une image (ImageUrl, AlternateText, ….) mais sur laquelle on peut cliquer. Il va donc effectuer un PostBack de la page. Ce contrôle serveur va générer une balise de type <input type= »image » />.
En revanche il possède un évènement click et command. Nous avons déjà parlé de l’évènement click dans les modules précédents. L’évènement command fait référence à l’activation d’un contrôle. Par exemple, on active un Button ou un RadioButton en cliquant dessus, un DropDownList en changeant la sélection …
1.5 ImageMap
ImageMap hérite lui aussi de la classe Image, il possède donc la plupart des propriétés d’Image. Ce contrôle serveur sert à définir une zone cliquable sur une image. Ce contrôle va rajouter l’attribut usemap sur la balise HTML img : <img usemap= »NomMap » /> (avec comme valeur le name de la map) et une balise <map name= »NomMap »> qui contiendra des balises area dans le code source. Mais vous n’avez pas à vous en soucier car c’est du code généré automatiquement.
1.7 FileUpload
FileUpload est un contrôle qui va afficher une TextBox avec un bouton « Parcourir » qui va permettre de sélectionner un fichier de notre disque dur et de l’envoyer (il ajoute un <input type= »file » dans le code source). Une fois le fichier téléchargé il faudra vérifier que le fichier ne présente aucun risque pour le serveur et qu’il correspond à ce que l’on attend (extension, type MIME ect …). Avant cela voyons son fonctionnement un peu plus en détails.
Il va générer automatiquement le code pour créer la TextBox et le bouton « Parcourir ». Pour le bouton « Envoyer » il faut le rajouter soit même. Ce n’est qu’un contrôle de type Button auquel on met le texte « Envoyer » et qui va effectuer le PostBack. L’utilisateur va parcourir ses fichiers, sélectionner le bon et cliquer sur « Envoyer ». C’est lors du PostBack que le fichier sera envoyé au serveur.
1.8 Panel
Un Panel est un contrôle serveur utilisé comme un conteneur. C’est à dire que l’on va le placer à un endroit et qu’il contiendra d’autres contrôles (cela peut servir par exemple à afficher, cacher un groupe de contrôle). Nous verrons plus tard une autre utilisation lors des master pages. Il va générer dans le code source des balises <div>. La propriété BackImageUrl permet de définir l’image de fond du Panel et HorizontalAlignement définit l’alignement horizontal du Panel.
1.9 MultiView et View
Un contrôle serveur View est un conteneur au même titre que Panel à la différence près qu’ilpossède un index. Seul un View peut être affiché. Par conséquence, il est pratique d’afficher un Viewà la suite de l’autre. Un View ne peut se situer que dans un MultiView.A la différence de Panel, View ne crée aucune balise dans le code source. Il permet surtout de gérerun groupe de vue qui seront affichées les unes après les autres, système qui devra être géré par lecode behind. Le plus important à retenir est qu’il ne peut y avoir plusieurs View visible en mêmetemps. Les View sont numérotées en commençant par 0. Une fois le(s) View dans le MultiView il fautque la propriété ActiveViewIndex du MultiView soit initialisée sinon aucun des View ne sera affiché.Elle prend comme valeur le numéro d’index d’un des View.
1.10 Wizard
Il nous arrive d’avoir besoin de demander beaucoup de données à l’utilisateur par exemple lors d’un enregistrement sur un site, pour remplir un formulaire particulièrement long et même pour les sites de ventes (la succession de : vue du panier, confirmation, données sur où livrer et autres, paiement, facture). Pour cela le contrôle serveur Wizard est pratique puisqu’il permet de faire un formulaire pas à pas. Il va permettre tout comme avec des View d’afficher des vues ou écran pas à pas (l’une après l’autre). Ainsi on pourra demander beaucoup d’informations à l’utilisateur tout en restant dans quelque chose qui est organisé. On aurait pu faire de même sur plusieurs pages ou en utilisant les View. Mais là nous récupérons toutes les données sur la même page en utilisant un contrôle qui regroupe déjà toutes les fonctionnalités dont on a besoin pour cela. Ce contrôle hérite directement de la classe Control.
1.11 XML
Il est utilisé pour afficher le contenu d’un document XML ou le résultat de l’exécution d’une transformation Extensible Stylesheet Langage (XSL). Un fichier XSL est un peu comme du CSS : il va permettre de définir la mise en page du XML. Toutefois il permet aussi de modifier totalement la structure du XML, ce qui permet depuis le XML de générer d’autres types de document comme du HTML, PostScript, Tex, RTF …..).

…

Si le lien ne fonctionne pas correctement, veuillez nous contacter (mentionner le lien dans votre message)
Les contrôles serveurs spécialisés (Cours PDF)