Gestione dei postback da un controllo popup con updatePanel (C#)

Articolo
07/13/2023

L'estensione PopupControl in AJAX Control Toolkit offre un modo semplice per attivare un popup quando viene attivato qualsiasi altro controllo. È necessario prestare particolare attenzione quando si verifica un postback all'interno di un popup di questo tipo.

Panoramica

L'estensione PopupControl in AJAX Control Toolkit offre un modo semplice per attivare un popup quando viene attivato qualsiasi altro controllo. È necessario prestare particolare attenzione quando si verifica un postback all'interno di un popup di questo tipo.

Passaggi

Quando si usa un PopupControl postback, un UpdatePanel può impedire l'aggiornamento della pagina causato dal postback. Il markup seguente definisce un paio di elementi importanti:

Controllo ScriptManager in modo che ASP.NET AJAX Control Toolkit funzioni
Due TextBox controlli che attivano entrambi un popup
Controllo Panel che fungerà da popup
All'interno del pannello, un Calendar controllo viene incorporato all'interno di un UpdatePanel controllo
Due PopupControlExtender controlli che assegnano il pannello alle caselle di testo

<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>

Si noti che l'attributo OnSelectionChangedCalendar del controllo è impostato. Quindi, quando l'utente seleziona una data all'interno del calendario, viene eseguito un postback e viene eseguito il metodo c1_SelectionChanged() lato server. All'interno di tale metodo, la data corrente deve essere recuperata e scritta nella casella di testo.

La sintassi per questa operazione è la seguente: prima di tutto, è necessario generare un oggetto proxy per la PopupControlExtender pagina. Il toolkit di controllo AJAX ASP.NET offre il GetProxyForCurrentPopup() metodo . L'oggetto questo metodo restituisce supporta il Commit() metodo che invia un valore al controllo che ha attivato il popup (non il controllo che ha attivato la chiamata al metodo!). Il codice seguente fornisce la data selezionata come argomento per il Commit() metodo, causando la scrittura della data selezionata nella casella di testo:

<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>

Ora ogni volta che si fa clic su una data del calendario, la data selezionata viene visualizzata nella casella di testo associata, creando un controllo selezione date attualmente disponibile in molti siti Web.