Używanie wielu kontrolek wyskakujących (VB)

Autor: Christian Wenz

Pobierz plik PDF

Rozszerzenie PopupControl w zestawie narzędzi AJAX Control Toolkit oferuje łatwy sposób wyzwalania wyskakującego okienka po aktywowaniu dowolnej innej kontrolki. Istnieje również możliwość użycia więcej niż jednej kontroli wyskakujących okienek na jednej stronie.

Przegląd

Rozszerzenie PopupControl w zestawie narzędzi AJAX Control Toolkit oferuje łatwy sposób wyzwalania wyskakującego okienka po aktywowaniu dowolnej innej kontrolki. Można również użyć więcej niż jednej kontrolki okienek na jednej stronie.

Kroki

Aby aktywować funkcjonalność ASP.NET AJAX i zestawu narzędzi Control Toolkit, kontrolka ScriptManager musi zostać umieszczona w dowolnym miejscu na stronie (ale w elemecie <form> ):

<asp:ScriptManager ID="asm" runat="server" />

Następnie dodaj panel, który służy jako wyskakujące okienko. W bieżącym scenariuszu panel zawiera kontrolkę Calendar . Aby uniknąć odświeżeń strony spowodowanych odpowiedziami zwrotnymi z kalendarza, panel jest umieszczany w kontrolce UpdatePanel.

<asp:Panel ID="pnlCalendar" runat="server">
 <asp:UpdatePanel ID="up1" runat="server">
 <ContentTemplate>
 <asp:Calendar ID="c1" runat="server" />
 </ContentTemplate>
 </asp:UpdatePanel>
</asp:Panel>

Strona zawiera również dwa pola tekstowe. Dla każdego pola tekstowego po aktywowaniu pola tekstowego zostanie wyświetlone okno podręczne kalendarza.

<div>
 Departure date: <asp:TextBox ID="tbDeparture" runat="server" />
 Return date: <asp:TextBox ID="tbReturn" runat="server" />
</div>

Teraz rozszerz każde z dwóch pól tekstowych za pomocą elementu PopupControlExtender. Atrybut TargetControlID zawiera identyfikator kontrolki powiązanej z rozszerzeniem. Atrybut PopupControlID zawiera identyfikator panelu podręcznego. W tym przypadku oba rozszerzenia pokazują ten sam panel, ale różne panele są również możliwe.

<ajaxToolkit:PopupControlExtender ID="pce1" runat="server"
 TargetControlID="tbDeparture" PopupControlID="pnlCalendar" Position="Bottom" />
<ajaxToolkit:PopupControlExtender ID="pce2" runat="server"
 TargetControlID="tbReturn" PopupControlID="pnlCalendar" Position="Bottom" />

Teraz po kliknięciu w polu tekstowym kalendarz pojawia się poniżej pola, co pozwala wybrać datę. (Omówienie sposobu wprowadzania wybranej daty do pól tekstowych zostanie przedstawione w innym samouczku.)

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