Utiliser plusieurs contrôles Pop-up.

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

               Version PDF (Miroir)   Version hors-ligne (Miroir)

Traduction
Présentation
Etapes


Traduction

Cet article est la traduction la plus fidèle possible de l'article original : en 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 a 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 et 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 montre 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


               Version PDF (Miroir)   Version hors-ligne (Miroir)

Valid XHTML 1.1!Valid CSS!

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. Droits de diffusion permanents accordés à Developpez LLC. Cette page est déposée.

 
 
Developpez.com

Nous contacter

Participez

Informations légales

 
Services

Forum Microsoft DotNET

Blogs

Hébergement

 
Partenaires

Hébergement Web