Admin CliCours
1 Présentation
2 Les User Controls
2.1 Créer et ajouter un User Control dans une page Web
2.2 Accéder aux données des User Controls
2.2.1 Accéder aux données dans les User Controls
2.2.2 Accéder aux données à l’extérieur des User Controls
2.2.3 Lever un évènement vers la page Web
3 Les Customs Web Controls et Composite Control
3.1 Contrôle Web personnalisé
3.1.1 Création d’une dll et ajout dans la ToolBox (boite à outils)
3.1.2 Personnalisé l’action du contrôle lors du Drag&Drop dans la page
3.2 Contrôle composé
4 Conclusion
Présentation
Lors du développement d’une solution, Visual Studio met à notre disposition une multitude d’outils pour la création de page Web. Par exemple les Label ou encore les TextBox que l’on peut incorporer dans notre solution par un simple Drag&Drop (glisser/déposer).
Ceci étant, on s’est aperçu que l’on perdait beaucoup de temps à coder les même choses mais pour des pages web différentes. Par exemple, on utilise très souvent des formulaires pour entrer des adresses, contenant un Label pour chaque instruction (adresse, code postal, ville etc…) et une TextBox pour chaque entrée de l’utilisateur: L’ASP.NET nous permet de créer nos propres contrôles que l’on va ajouter à notre solution.
Ainsi notre formulaire d’adresse deviendra accessible tout comme une TextBox mais restera un élément de notre solution.
Les User Controls
Les User Controls sont des templates (modèles/schémas) personnalisables que l’on va pouvoir ajouter à sa solution. Les User Controls pourront être constitués d’un ou plusieurs Controls proposés dans la boite à outils (TextBox, DropDownList,…). Ils pourront être utilisés autant de fois qu’on le souhaite pour un même projet.
En revanche, ils ne peuvent être utilisés que pour un seul projet. Si on veut réutiliser ce même contrôle dans d’autres projets, il faudra l’inclure dans chacun au préalable.
Créer et ajouter un User Control dans une page Web
Commençons par ajouter un nouveau Control à notre projet.
Tout d’abord faites un clic droit sur votre projet dans l’explorateur de Solution. Puis « Ajouter un nouvel élément ».
Ensuite Choisissez un Web User Control. Puis renommez-le (« MonControl.ascx » par exemple).
Du CodeBehind est automatiquement généré afin de pouvoir effectuer une gestion des évènements.
Nous y reviendrons plus tard.
Commençons par ajouter des éléments dans notre User Control. Pour cela passez en mode Design.
Dans cet exemple nous effectuerons un formulaire d’adresse pour récupérer les informations suivantes : NOM, Prénom, Adresse 1, Adresse 2, Code Postal, VILLE. Dans un souci d’esthétique nous mettrons tous nos éléments dans un tableau HTML pour que tous nos champs soient alignés.
Accéder aux données des User Controls
Il existe deux façons d’accéder aux données des User Controls. Bien entendu ces deux méthodes ne sont pas au choix, chacune présente un intérêt que l’on va déterminer au cours de cette partie.
Accéder aux données dans les User Controls
De façon très intuitive, il parait évident que l’on peut accéder aux données à l’intérieur de notre User Control via le CodeBehind dans le fichier MonControl.ascx.cs.
Comme nous sommes à l’intérieur de notre Control, on peut facilement accéder à tous ses attributs ainsi qu’à toutes ses méthodes privées. Il est, cela dit, fortement recommandé de créer des accesseurs (get/set) et de les utiliser même au sein de notre Control.
Pour les besoins de l’exemple suivant, nous allons réutiliser notre Control créé dans la partie précédente et y ajouter un Button puis un Label dans le but d’afficher dans ce Label nos entrées utilisateur du formulaire d’adresse.
Accéder aux données à l’extérieur des User Controls
Tout comme pour notre Control, ajoutons un Button et un Label à la page Default.aspx juste après notre control.
Pour pouvoir récupérer les données de votre Control, créer des accesseurs est maintenant, non plus fortement conseillé, mais indispensable. Pour accéder aux données de votre Control dans le CodeBehind il faudra commencer par donner l’ID de votre Control suivi de la méthode à utiliser :
MonControl1.maMethode(). <form id="form1" runat="server"> <div style="padding-top:5%;padding-left:10%"> <uc1:MonControl ID="MonControl1" runat="server" /> <br /> Evenement géré à l'extérieur de MonControl<br /> <br /> <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Envoyer adresse" /> <br /> <br /> <asp:Label ID="ShowAddress" runat="server"></asp:Label> <br /> <br /> </div> </form>
Lever un évènement vers la page Web
Lors de la création d’un contrôle, on peut facilement créer un Button, cela dit il n’est pas évident de prévoir comment celui-ci sera implanté. Afin de pallier à ce problème, il est possible de lever un évènement directement sur la page Web. Le code suivant va nous montrer comment gérer ce type de problème en passant par un delegate.
N.B. : Afin de bien comprendre cette partie il est nécessaire de connaitre et de comprendre l’utilité des delegates et des events.
Code du Control Test :
ASPX de Test.ascx <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Test.ascx.cs" Inherits="Test.Test" %> <p> Entrer Nom : <asp:TextBox ID="Nom" runat="server"></asp:TextBox> </p> <p> <asp:Button ID="SendNom" runat="server" Text="Button" onclick="SendNom_Click" /></p>
………
Si le lien ne fonctionne pas correctement, veuillez nous contacter (mentionner le lien dans votre message)Les contrôles Web personnalisés (1.97 MO) (Cours PDF)
