Menangani Postback dari Kontrol Popup Dengan UpdatePanel (C#)

oleh Christian Wenz

Unduh PDF

Extender PopupControl di Toolkit Kontrol AJAX menawarkan cara mudah untuk memicu popup ketika kontrol lain diaktifkan. Perawatan khusus harus dilakukan ketika postback terjadi dalam popup seperti itu.

Gambaran Umum

Extender PopupControl di Toolkit Kontrol AJAX menawarkan cara mudah untuk memicu popup ketika kontrol lain diaktifkan. Perawatan khusus harus dilakukan ketika postback terjadi dalam popup seperti itu.

Langkah-langkah

Saat menggunakan PopupControl dengan postback, dapat UpdatePanel mencegah refresh halaman yang disebabkan oleh postback. Markup berikut mendefinisikan beberapa elemen penting:

• ScriptManager Kontrol sehingga ASP.NET AJAX Control Toolkit berfungsi
• Dua TextBox kontrol yang keduanya akan memicu popup
• Panel Kontrol yang akan berfungsi sebagai popup
• Di dalam panel, Calendar kontrol disematkan dalam UpdatePanel kontrol
• Dua PopupControlExtender kontrol yang menetapkan panel ke kotak teks

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

Perhatikan bahwa OnSelectionChanged atribut Calendar kontrol diatur. Jadi, ketika pengguna memilih tanggal dalam kalender, postback terjadi dan metode c1_SelectionChanged() sisi server dijalankan. Dalam metode tersebut, tanggal saat ini harus diambil dan ditulis kembali ke kotak teks.

Sintaks untuk itu adalah sebagai berikut: Pertama-tama, objek proksi untuk PopupControlExtender pada halaman harus dibuat. ASP.NET AJAX Control Toolkit menawarkan metode .GetProxyForCurrentPopup() Objek yang dikembalikan metode ini mendukung Commit() metode yang mengirim nilai kembali ke kontrol yang memicu popup (bukan kontrol yang memicu panggilan metode!). Kode berikut menyediakan tanggal yang dipilih sebagai argumen untuk Commit() metode , menyebabkan kode menulis tanggal yang dipilih kembali ke kotak teks:

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

Sekarang setiap kali Anda mengklik tanggal kalender, tanggal yang dipilih muncul di kotak teks terkait, membuat kontrol pemilih tanggal yang saat ini dapat ditemukan di banyak situs web.

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

Mengklik tanggal menempatkannya di kotak teks (Klik untuk melihat gambar ukuran penuh)

SebelumnyaBerikutnya