Vue d'ensemble des contrôles utilisateur ASP.NET
Mise à jour : novembre 2007
Il peut arriver que vous ayez besoin dans un contrôle de fonctionnalités dont les contrôles serveur Web ASP.NET intégrés ne disposent pas. Vous pouvez alors créer vos propres contrôles. Pour ce faire, vous disposez de deux options : Vous pouvez créer :
Des contrôles utilisateur. Les contrôles utilisateur sont des conteneurs dans lesquels vous pouvez placer des balises et des contrôles serveur Web. Vous pouvez ensuite traiter le contrôle utilisateur comme une unité et lui assigner des propriétés et des méthodes.
Des contrôles personnalisés. Un contrôle personnalisé est une classe que vous écrivez et qui dérive de Control ou de WebControl.
Les contrôles utilisateur sont beaucoup plus faciles à créer que les contrôles personnalisés, dans la mesure où vous pouvez réutiliser des contrôles existants. Il est donc particulièrement facile de créer des contrôles comportant des éléments d'interface utilisateur complexes.
Cette rubrique fournit une vue d'ensemble de l'utilisation des contrôles utilisateur ASP.NET.
Structure de contrôle utilisateur
Un contrôle Web ASP.NET ressemble à une page ASP.NET complète (fichier .aspx), avec à la fois une page d'interface utilisateur et du code. Un contrôle utilisateur se crée de façon très semblable à une page ASP.NET. On lui ajoute par la suite le balisage et les contrôles enfants nécessaires. Tout comme une page, un contrôle utilisateur peut inclure du code servant à manipuler son contenu, et notamment à effectuer des tâches telles que des liaisons de données.
Un contrôle utilisateur présente les différences suivantes par rapport à une page Web ASP.NET :
L'extension du nom de fichier du contrôle utilisateur est .ascx.
Au lieu d'une directive @ Page, le contrôle utilisateur contient une directive @ Control qui définit la configuration et d'autres propriétés.
Les contrôles utilisateur ne peuvent pas s'exécuter comme des fichiers autonomes. Vous devez au lieu de cela les ajouter à des pages ASP.NET, comme vous le feriez pour n'importe quel contrôle.
Le contrôle utilisateur ne contient pas d'élément htmlbody ou form. Ces éléments doivent se trouver dans la page d'hébergement.
Vous pouvez utiliser sur un contrôle utilisateur les mêmes éléments HTML (sauf les éléments html, body ou form) et les mêmes contrôles Web que dans une page Web ASP.NET. Par exemple, si vous créez un contrôle utilisateur afin de l'utiliser comme barre d'outils, vous pouvez placer dessus une série de contrôles serveur Web Button et créer des gestionnaires d'événements pour les boutons.
L'exemple suivant montre un contrôle utilisateur qui implémente un contrôle Spinner dans lequel les utilisateurs peuvent cliquer à leur guise sur des boutons pour naviguer dans une série de choix au sein d'une zone de texte.
.gif "Note de sécurité") Note de sécurité : |
|---|
Cet exemple a une zone de texte qui accepte l'entrée d'utilisateur, ce qui constitue une menace éventuelle pour la sécurité. Par défaut, les pages Web ASP.NET vérifient que les entrées d'utilisateur n'incluent pas de script ou d'éléments HTML. Pour plus d'informations, consultez Vue d'ensemble des attaques de script. |
<%@ Control Language="VB" ClassName="UserControl1" %>
<script >
Protected colors As String() = {"Red", "Green", "Blue", "Yellow"}
Protected currentColorIndex As Integer = 0
Protected Sub Page_Load(ByVal sender As Object, _
ByVal e As System.EventArgs)
If IsPostBack Then
currentColorIndex = CInt(ViewState("currentColorIndex"))
Else
currentColorIndex = 0
DisplayColor()
End If
End Sub
Protected Sub DisplayColor()
textColor.Text = colors(currentColorIndex)
ViewState("currentColorIndex") = currentColorIndex.ToString()
End Sub
Protected Sub buttonUp_Click(ByVal sender As Object, _
ByVal e As System.EventArgs)
If currentColorIndex = 0 Then
currentColorIndex = colors.Length - 1
Else
currentColorIndex -= 1
End If
DisplayColor()
End Sub
Protected Sub buttonDown_Click(ByVal sender As Object, _
ByVal e As System.EventArgs)
If currentColorIndex = colors.Length - 1 Then
currentColorIndex = 0
Else
currentColorIndex += 1
End If
DisplayColor()
End Sub
</script>
<asp:TextBox ID="textColor"
ReadOnly="True" />
<asp:Button Font-Bold="True" ID="buttonUp"
Text="^" OnClick="buttonUp_Click" />
<asp:Button Font-Bold="True" ID="buttonDown"
Text="v" OnClick="buttonDown_Click" />
<% @ Control Language="C#" ClassName="UserControl1" %>
<script >
protected int currentColorIndex;
protected String[] colors = {"Red", "Blue", "Green", "Yellow"};
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
currentColorIndex =
Int16.Parse(ViewState["currentColorIndex"].ToString());
}
else
{
currentColorIndex = 0;
DisplayColor();
}
}
protected void DisplayColor()
{
textColor.Text = colors[currentColorIndex];
ViewState["currentColorIndex"] = currentColorIndex.ToString();
}
protected void buttonUp_Click(object sender, EventArgs e)
{
if(currentColorIndex == 0)
{
currentColorIndex = colors.Length - 1;
}
else
{
currentColorIndex -= 1;
}
DisplayColor();
}
protected void buttonDown_Click(object sender, EventArgs e)
{
if(currentColorIndex == (colors.Length - 1))
{
currentColorIndex = 0;
}
else
{
currentColorIndex += 1;
}
DisplayColor();
}
</script>
<asp:TextBox ID="textColor"
ReadOnly="True" />
<asp:Button Font-Bold="True" ID="buttonUp"
Text="^" OnClick="buttonUp_Click" />
<asp:Button Font-Bold="True" ID="buttonDown"
Text="v" OnClick="buttonDown_Click" />
Remarquez que le contrôle utilisateur ressemble beaucoup à une page ASP.NET : il contient plusieurs contrôles (un contrôle TextBox et deux contrôles Button), ainsi que du code qui gère les événements Click des boutons et l'événement Load de la page. Cependant, le contrôle ne contient aucun balisage, sauf pour les contrôles, et au lieu d'une directive @ Page, il contient une directive @ Control.
Ajout d'un contrôle utilisateur à une page
Un contrôle utilisateur s'ajoute à une page en l'enregistrant dans la page hôte. Lorsque vous l'enregistrez, vous spécifiez le fichier .ascx qui le contient, un préfixe de balise et un nom de balise que vous utiliserez pour déclarer le contrôle utilisateur dans la page. Pour plus d'informations, consultez Comment : inclure un contrôle utilisateur dans une page Web ASP.NET.
Définition des propriétés et des méthodes pour un contrôle utilisateur
Vous pouvez définir des propriétés et des méthodes pour un contrôle utilisateur de la même manière que pour une page. En définissant une propriété pour un contrôle utilisateur, vous ouvrez la possibilité de définir ses propriétés de façon déclarative et dans le code.
Événements dans des contrôles utilisateur
Lorsqu'un contrôle utilisateur contient des contrôles serveur Web, vous pouvez écrire le code dans le contrôle utilisateur pour gérer les événements déclenchés par les contrôles enfants. Par exemple, si votre contrôle utilisateur contient un contrôle Button, vous pouvez créer un gestionnaire dans ce contrôle utilisateur pour l'événement Click du bouton.
Par défaut, les événements déclenchés par les contrôles enfants dans un contrôle utilisateur ne sont pas disponibles pour la page hôte. Vous pouvez cependant définir des événements pour votre contrôle utilisateur et les déclencher afin que la page hôte soit avertie de l'événement. Cela se fait de la même façon que la définition d'événements pour une classe. Pour plus d'informations, consultez Déclenchement d'un événement.
Référencement des Ressources externes
Lorsqu'un contrôle utilisateur s'exécute, les références à des ressources externes vers d'autres pages, telles que des images ou des ancres, sont résolues en utilisant l'URL du contrôle utilisateur comme URL de base. Par exemple, si le contrôle utilisateur contient un contrôle Image dont la propriété ImageUrl a la valeur Images/Button1.gif, l'URL de l'image est ajoutée à l'URL du contrôle utilisateur pour résoudre le chemin d'accès complet à l'image. Si le contrôle utilisateur référence une ressource qui ne figure pas dans un sous-dossier du contrôle utilisateur lui-même, vous devez fournir un chemin d'accès qui résout sur le dossier correct au moment de l'exécution. Pour plus d'informations sur la spécification de chemins d'accès de contrôles serveur ASP.NET, consultez Chemins d'accès aux sites Web ASP.NET.
Mise en cache et contrôles utilisateur
Les contrôles utilisateur peuvent prendre en charge des directives de mise en cache distinctes de la page hôte. Vous pouvez donc ajouter des contrôles utilisateur aux pages et mettre en cache des parties d'une page. Pour plus d'informations, consultez Mise en cache de parties d'une page ASP.NET.