Obsługa ogłaszania zwrotnego w kontrolce Popup z kontrolką UpdatePanel (C#)

Autor Christian Wenz

Pobierz kod lub Pobierz plik PDF

Rozszerzenie PopupControl w zestawie narzędzi AJAX Control oferuje łatwy sposób wyzwalania okna podręcznego w przypadku aktywowania innej kontrolki. Należy zwrócić szczególną uwagę, gdy ogłaszanie zwrotne odbywa się w tym menu podręcznym.

Omówienie

Rozszerzenie PopupControl w zestawie narzędzi AJAX Control oferuje łatwy sposób wyzwalania okna podręcznego w przypadku aktywowania innej kontrolki. Należy zwrócić szczególną uwagę, gdy ogłaszanie zwrotne odbywa się w tym menu podręcznym.

Kroki

W przypadku korzystania z PopupControl z ogłaszaniem zwrotnym UpdatePanel może uniemożliwić odświeżenie strony spowodowane przez ogłaszanie zwrotne. Następujące znaczniki definiują kilka ważnych elementów:

  • Kontrolka ScriptManager, tak aby zestaw narzędzi ASP.NET AJAX Control działał
  • Dwie TextBox kontrolki, które będą wyzwalać menu podręczne
  • Formant Panel, który będzie używany jako podręczny
  • W panelu formant Calendar jest osadzony w kontrolce UpdatePanel
  • Dwie PopupControlExtender kontrolki, które przypisują panel do pól tekstowych
<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>

Należy zauważyć, że atrybut OnSelectionChanged kontrolki Calendar jest ustawiony. Tak więc, gdy użytkownik wybierze datę w kalendarzu, następuje ogłaszanie zwrotne i zostanie uruchomiona metoda po stronie serwera c1_SelectionChanged(). W ramach tej metody bieżąca data musi być pobrana i zapisywana z powrotem do pola tekstowego.

Składnia dla programu jest następująca: najpierw należy wygenerować obiekt serwera proxy dla PopupControlExtender na stronie. Zestaw narzędzi ASP.NET AJAX Control Toolkit oferuje metodę GetProxyForCurrentPopup(). Obiekt zwracany przez tę metodę obsługuje metodę Commit(), która wysyła wartość z powrotem do kontrolki, która wyzwoliła wyskakujące okienko, a nie kontrolka, która wyzwoliła wywołanie metody!). Poniższy kod przedstawia wybraną datę jako argument metody Commit(), powodując, że kod zapiszą wybraną datę z powrotem do pola tekstowego:

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

Teraz za każdym razem, gdy klikniesz datę kalendarzową, wybrana data zostanie wyświetlona w skojarzonym polu tekstowym i zostanie utworzona kontrolka selektora daty, która jest obecnie dostępna w wielu witrynach sieci Web.

kalendarz pojawia się, gdy użytkownik kliknie w polu tekstowym

Kalendarz pojawia się, gdy użytkownik kliknie w polu tekstowym (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

kliknięcie daty spowoduje jej umieszczenie w polu tekstowym

Kliknięcie daty spowoduje jej umieszczenie w polu tekstowym (kliknij, aby wyświetlić obraz o pełnym rozmiarze)