Utiliser plusieurs contrôles Pop-up

Christian Wenz (Traduction par Rémy Mainil)

L'extenseur PopupControl de l'AJAX Control Toolkit offre un moyen facile de déclencher l'apparition d'un popup lorsqu'un autre contrôle est activé. Il est également possible d'utiliser plus d'un contrôle popup sur une page. ♪

- Titre : Utiliser plusieurs contrôles Pop-up

- Auteur : Christian Wenz (Traduction par Rémy Mainil)

- Parution : 18 avril 2013

- Licence : Copyright ® 2009 Equipe Dotnet. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- Traduction

- Présentation

- Etapes

Traduction

Cet article est la traduction la plus fidèle possible de l'article original : Using Multiple Popup Controls.

Présentation

L'extenseur PopupControl de l'AJAX Control Toolkit offre un moyen facile de déclencher l'apparition d'un pop-up lorsqu'un autre contrôle est activé. Il est également possible d'utiliser plus d'un contrôle pop-up sur une page.

Etapes

De façon à activer les fonctionnalités AJAX d'ASP.NET et le Control Toolkit, le contrôle ScriptManager doit être placé dans la page (à l'intérieur de l'élément <form>) :

<asp:ScriptManager ID="asm" runat="server" />

Ensuite, ajoutez un panel qui servira de pop-up. Dans le scénario actuel, le panel contient un contrôle Calendar. De façon à éviter le rafraichissement de la page causé par le postback provoqué par le contrôle Calendar, le panel est placé dans un contrôle UpdatePanel :

<asp:Panel ID="pnlCalendar" runat="server">
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<asp:Calendar ID="c1" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>

La page contient également deux texboxes. Pour chacune d'elles, la pop-up avec le calendrier devra apparaître une fois le focus sur la textbox.

<div>
Departure date: <asp:TextBox ID="tbDeparture" runat="server" />
Return date: <asp:TextBox ID="tbReturn" runat="server" />
</div>

Maintenant, complétez les deux textboxes avec un PopupControlExtender. L'attribut TargetControlID définit l'ID du contrôle lié à l'extenseur. L'attribut PopupControlID contient l'ID du panel « pop-up ». Dans ce cas, les deux extenseurs montrent le même pop-up, mais cibler des pop-up différents est également faisable.

<ajaxToolkit:PopupControlExtender ID="pce1" runat="server"
TargetControlID="tbDeparture" PopupControlID="pnlCalendar" Position="Bottom" />
<ajaxToolkit:PopupControlExtender ID="pce2" runat="server"
TargetControlID="tbReturn" PopupControlID="pnlCalendar" Position="Bottom" />

Maintenant, dès que vous cliquez dans une des textboxes, un calendrier apparaît en dessous du champ, vous permettant de choisir une date. (Copier la date dans le champ de saisie fera l'objet d'un autre tutoriel.)

Le calendrier apparaît lorsque l'utilisateur clique dans une textbox