FAQ ASP.NET/VB.NET
FAQ ASP.NET/VB.NETConsultez toutes les FAQ
Nombre d'auteurs : 38, nombre de questions : 369, dernière mise à jour : 16 juin 2021
Sommaire→WebForms→Contrôles→Contrôles personnalisés (Custom Controls)- Comment créer un composant personnalisé (customControl) ?
- Quelle est la différence entre un composant personnalisé et un contrôle utilisateur ?
- Comment utiliser un contrôle personnalisé ?
- Comment créer un composant personnalisé à partir d'un contrôle existant ?
- Comment faire le rendu d'un composant personnalisé ?
- Comment faire pour référencer automatiquement un contrôle dans toutes les pages ?
On crée un composant personnalisé lorsqu'on a besoin de créer un contrôle propre qui doit se comporter comme un WebControl.
Il s'agit de créer une classe qui hérite de WebControl.
add -> new item -> class
Public Class MonWebControl
Inherits WebControl
End ClassToute la logique interne doit ensuite etre implémentée, événement, rendu, etc ...
Voir aussi : quelle est la différence entre un composant personnalisé et un contrôle utilisateur ?
Un contrôle utilisateur (userControl) et un contrôle personnalisé (customControl) sont tous les deux des contrôles. Ils ont en général tous les deux pour but d'être des composants réutilisables.
Les contrôles utilisateurs sont en général des contrôles composés d'autres contrôles de base à utiliser dans des situations précises. Ca peut etre le cas par exemple pour un contrôle utilisateur de login, qui possède deux labels, deux textbox et un bouton valider, ainsi que le traitement associé au bouton valider.
Les contrôles personnalisés sont en général des contrôles unitaires qui font une tache unique et qui sont créés de A à Z ou en dérivant d'un contrôle existant. Il peut s'agir par exemple d'un textbox numérique qui sera exactement comme un textbox sauf qu'on pourra saisir uniquement des nombres.
En général, on crée un contrôle personnalisé lorsqu'il a pour vocation d'etre utilisé dans plusieurs applications. Si le contrôle ne doit etre utilisé que dans un seul site web, on créera en général un contrôle utilisateur.
Un contrôle utilisateur est une page dont l'extension est .ascx alors qu'un contrôle personnalisé sera une assembly
Il s'agit d'abord d'utiliser la directive Register en précisant un préfixe, le namespace et l'assembly qui contient le contrôle.
<%@ Register TagPrefix="Exemple" Namespace="testWeb" Assembly="testWeb" %>Pour utiliser le contrôle, on fera ensuite :
<Exemple:MonControle ID="monId" runat="server" ... />Il faudra faire dériver notre custom control du contrôle père et surcharger les méthodes qui nous intéressent.
Exemple : voici l'implémentation d'un custom control qui dérive du composant Image pour proposer l'ajout d'un rollover.
Public Class MonImageRollOver
Inherits Image
Private _imageOverUrl As String
Public Property ImageOverUrl() As String
Get
Return _imageOverUrl
End Get
Set(ByVal value As String)
_imageOverUrl = value
End Set
End Property
Protected Overrides Sub OnPreRender(ByVal e As System.EventArgs)
Attributes.Add("onmouseover", String.Format("this.src = '{0}'", _imageOverUrl))
Attributes.Add("onmouseout", String.Format("this.src = '{0}'", ImageUrl))
MyBase.OnPreRender(e)
End Sub
End ClassOn a rajouté ici la propriété ImageOverUrl et surchargé le rendu en ajoutant les attributs javascript onmouseover et onmouseout.
On pourra utiliser le contrôle de cette facon :
<Exemple:MonImageRollOver ID="IdImageRollover" runat="server" ImageUrl="image.gif" ImageOverUrl="image_Over.gif" />il faudra surcharger la méthode
Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)et utiliser l'objet HtmlTextWriter pour faire le rendu.
Exemple : voici l'implémentation d'un contrôle hyperlink de A à Z qui gère le rollover
Public Class MonHyperLinkRollOver
Inherits WebControl
Private _imageOverUrl As String
Public Property ImageOverUrl() As String
Get
Return _imageOverUrl
End Get
Set(ByVal value As String)
_imageOverUrl = value
End Set
End Property
Private _imageUrl As String
Public Property ImageUrl() As String
Get
Return _imageUrl
End Get
Set(ByVal value As String)
_imageUrl = value
End Set
End Property
Private _navigateUrl As String
Public Property NavigateUrl() As String
Get
Return _navigateUrl
End Get
Set(ByVal value As String)
_navigateUrl = value
End Set
End Property
Private _alt As String
Public Property Alt() As String
Get
Return _alt
End Get
Set(ByVal value As String)
_alt = value
End Set
End Property
Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)
writer.WriteBeginTag("a")
writer.WriteAttribute("href", ResolveUrl(_navigateUrl))
writer.Write(HtmlTextWriter.TagRightChar)
writer.WriteBeginTag("img")
writer.WriteAttribute("id", ID)
writer.WriteAttribute("src", _imageUrl)
writer.WriteAttribute("style", "border:none;")
writer.WriteAttribute("alt", _alt)
writer.WriteAttribute("onmouseover", String.Format("this.src = '{0}'", _imageOverUrl))
writer.WriteAttribute("onmouseout", String.Format("this.src = '{0}'", _imageUrl))
writer.Write(HtmlTextWriter.SlashChar)
writer.Write(HtmlTextWriter.TagRightChar)
writer.WriteEndTag("a")
End Sub
End ClassOn a d'abord le code pour les propriétés et ensuite le rendu.
On utilise WriteBeginTag / WriteAttribute / Write / WriteEndTag pour écrire du html.
Ici l'appel :
<Exemple:MonHyperLinkRollOver ID="MonImageRollOver1" NavigateUrl="~/Default.aspx" runat="server"
ImageUrl="image.gif" ImageOverUrl="image_Over.gif" alt="mon alt"/>produira en sortie :
<a href="/Default.aspx"><img id="MonImageRollOver1" src="image.gif" style="border:none;"
alt="mon alt" onmouseover="this.src = 'image_Over.gif'" onmouseout="this.src = 'image.gif'"/></a>il faut placer sa définition dans le web.config :
<pages>
<controls>
<add tagPrefix="Exemple" namespace="testWeb" assembly="testWeb" />
</controls>
</pages>