Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Actualités

  • Blog de Cyril DURAND, passionné de JavaScript, Ajax, ASP.net et tout ce qui touche au developpement Web Client-Side.

    View Cyril Durand's profile on LinkedIn

    hit counters

Fermer manuellement un PopupControlExtender

Le contrôle PopupControl des Ajax Toolkits permet d'afficher une bulle d'information suite à une action sur un contrôle serveur, comme un click sur un linkbutton ou sur une textbox.

Par exemple pour afficher un bulle d'info sur le click d'un lien on utilise :

<asp:LinkButton ID="lbl1" runat="server" OnClientClick="return false;">aide</asp:LinkButton> <asp:Panel ID="pnl1" runat="server" style="border:solid 1px #000; background-color:#939;display:none;width:200px;height:50px;"> du blabla </asp:Panel> <ajaxToolkit:PopupControlExtender ID="popupExt" runat="server" PopupControlID="pnl1" TargetControlID="lbl1" Position="Bottom" />

Maintenant que l'on a réussi à afficher notre popup juste en dessous du linkbutton, comment faire pour la cacher ? Par défaut si vous cliquez à l'extérieur de la popup, celle-ci va se cacher, mais ce n'est pas très intuitif.

Côté serveur les méthodes Cancel et Commit permettent de cacher le popup, mais cela nécessite un aller-retour serveur ce qui est lourd pour seulement cacher ce popup.

Côté client, il existe deux méthodes (non documentés) qui permettent d'afficher ou masquer le popup : showPopup et hidePopup. On applique ces méthodes sur l'instance client du PopupControlExtender que l'on récupère à partir de la méthode $find.

<asp:LinkButton ID="lbl1" runat="server" OnClientClick="return false;">aide</asp:LinkButton> <asp:Panel ID="pnl1" runat="server" style="border:solid 1px #000; background-color:#939;display:none;width:200px;height:50px;"> <a href="#" onclick="$find('<%=popupExt.ClientID%>').hidePopup()">[Fermer]</a> du blabla </asp:Panel> <ajaxToolkit:PopupControlExtender ID="popupExt" runat="server" PopupControlID="pnl1" TargetControlID="lbl1" Position="Bottom" />
Posted: mercredi 11 avril 2007 23:08 par cyril
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :

Commentaires

davestar a dit :

Pratique pour éviter un aller-retour serveur, je vais vite mettre ça en place.

Merci pour l'info

# avril 12, 2007 08:30

Alexandre Marlot a dit :

Bonjour,

j'ai voulu utilisé cette astuce ce matin mais j'ai un souci et je ne vois pas de solution :(

Mon PopupExtender affiche un UserControl. J'ai ajouté dans le UC un boutton fermer pour cacher le PopupExtender mais lorsque j'accède à la page, j'ai l'erreur suivante : Le nom 'popupExt' n'existe pas dans le contexte actuel

En effet, le popupExt est défini au niveau du dessus.

Une idée de comment puis-je faire ?

Merci d'avance

Alex

# avril 16, 2007 11:40

cyril a dit :

Bonjour,

Page.FindControl est ton ami

# avril 16, 2007 21:47

Alexandre Marlot a dit :

Bonjour,

Ca donne quelques choses comme cela ?

OnClick="$find('&lt;%=Page.FindContol("PopupExt").clientID%&gt;').hidePopup()"

Car il me sort l'erreur :

'System.Web.UI.Page' ne contient pas de définition pour 'FindContol'

Il doit y avoir un truc qui m'échappe lol :(

Merci d'avance

Alex

# avril 17, 2007 11:18

oliv69 a dit :

Salut!

Est-ce que de la même manière tu ne connaitrais pas une méthode pour fermer un ModalPopupExtender côté client?

# mai 28, 2007 10:03

Seb a dit :

Salut,

J'aimerais ouvrir(ou fermer) le popupextender sur le click d'une image. J'ai ecris le code javascript suivant mais lors du click sur l'image la popup n'apparait pas. par contre si je mets un alert en fin de fonction elle apparait mais se ferme dès que je fait 'ok'. Je pense que le click sur l'évênement click génère la fermeture de la popup mais je n'arrive pas à l'empêcher. Une idée?

Voici mon code :

// ASPX

imgList.Attributes["onclick"] = String.Format("ShowHidePopup('{0}');",popupExtList.ClientID);

// fonction javascript

function ShowHidePopup(popupExtId)

{

  var popupExt = $find(popupExtId);

  if (popupExt != null)

  {

     if (popupExt._popupVisible)

     {

        popupExt.hidePopup();

     }

     else

     {

        popupExt.showPopup();

     }

  }

}

# octobre 9, 2007 14:06

cyril a dit :

Je pense que otn problème se produit avec FF.

Il faut explicitement faire un return false.

imgList.Attributes["onclick"] = String.Format("ShowHidePopup('{0}');return false;",popupExtList.ClientID);

devrais fonctionner

# octobre 19, 2007 15:12
Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- un Pacman en Silverlight 2b2 par Pierrick's Blog le il y a 4 heures et 43 minutes

- Une table -> deux entity types sans colonne discriminante en base, gestion des relations par Matthieu MEZIL le il y a 12 heures et 42 minutes

- ssdl view et TPT par Matthieu MEZIL le 07-05-2008, 02:04

- L'injection SQL n'est PAS un problème QUE pour les développeurs web ! par CoqBlog le 07-05-2008, 01:08

- Un outil pour réaliser des animations WPF basées sur des équations de Bézier par Perspective le 07-04-2008, 21:45

- Sandcastle et CodePlex : le verdict par CoqBlog le 07-04-2008, 20:53

- ssdl view et TPH par Matthieu MEZIL le 07-04-2008, 19:12

- Webcasts sur le Parallel Framework disponibles par Matthieu MEZIL le 07-04-2008, 17:26

- [Silverlight] - Comprendre et Débuter avec Silverlight par Danuz le 07-04-2008, 12:41

- SharePoint : Nouvel article sur l'exportation et Importation de sites SharePoint par Blog Technique de Romelard Fabrice le 07-04-2008, 01:00