ASP.NET permet aux utilisateurs de créer des contrôles. Ces contrôles définis par l'utilisateur sont classés comme :
contrôle utilisateur
Contrôles personnalisés
Les contrôles utilisateur se comportent comme des pages ASP.NET miniatures ou des formulaires Web pouvant être utilisés par de nombreuses autres pages. Ceux-ci sont dérivés de la classe System.Web.UI.UserControl. Ces contrôles ont les propriétés suivantes :
Ils ont l'extension .ascx.
Ils ne peuvent contenir aucun tag, ni aucune balise.
Ils ont une directive Control au lieu d’une directive Page.
Pour comprendre ce concept, créons un contrôle utilisateur simple qui servira de pied de page d'une page Web. Pour créer et utiliser des contrôles utilisateur, procédez comme suit :
Créez une nouvelle application Web.
Cliquez avec le bouton droit sur le dossier du projet dans l’Explorateur de solutions et sélectionnez AJOUTER un nouvel élément.
Sélectionnez Contrôle utilisateur Web dans la boîte de dialogue Ajouter un nouvel élément et nommez-le footer.ascx. Initialement, footer.ascx contient uniquement une directive Control.
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="footer.ascx.cs" Inherits="customcontroldemo.footer" %>
Ajoutez le code suivant au fichier :
<table> <tr> <td align="center"> Copyright ©2010 TutorialPoints Ltd.</td> </tr> <tr> <td align="center"> Emplacement : Hyderabad, AP </td> </ tr></table>
Pour ajouter un contrôle utilisateur à votre page Web, vous devez ajouter une directive Register et une instance du contrôle utilisateur de page. Le code suivant montre les instructions :
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="customcontroldemo._Default" %><%@ Register Src="~/footer.ascx" TagName="footer" TagPrefix="Tfooter" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server"> <title> Page sans titre </title> </head> <body> <form id="form1" runat="server"> <div> <asp:Label ID="Label1" runat="server" Text="Bienvenue dans les didacticiels ASP.Net "></asp:Label> <br /> <br /> <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text ="Informations sur les droits d'auteur" /> </div> <Tfooter:footer ID="footer1" runat="server" /> </form> </body></html>
Une fois exécuté, le pied de page s'affiche et le contrôle est disponible sur toutes les pages de votre site.
Observez les points suivants :
(1) La commande Register spécifie un nom d'étiquette et un préfixe d'étiquette pour le contrôle.
<%@ Register Src="~/footer.ascx" TagName="footer" TagPrefix="Tfooter" %>
(2) Les noms de balises et préfixes suivants doivent être utilisés lors de l'ajout de contrôles utilisateur sur la page :
<Tfooter:footer ID="footer1" runat="server" />
Les contrôles personnalisés sont déployés en tant que collections distinctes. Ils sont compilés dans des bibliothèques de liens dynamiques (DLL) et utilisés comme tout autre contrôle de service ASP.NET. Ils peuvent être créés par l'une des méthodes suivantes :
En obtenant un contrôle personnalisé à partir d’un contrôle existant.
Créez un nouveau contrôle personnalisé en combinant deux ou plusieurs contrôles existants.
En l'obtenant de la classe de contrôle de base.
Pour comprendre ce concept, créons une classe personnalisée qui affichera simplement un message texte sur le navigateur. Pour créer le contrôle, procédez comme suit :
Créez un nouveau site Web. Cliquez avec le bouton droit sur la solution (pas sur le projet) en haut de l’arborescence dans l’Explorateur de solutions.
Dans la boîte de dialogue Nouveau projet, sélectionnez Contrôle serveur ASP.NET dans le modèle de projet.
Les étapes ci-dessus ajoutent un nouveau projet et créent un contrôle personnalisé complet pour la solution appelé ServerControl1. Dans cet exemple, permettez-moi de nommer le projet CustomControls. Pour utiliser ce contrôle, il doit être ajouté comme référence à la page Web avant d'être enregistré sur la page. Pour ajouter une référence à un projet existant, cliquez avec le bouton droit sur le projet (pas sur la solution) et cliquez sur Ajouter une référence.
Sélectionnez le projet CustomControl dans l'onglet Projets de la boîte de dialogue Ajouter une référence. L'Explorateur de solutions peut afficher des références.
Pour utiliser le contrôle sur la page, ajoutez une directive Register sous la directive @Page.
<%@ Register Assembly="CustomControls" Namespace="CustomControls" TagPrefix="ccs" %>
De plus, vous pouvez utiliser les contrôles comme n’importe quel autre contrôle.
<form id="form1" runat="server"> <div> <ccs:ServerControl1 runat="server" Text = "Je suis un contrôle serveur personnalisé" /> </div> </form>
Une fois exécuté, la propriété Text du contrôle s'affiche sur le navigateur, comme indiqué ci-dessous :
Dans l'exemple précédent, la valeur de la propriété Text de la classe personnalisée a été définie. ASP.NET ajoute cette propriété par défaut lors de la création du contrôle. Le code suivant après le fichier du contrôle le révèle.
en utilisant System;en utilisant System.Collections.Generic;en utilisant System.ComponentModel;en utilisant System.Linq;en utilisant System.Text;en utilisant System.Web;en utilisant System.Web.UI;en utilisant System.Web.UI.WebControls;espace de noms CustomControls{ [ DefaultProperty("Text")] [ToolboxData("<{0}:ServerControl1 runat=server></{0}:ServerControl1 >")] public class ServerControl1 : WebControl { [Bindable(true)] [Category("Appearance")] [DefaultValue("")] [Localizing(true)] public string Text { get { String s = (String)ViewState["Text"] ; return ((s == null) ? "[" + this.ID + "]" : s } set { ViewState["Text"] = valeur; } } remplacement protégé void RenderContents (sortie HtmlTextWriter) { sortie.Write (Texte);Le code ci-dessus est automatiquement généré pour un contrôle personnalisé. Des événements et des méthodes peuvent être ajoutés aux classes de contrôle personnalisées.
Étendons le contrôle personnalisé précédent nommé ServerControl1. Donnons-lui une méthode appelée checkpalindrome qui lui donnera la permission de vérifier le palindrome.
Le palindrome est un mot/valeur littérale qui s'écrit toujours de la même manière lorsqu'il est inversé. Par exemple, Malayalam, madame, saras etc.
Étendez le code de votre contrôle personnalisé et il devrait ressembler à ceci :
en utilisant System;en utilisant System.Collections.Generic;en utilisant System.ComponentModel;en utilisant System.Linq;en utilisant System.Text;en utilisant System.Web;en utilisant System.Web.UI;en utilisant System.Web.UI.WebControls;espace de noms CustomControls{ [ DefaultProperty("Text")] [ToolboxData("<{0}:ServerControl1 runat=server></{0}:ServerControl1 >")] public class ServerControl1 : WebControl { [Bindable(true)] [Category("Appearance")] [DefaultValue("")] [Localizing(true)] public string Text { get { String s = (String)ViewState["Text"] ; return ((s == null) ? "[" + this.ID + "]" : s } set { ViewState["Text"] = valeur; } } protected override void RenderContents(HtmlTextWriter output) { if (this.checkpanlindrome()) { output.Write("Ceci est un palindrome : <br />"); output.Write("<FONT size=5 color=Blue >"); sortie.Write("<B>"); sortie.Write(Texte); sortie.Write("</B>"); output.Write("</FONT>"); else { output.Write("Ce n'est pas un palindrome : <br />"); output.Write("<FONT size=5 color=red>"); sortie.Write("<B>"); sortie.Write(Texte); sortie.Write("</B>"); sortie.Write("</FONT>"); if (this.Text != null) { String str = this.Text; String strtoupper = Text.ToUpper(); char[] rev = strtoupper.ToCharArray(); rev); if (strtoupper == strrev) { return true; } else { return false } } else { return false;Lorsque vous modifiez le code d'un espace, vous devez construire la méthode en cliquant sur Build --> Build Solution afin que les modifications puissent être reflétées dans votre projet. Ajoutez une zone de texte et un contrôle de bouton à la page afin que l'utilisateur puisse fournir un morceau de texte. Lorsque le bouton est cliqué, il permet de vérifier le palindrome.
<form id="form1" runat="server"> <div> Saisissez un mot : <br /> <asp:TextBox ID="TextBox1" runat="server"> </asp:TextBox> <br /> < br /> <asp:Button ID="Button1" runat="server onclick="Button1_Click" Text="Check Palindrome" /> <br /> <br /> <ccs:ServerControl1 ID="ServerControl11" runat="server" Text = "" /> </div></form>
Le gestionnaire d'événements Click du bouton copie simplement le texte de la zone de texte dans la propriété text du contrôle personnalisé.
protected void Button1_Click(object sender, EventArgs e){ this.ServerControl11.Text = this.TextBox1.Text;}
Une fois exécuté, le contrôle détecte avec succès les palindromes.
Observez les points suivants :
(1) Lorsque vous ajoutez une référence à un contrôle personnalisé, elle est ajoutée à la boîte à outils et vous pouvez l'utiliser directement depuis la boîte à outils comme les autres contrôles.
(2) La méthode RenderContents de la classe de contrôle personnalisée a été remplacée et vous pouvez ajouter vos propres méthodes et événements.
(3) La méthode RenderContents prend un paramètre de type HtmlTextWriter, qui se chargera de l'afficher sur le navigateur.