Gérer les PostBacks depuis un contrôle Popup sans UpdatePanel

| Christian Wenz | Pascal ROZE (Traducteur) |

L'extendeur ControlPopup de l'AJAX Control Toolkit offre une façon simple d'ouvrir un Popup lorsqu'un autre contrôle est activé. Quand un PostBack se déclenche depuis un panel et que la page contient plusieurs panels, il est difficile de déterminer sur quel panel a cliqué l'utilisateur.

- Titre : Gérer les PostBacks depuis un contrôle Popup sans UpdatePanel

- Auteurs : Christian Wenz, Pascal ROZE (Traducteur)

- Parution : 8 mai 2009

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

Sommaire

- Traduction

- Vue générale

- Etapes

Traduction

Cet article est la traduction la plus fidèle possible de l'article original: Handling Postbacks from A Popup Control Without an UpdatePanel

Vue générale

L'extendeur ControlPopup de l'AJAX Control Toolkit offre une façon simple d'ouvrir un Popup lorsqu'un autre contrôle est activé. Quand un PostBack se déclenche depuis un panel et que la page contient plusieurs panels, il est difficile de déterminer sur quel panel a cliqué l'utilisateur.

Etapes

Quand vous utilisez un extendeur ControlPopup avec un PostBack, mais sans avoir d'UpdatePanel dans la page, le Control Toolkit ne permet pas de savoir quel élément client a déclenché le PostBack permettant l'ouverture de la Popup. Heureusement, il existe une petite astuce.

Voilà la situation: deux textboxs qui déclenchent la même popup, à savoir un calendrier. Deux PopupControlExtenders chargés de lier les textbox et la popup.

<form id="form1" runat="server">
<asp:ScriptManager ID="asm" runat="server" />
<div>
Departure date: <asp:TextBox ID="tbDeparture" runat="server" />
Return date: <asp:TextBox ID="tbReturn" runat="server" />
</div>
<asp:Panel ID="pnlCalendar" runat="server">
<asp:Calendar ID="c1" runat="server" OnSelectionChanged="c1_SelectionChanged" />
</asp:Panel>
<ajaxToolkit:PopupControlExtender ID="pce1" runat="server"
TargetControlID="tbDeparture" PopupControlID="pnlCalendar" Position="Bottom" />
<ajaxToolkit:PopupControlExtender ID="pce2" runat="server"
TargetControlID="tbReturn" PopupControlID="pnlCalendar" Position="Bottom" />
</form>

L'idée de base est d'ajouter un champ caché dans l'élément <form> qui contiendra l'id de la textbox à l'origine de l'ouverture de la popup.

<input type="hidden" id="tbHidden" runat="server" />

Quand la page est chargée, le code Javascrip ajoute un gestionnaire d'événement aux 2 textbox: chaque fois que l'utilisateur clique sur une textbox, l'id de cette dernière est stocké dans le champ caché.

<script type="text/javascript">
function pageLoad()
{
$get("tbDeparture").onclick = saveTextBox;
$get("tbReturn").onclick = saveTextBox;
}

function saveTextBox()
{
$get("tbHidden").value = this.id;
}
</script>

Côté serveur, il faut récupérer la valeur stockée dans le champ caché. Etant donné que les champs cachés sont facilement modifiables, il faut s'assurer que la valeur est valide. Une fois que la textbox a été identifiée, on y écrit la daté sélectionnée dans le calendrier.

<script runat="server">
protected void c1_SelectionChanged(object sender, EventArgs e)
{
string id = tbHidden.Value;
if (id == "tbDeparture" || id == "tbReturn")
{
TextBox tb = (TextBox)FindControl(id);
tb.Text = (sender as Calendar).SelectedDate.ToShortDateString();
}
}
</script>

Le calendrier apparaît quand l'utilisateur clique dans une textbox

En cliquant sur une date, on insère sa valeur dans la textbox.