Lors du développement d’un site pour administrer l’annuaire Active Directory, j’ai été confronté à une problématique qui ne sait pas révélé si facile à résoudre.

L’utilisateur qui se connecte sur le site doit pouvoir modifier certaines informations sur son compte. L’affichage est donc géré dynamiquement dans le code behind et les liens sont ajoutés en fonction de la liste des attributs qui sont modifiables.

Pour dynamiser un peu la navigation, nous avons décider d’utiliser la librairie AJAX d’ASP .net qui donne accès à des composants supplémentaires :

image

Lorsque l’utilisateur cliquera sur le lien, nous devons afficher un panel en mode modal au dessus de la page courante.

Dans un premier temps, nous allons implémenter un tableau avec l’ajout du lien en code behind :

'definition de la ligne, de la cellule, et du lien
Dim rowTest As HtmlTableRow = New HtmlTableRow()
Dim cellTest As HtmlTableCell = New HtmlTableCell()
Dim linkTest As LinkButton = New LinkButton

'init des paramètres du lien
linkTest.Text = "Test de Modal"
linkTest.ID = "linkTest

'on ajoute le lien au contrôle enfant de la cellule
cellTest.Controls.Add(linkTest)

'on ajoute la cellule à la ligne puis la ligne au tableau
rowTest.Cells.Add(cellTest)
tableTest.Rows.Add(rowTest)

Il faut maintenant utiliser le composant faisant partie de la librairie AJAX nommé : ModalPopup (Démo sur le site ASP.net : Lien). Ce composant permet d’afficher un panel au dessus de la page avec un effet de calque opaque.

Le panel est ajouté directement dans le designer de Visual Studio. Pour chaque lien, un nouveau composant de ce type est ajouté, et associé au panel. Voici une déclaration type pour le lien que nous avons ajouté dans le bloc de code précédent :

 
'Import dans l'entete du fichier pour pouvoir instancier la classe du composant 
imports AJAXControlToolkit

'Creation du composant 
Dim extender As ModalPopupExtender = New ModalPopupExtender()

'ID du contrôle qui va permettre d’afficher la fenêtre en mode modal 
extender.TargetControlID = "linkTest" 
'ID du Contrôle qui va être affiché en mode Modal 
extender.PopupControlID = "pnlTest" 
'Affiche un effet Ombre sous la fenêtre Modale 
extender.DropShadow = True 
'définition du nom de la classe CSS 
extender.BackgroundCssClass = "backModal" 
'definition de l’ID du controle qui va valider la fenêtre modale 
extender.OkControlID = "btnTest" 

Voici le résultat lors du clic sur le lien :

image

C’est maintenant ici que ça se complique, quand l’utilisateur clique que le bouton pour valider l’information entré dans la zone de texte, l’événement qui est associé au clic sur le bouton ne se déclenche pas, il n’est pas supporté par le composant AJAX.

La solution est d’ajouter un événement client, en javascript, qui va le traiter côté client et déclencher un postback :

'ajoute l'événement client 
 btnTest.OnClientClick = String.Format("OnValidModif('{0}','')", btnTest.ClientID)

La fonction javascript est déclaré dans la balise <head> de la page :

function OnValidModif(sender, e) {
     __doPostBack(sender, e);
}

Donc l’utilisateur clique sur le bouton, la fonction cliente est appelée, et déclenche le postback pour, à son tour déclenché l’événement côté serveur.