Utiliser plusieurs contrôles Pop-up.

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.

Article lu   fois.

L'auteur

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

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

 
Sélectionnez

<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:

 
Sélectionnez

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

 
Sélectionnez

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

 
Sélectionnez

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

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

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

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.