Dans la programmation ASP.NET de tous les jours, il est parfois utile, voir fort utile d'avoir sous la main, des user controls qui peuvent être réutilisés dans nos différents projets.

Un user control c'est quoi?

D'abord, pour ceux qui ne connaissent pas encore les User Controls, ce sont de nouveaux contrôles que vous créez à partir de contrôles déjà existants. Imaginez par exemple, un formulaire de contact. Un formulaire de contact c'est quoi :

• fieldset.
• 5 TextBox pour : nom, prenom, email, titre et message.
• 6 Labels (5 correspondants aux TextBox et un pour la legend du fieldset)
• 5 validators.

Et un bouton? Pas forcement. Dans le cadre d'un formulaire de contact, oui! Mais imaginez un formulaire d'adresse, dans une page de commande d'article, le client doit noter son adresse de facturation, de livraison etc. Donc dans ce cas-là, ne mettez pas le bouton.

Mon premier User Control

Nous allons donc créer un formulaire de contact. J'utiliserai Visual Studio 2008 béta 2 pour ce projet. Tout d'abord mettons en place le projet :

1. Ouvrez Visual Studio
2. Créez un site qui hébergera le projet
   • File
   • New
   • Web Site
   • Une nouvelle fenêtre apparait : sélectionnez "ASP.NET Web Site"
3. Créez un nouvel User Control
   1. Dans l'explorateur de solution : "clic droit" sur le projet
   2. "New Folder" (UserControls).
   3. "Clic droit" sur le nouveau dossier.
   4. Cliquez sur "Add New Item"
   5. Une nouvelle fenêtre apparait, choisissez "Web User Control"
   6. Donnez-lui un nom ( ex : ContactForm)
   7. Cliquez sur "Add"

Cliquez ici pour agrandir l'image

Normalement, ContactForm.ascx est ouvert dans Visual Studio, si ce n'est pas le cas, ouvrez le. Nous allons maintenant ajouter les différents champs. Pour cela, nous allons passer en mode "Design".

Nous allons donc ajouter un fieldset, 5 TextBox, 6 Label, 5 validators et un bouton:

Dans les sources nous avons une succession de champs comme ci-dessous (exemple pour le champ "Nom") :

<asp:Label ID="lbNom" runat="server" Text="Nom : "></asp:Label>
<br />
<asp:TextBox ID="tbNom" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator
ID="RequiredFieldValidator1"
runat="server"
ErrorMessage="(Requis)"
ControlToValidate="tbNom">
</asp:RequiredFieldValidator><br />

Nous avons donc un label, une TextBox et un Validateur associés. La partie design de notre User Control est terminée. Nous devons maintenant nous rendre dans le code source pour permettre aux futurs utilisateurs de cet User Control de pouvoir avoir accès aux propriétés de nos champs. Pas toutes bien évidement, mais qu'ils puissent au moins récupérer les valeurs indiquées dans les TextBox de notre User Control.

Rendez-vous donc sur la page source de notre User Control. Supprimez la fonction "Page_Load". Dans notre cas, elle n'a aucune utilité. Nous allons créer 6 propriétés :

• 1 pour le titre de notre formulaire (qui sera lié a notre label "lbTitre")
• 5 correspondants à la propriété "Text" de nos 5 TextBox

Par exemple, pour la propriété "Nom" nous allons avoir dans le code source :

public string Nom
{
   get { return tbNom.Text; }
   set
   {
      if (value != null && value != "")
         tbNom.Text = value;
   }
}

Faites de même pour les autres propriétés : Prenom, Email, TitreMsg, Msg et TitreForm (pour le titre du formulaire). Les propriétés étant maintenant accessibles, nous devons créer notre évènement sur le "click" du bouton. Pour cela créer un handler d'évènement :

public event EventHandler Send;

 Ensuite, sur l'évènement "OnClick" de notre bouton, nous devons lancer cet handler. Coté design nous aurons donc :

<asp:Button ID="btEnvoyer" runat="server" Text="Envoyer"
                  onclick="btEnvoyer_Click" />

Et coté code :

protected void btEnvoyer_Click(object sender, EventArgs e)
{
   Send(sender, e);
}

Nous pouvons maintenant passer à l'utilisation.

Utiliser notre user control dans une page ASPX

Nous allons maintenant utiliser notre user control dans la page "Default.aspx". Pour cela, nous devons enregistrer notre user control dans la page à l'aide de la directive "Register" :

<%@ Register TagPrefix="loic" TagName="ContactForm" Src="~/UserControl/ContactForm.ascx" %>

Une fois ceci fait, nous pouvons ajouter notre contrôle à la page :

Vous remarquez que Visual Studio permet l'intelisense sur notre propre contrôle. Si nous donnons un nom à notre user control (Id="cf" par exmple) et que nous ajoutons une fonction de réception de l'évènement "OnSend", nous aurons un contrôle ayant cet allure :

<loic:ContactForm runat="server" TitreForm="Contact me" ID="cf" OnSend="SendMail" />

Nous pouvons ensuite gérer l'envois de notre email dans le code behind de la page :

protected void SendMail(object sender, EventArgs e)
{
   ...
   cf.TitreForm = "Message envoy‚";
}

On teste :

Lire la suite...
Tags: asp.net
Catégorie : ASP.NET | Walkthrough

Une question sur cet article? n'hésitez pas a me contacter par Live Messegner. Suis-je connecté?

Permalink | Commentaires (7) | Post RSS |