vendredi 10 juillet 2009

ModalPopup paramétrée

Bonjour à tous,

Certains d'entres vous ont peut-être déjà eu le problème : ouvrir une fenêtre modale (en l'occurence avec AjaxControlToolkit), et pouvoir lui passer un paramètre, l'id du contrôle ayant ouvert la popup par exemple. Sachez que c'est entièrement possible, cela nécessite juste un peu de code. La première chose à savoir c'est qu'avec le framework AjaxControlToolkit, il existe une propriété BehaviorID sur tous les extenders. Cette propriété vous permet ensuite de manipuler cet extender côté client (en javascript, donc). Je vous propose de jeter un coup d'oeil sur le code avant les explications.


<asp:ModalPopupExtender runat="server" BehaviorID="myPopupBehavior"
PopupControlId="myPopup" TargetControlId="dummyLB" />
<asp:Panel ID="myPopup" runat="server">
<asp:HiddenField runat="server" ID="myParameter" />
</asp:Panel>
<asp:LinkButton ID="dummyLB" runat="server" style="display:none" />

<style type="text/javascript">
function openPopup(parameter)
{
$find("myPopupBehavior").show();
$get("<%= myParameter.ClientID %>").value=parameter;
}
</style>


Après avoir vu le code, je pense que vous avez besoin d'explications, et c'est tout à fait normal. Tout d'abord, la première chose à savoir, c'est qu'un extender AjaxControlToolkit a toujours besoin d'un TargetControlID. J'ai donc fait un LinkButton invisible pour l'utilisateur, mais qui est bien là pour ne pas faire planter l'application. La seconde chose à remarquer, c'est que dans le panel qui sera affiché, j'ai un champ caché (Hidden field). C'est ce dernier qui contiendra la valeur de mon paramètre. Pour affecter mon paramètre, j'ai donc fait une fonction javascript qui encapsule ce fonctionnement d'affectation de la valeur du champ caché. Ainsi, j'ai donc une fonction réutilisable à tout moment. Voici un exemple d'utilisation :


<a onclick="openPopup('http://www.google.fr')>lien vers google</a>

L'avantage de ce code est donc de pouvoir récupérer la valeur de votre paramètre côté serveur, puisque le champ caché est un contrôle serveur !

Voilà, j'espère que cet article vous aura plut.