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.
