Utiliser plusieurs contrôles Pop-up

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

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.

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.)