Menggunakan Beberapa Kontrol Popup (VB)

oleh Christian Wenz

Unduh PDF

Extender PopupControl di Toolkit Kontrol AJAX menawarkan cara mudah untuk memicu popup ketika kontrol lain diaktifkan. Dimungkinkan juga untuk menggunakan lebih dari satu kontrol popup pada satu halaman.

Gambaran Umum

Extender PopupControl di Toolkit Kontrol AJAX menawarkan cara mudah untuk memicu popup ketika kontrol lain diaktifkan. Dimungkinkan juga untuk menggunakan lebih dari satu kontrol popup pada satu halaman.

Langkah-langkah

Untuk mengaktifkan fungsionalitas ASP.NET AJAX dan Control Toolkit, ScriptManager kontrol harus diletakkan di mana saja di halaman (tetapi dalam <form> elemen ):

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

Selanjutnya, tambahkan panel yang berfungsi sebagai popup. Dalam skenario saat ini, panel berisi Calendar kontrol. Untuk menghindari refresh halaman yang disebabkan oleh postback Kalender, panel diletakkan dalam UpdatePanel kontrol:

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

Halaman ini juga berisi dua kotak teks. Untuk setiap kotak teks, popup kalender akan muncul setelah kotak teks diaktifkan.

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

Sekarang perluas masing-masing dari dua kotak teks dengan PopupControlExtender. Atribut TargetControlID menyediakan ID kontrol yang terkait dengan extender. Atribut PopupControlID berisi ID panel popup. Dalam hal ini, kedua extender menunjukkan panel yang sama, tetapi panel yang berbeda juga dimungkinkan.

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

Sekarang setiap kali Anda mengklik di dalam bidang teks, kalender muncul di bawah bidang , memungkinkan Anda memilih tanggal. (Mendapatkan kembali tanggal yang dipilih ke dalam kotak teks akan tercakup dalam tutorial yang berbeda.)

Kalender muncul saat pengguna mengklik kotak teks (Klik untuk melihat gambar ukuran penuh)

SebelumnyaBerikutnya