Developpez.com

Télécharger gratuitement le magazine des développeurs, le bimestriel des développeurs avec une sélection des meilleurs tutoriels

FAQ ASP.NET/C#Consultez toutes les FAQ

Nombre d'auteurs : 39, nombre de questions : 371, dernière mise à jour : 30 mars 2017 

 
OuvrirSommaireWebFormsContrôlesContrôles personnalisés (Custom Controls)

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

 
Sélectionnez

public class MonWebControl : WebControl
{
}

Toute la logique interne doit ensuite être implémentée, événement, rendu, etc ...
Voir aussi : quelle est la différence entre un composant personnalisé et un contrôle utilisateur ?

Créé le 10 mars 2008  par nico-pyright(c)

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 être 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'être utilisé dans plusieurs applications. Si le contrôle ne doit être 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

Créé le 10 mars 2008  par nico-pyright(c)

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.

 
Sélectionnez

<%@ Register TagPrefix="Exemple" Namespace="testWeb" Assembly="testWeb" %>

Pour utiliser le contrôle, on fera ensuite :

 
Sélectionnez

<Exemple:MonControle ID="monId" runat="server" ... />
Créé le 10 mars 2008  par nico-pyright(c)

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.

 
Sélectionnez

public class MonImageRollOver : Image
{
    private string _imageOverUrl;

    public string ImageOverUrl
    {
        get { return _imageOverUrl; }
        set { _imageOverUrl = value; }
    }

    protected override void OnPreRender(EventArgs e)
    {
        Attributes.Add("onmouseover", string.Format("this.src = '{0}'", _imageOverUrl));
        Attributes.Add("onmouseout", string.Format("this.src = '{0}'", ImageUrl));
        base.OnPreRender(e);
    }
}

On 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 :

 
Sélectionnez

<Exemple:MonImageRollOver ID="IdImageRollover" runat="server" ImageUrl="image.gif" ImageOverUrl="image_Over.gif" />
Créé le 10 mars 2008  par nico-pyright(c)

il faudra surcharger la méthode

 
Sélectionnez

protected override void Render(HtmlTextWriter writer)

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

 
Sélectionnez

public class MonHyperLinkRollOver : WebControl
{
	private string _imageOverUrl;
	public string ImageOverUrl
	{
		get { return _imageOverUrl; }
		set { _imageOverUrl = value; }
	}

	private string _imageUrl;
	public string ImageUrl
	{
		get { return _imageUrl; }
		set { _imageUrl = value; }
	}

	private string _navigateUrl;
	public string NavigateUrl
	{
		get { return _navigateUrl; }
		set { _navigateUrl = value; }
	}

	private string _alt;
	public string Alt
	{
		get { return _alt; }
		set { _alt = value; }
	}

	protected override void Render(HtmlTextWriter writer)
	{
		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");
	}
}

On 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 :

 
Sélectionnez

<Exemple:MonHyperLinkRollOver ID="MonImageRollOver1" NavigateUrl="~/Default.aspx" 
	runat="server" ImageUrl="image.gif" ImageOverUrl="image_Over.gif" alt="mon alt"/>

produira en sortie :

 
Sélectionnez

<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>
Créé le 10 mars 2008  par nico-pyright(c)

il faut placer sa définition dans le web.config :

 
Sélectionnez

<pages>
	<controls>
		<add tagPrefix="Exemple" namespace="testWeb" assembly="testWeb" />
	</controls>
</pages>
Créé le 10 mars 2008  par nico-pyright(c)
  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2007 Dotnet Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.