[ASP.NET] les custom controls

01.08.2007

Avant d’aborder les custom controls

une notion qui est bien à avoir assimiler c’est qu’une page aspx affichée dans le navigateur du client n’affiche que du html et du javascript, toutes les balises <asp :> sont « traduites » par le serveur asp.net

… une simple ouverture de la source de la page affichée dans le navigateur permet de le constater

Les custom controls sont un peu l'équivalent des components(composants) en Windows Forms

1 – créer le site web

2 – ajouter un nouveau projet de type « bibliotheque de controls web »

C’est dans ce projet que l’on pourra ajouter des custom controls (ou controls web personnalisés)

Ici je vais créer un custom control DropDownList

C’est la que ce que j’ai expliqué au début est important dans la methode RenderContents je vais renvoyer le Html à insérer comme ici c’est un control de type liste je fais une boucle sur les items,

Si le custom control avait dérivé par exemple une textbox c’est la propriété text qu’il aurait fallu retourner ,etc.

using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Text;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace WebControlLibrary1

{

[DefaultProperty("Items")]

[ToolboxData("<{0}:CustomDropDownList runat=server></{0}:CustomDropDownList>")]

public class CustomDropDownList : DropDownList

{

protected override void RenderContents(HtmlTextWriter output)

{

output.Write(BuildHtml());

}

public String BuildHtml()

{

string result = string.Empty;

bool selected = true;

foreach (ListItem item in this.Items)

if (selected)

{

result += "<option selected="selected" value="" + item.Value + "">" + item.Text + "</option>";

selected = false;

}

else

result += "<option value="" + item.Value + "">" + item.Text + "</option>";

return result;

}

3 – Ajouter une référence au site web pointant sur le projet contenant le custom control … générer le site web

Le custom control est désormais disponible dans la boite à outils il suffit donc de le glisser sur la page aspx désirée

Le code du control est de la forme :

<cc1:CustomDropDownList ID="CustomDropDownList1" runat="server"></cc1:CustomDropDownList>

Il suffit ensuite d’ajouter des éléments au custom control comme on le ferait avec une dropdownlist classique

Voila un exemple de source de la page générée , on voit bien que la DropDownList est convertie en « select » html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Test customDropDownList

</title></head>

<body>

<div>

</div>

<div>

<select name="CustomDropDownList1" id="CustomDropDownList1">

<option selected="selected" value="premier">premier</option><option value="second">second</option>

</select>

</div>

<div>

</div></form>

</body>

</html>