Gérer les PostBacks depuis un contrôle Popup sans UpdatePanel
Date de publication : 08 mai 2009
Par
Christian Wenz
Pascal ROZE (Traducteur) (Page perso) (Blog)
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.
Traduction
Vue générale
Etapes
Traduction
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.


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.
Cette page est déposée.