Gestione dei postback da un controllo Popup con UpdatePanel (C#)

di Christian Wenz

Scarica il PDF

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.

Il calendario viene visualizzato quando l'utente fa clic nella casella di testo (Fare clic per visualizzare l'immagine a dimensioni complete)

Facendo clic su una data viene inserita nella casella di testo (Fare clic per visualizzare l'immagine full-size)

IndietroAvanti