ASP.NET
ASP.NET - Contrôles utilisateur
Recherche…
Introduction
Les contrôles utilisateur sont des conteneurs pouvant être remplis avec des contrôles HTML et des contrôles serveur avec code-behind de la même manière que la page ASPX. Ils sont traités comme des unités plus petites réutilisables d'une page, de sorte qu'ils ne peuvent pas fonctionner sous forme de pages autonomes et ne doivent pas avoir html, le corps ou la forme des éléments HTML en eux.
Introduction des contrôles utilisateur
Les contrôles utilisateur permettent de réutiliser les pages ASP.NET, de la même manière que les pages maîtres. Au lieu de partager la mise en page de base, les contrôles utilisateur partagent un groupe de contrôles serveur HTML / ASP.NET intégrés ou une disposition de formulaire spécifique, par exemple l'envoi de commentaires ou les notes invité.
Un contrôle utilisateur peut contenir des contrôles HTML et des contrôles serveur ASP.NET, y compris des scripts côté client.
Les contrôles utilisateur incluent généralement Control
directive Control
en plus de sa définition:
<%@ Control Language="C#" AutoEventWireup="True" CodeFile="UserControl.ascx.cs" %>
Comme les pages ASPX, les contrôles utilisateur sont des balises pouvant être associées à un code derrière un fichier pour effectuer certains événements et certaines tâches. Par conséquent, toutes les balises HTML disponibles sur la page ASPX peuvent être utilisées sur les contrôles utilisateur sauf <html>
, <body>
et <form>
tags
Voici un exemple de balisage simple de contrôle utilisateur:
<%-- UserControl.ascx --%>
<%@ Control Language="C#" AutoEventWireup="True" CodeFile="UserControl.ascx.cs" %>
<div>
<asp:Label ID="Label1" runat="server" />
<br />
<asp:Button ID="Button1" runat="server" Text="Click Here" OnClick="Button1_Click" />
</div>
Exemple de code-derrière:
// UserControl.ascx.cs
public partial class UserControl : System.Web.UI.UserControl
{
protected void Button1_Click(Object sender, EventArgs e)
{
Label1.Text = "Hello World!";
}
}
Avant qu'un contrôle utilisateur inséré dans la page ASPX, la directive Register
soit déclarée en haut de la page faisant référence au contrôle utilisateur avec son URL source, son nom de tag et son préfixe de tag.
<%@ Register Src="UserControl.ascx" TagName="UserControl" TagPrefix="uc" %>
Ensuite, vous pouvez placer le contrôle utilisateur dans la page ASPX comme le contrôle serveur intégré ASP.NET:
<uc:UserControl ID="UserControl1" runat="server" />
Création d'une instance de contrôle utilisateur par programme
Si vous souhaitez instancier une instance de contrôle utilisateur dans le code ASPX derrière la page, vous devez écrire la déclaration de contrôle utilisateur sur l'événement Page_Load
comme suit:
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(Object sender, EventArgs e)
{
Control control1 = LoadControl("UserControl.ascx");
Page.Controls.Add(control1);
}
}
Notez que le fichier ASCX du contrôle utilisateur doit déjà être créé lors de l'exécution de la méthode LoadControl.
Un autre moyen connu pour déclarer des contrôles utilisateur par programme consiste à utiliser PlaceHolder
:
public partial class Default : System.Web.UI.Page
{
public PlaceHolder Placeholder1;
protected void Page_Load(Object sender, EventArgs e)
{
Control control1 = LoadControl("UserControl.ascx");
Placeholder1.Controls.Add(control1);
}
}
En fonction de vos besoins, PlaceHolder
place les contrôles utilisateur sur un conteneur stockant tous les contrôles serveur ajoutés dynamiquement dans la page, où Page.Controls
insère directement le contrôle utilisateur dans la page, ce qui est préférable pour le rendu des contrôles littéraux HTML.
Ajout de propriétés personnalisées pour le contrôle utilisateur
Tout comme les contrôles serveur ASP.NET standard, les contrôles utilisateur peuvent avoir des propriétés (attributs) sur leur balise de définition. Supposons que vous souhaitiez ajouter un effet de couleur sur le fichier UserControl.ascx
comme ceci:
<uc:UserControl ID="UserControl1" runat="server" Color="blue" />
À ce stade, les attributs / propriétés personnalisés des contrôles utilisateur peuvent être définis en déclarant les propriétés dans le code du contrôle utilisateur derrière:
private String _color;
public String Color
{
get
{
return _color;
}
set
{
_color = value;
}
}
En outre, si vous souhaitez définir une valeur par défaut sur une propriété de contrôle utilisateur, affectez la valeur par défaut dans la méthode constructeur du contrôle utilisateur.
public UserControl()
{
_color = "red";
}
Ensuite, le balisage du contrôle utilisateur doit être modifié pour ajouter un attribut de couleur comme suit:
<%@ Control Language="C#" AutoEventWireup="True" CodeFile="UserControl.ascx.cs" %>
<div>
<span style="color:<%= Color %>"><asp:Label ID="Label1" runat="server" /></span>
<br />
<asp:Button ID="Button1" runat="server" Text="Click Here" OnClick="Button1_Click" />
</div>