Gérer les postbacks depuis un contrôle pop-up avec un UpdatePanel

Christian Wenz (Traduction par Rémy Mainil)

L'extenseur PopupControl du AJAX Control Toolkit offre un mécanisme facile pour déclencher un pop-up lorsqu'un autre contrôle reçoit le focus. Une attention particulière doit être portée lorsqu'un postback est déclenché depuis un tel pop-up. ♪

- Titre : Gérer les postbacks depuis un contrôle pop-up avec un UpdatePanel

- Auteur : Christian Wenz (Traduction par Rémy Mainil)

- Parution : 18 avril 2013

- 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

- Présentation

- Étapes

Traduction

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

Présentation

L'extenseur PopupControl du AJAX Control Toolkit offre un mécanisme facile pour déclencher un pop-up lorsqu'un autre contrôle reçoit le focus. Une attention particulière doit être portée lorsqu'un postback est déclenché depuis un tel pop-up.

Étapes

Lorsqu'on utilise un contrôle Pop-up avec postback, un UpdatePanel peut éviter le rafraichissement de la page causé par le postback. Le code suivant illustre quelques éléments importants :

- un contrôle ScriptManager de façon à ce que l'ASP.NET AJAX Control Toolkit fonctionne ;

- deux textboxes qui vont toutes les deux déclencher un pop-up ;

- un contrôle Panel qui va servir de pop-up ;

- dans le Panel, un contrôle Calendar intégré dans un contrôle UpdatePanel ;

- deux PopupControlExtender qui assignent le Panel aux textboxes.

<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:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<asp:Calendar ID="c1" runat="server" OnSelectionChanged="c1_SelectionChanged" />
</ContentTemplate>
</asp:UpdatePanel>
</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>

Notez que l'attribut OnSelectionChanged du contrôle Calendar est défini. Dès lors, lorsque l'utilisateur choisit une date dans le calendrier, un postback à lieu et la méthode côté serveur c1_SelectionChanged() est exécutée. Dans cette méthode, la date courante doit être extraite et écrite dans la textbox.

La syntaxe pour réaliser cela est la suivante : D'abord, un objet proxy pour le PopupControlExtender de la page doit être généré. L'ASP.NET AJAX Control Toolkit offre la méthode GetProxyForCurrentPopup(). L'objet retourné par cette méthode gère la méthode Commit() qui renvoie une valeur au contrôle qui a déclenché le pop-up (et non au contrôle qui a déclenché l'appel à la méthode). Le code qui suit fournit la date sélectionnée comme paramètre de la méthode Commit(), ce qui provoque l'ajout de la date sélectionnée dans la textbox.

<script runat="server">
protected void c1_SelectionChanged(object sender, EventArgs e){
PopupControlExtender pce = AjaxControlToolkit.PopupControlExtender.GetProxyForCurrentPopup(Page);
pce.Commit((sender as Calendar).SelectedDate.ToShortDateString());
}
</script>

Maintenant, dès que vous cliquez sur une date du calendrier, la date sélectionnée apparaît dans la textbox concernée, donnant comme résultat un contrôle DatePicker comme on en trouve maintenant sur beaucoup de sites.

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

Cliquer sur une date l'écrit dans la textbox