Menangani Postback dari Kontrol Popup Tanpa UpdatePanel (C#)

oleh Christian Wenz

Unduh PDF

Extender PopupControl di Toolkit Kontrol AJAX menawarkan cara mudah untuk memicu popup ketika kontrol lain diaktifkan. Ketika postback terjadi di panel seperti itu dan ada beberapa panel di halaman sulit untuk menentukan panel mana yang telah diklik.

Gambaran Umum

Extender PopupControl di Toolkit Kontrol AJAX menawarkan cara mudah untuk memicu popup ketika kontrol lain diaktifkan. Ketika postback terjadi di panel seperti itu dan ada beberapa panel di halaman sulit untuk menentukan panel mana yang telah diklik.

Langkah-langkah

Saat menggunakan PopupControl dengan postback, tetapi tanpa memiliki UpdatePanel di halaman, Control Toolkit tidak menawarkan cara untuk menentukan elemen klien mana yang telah memicu popup yang pada gilirannya menyebabkan postback. Namun, trik kecil memberikan solusi untuk skenario ini.

Pertama-tama, berikut adalah penyiapan dasar: dua kotak teks yang keduanya memicu popup yang sama, kalender. Dua PopupControlExtenders menyabungkan kotak teks dan popup.

<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:Calendar ID="c1" runat="server" OnSelectionChanged="c1_SelectionChanged" />
 </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>

Ide dasarnya adalah menambahkan bidang formulir tersembunyi di <form> elemen yang menyimpan kotak teks yang meluncurkan popup:

<input type="hidden" id="tbHidden" runat="server" />

Saat halaman dimuat, kode JavaScript menambahkan penanganan aktivitas ke kedua kotak teks: Setiap kali pengguna mengklik kotak teks, namanya ditulis ke dalam bidang formulir tersembunyi:

<script type="text/javascript">
 function pageLoad()
 {
 $get("tbDeparture").onclick = saveTextBox;
 $get("tbReturn").onclick = saveTextBox;
 }
 function saveTextBox()
 {
 $get("tbHidden").value = this.id;
 }
</script>

Dalam kode sisi server, nilai bidang tersembunyi harus dibaca. Karena bidang formulir tersembunyi sepele untuk dimanipulasi, pendekatan daftar aman untuk memvalidasi nilai tersembunyi diperlukan. Setelah kotak teks yang benar diidentifikasi, tanggal dari kalender ditulis ke dalamnya.

<script runat="server">
 protected void c1_SelectionChanged(object sender, EventArgs e)
 {
 string id = tbHidden.Value;
 if (id == "tbDeparture" || id == "tbReturn")
 {
 TextBox tb = (TextBox)FindControl(id);
 tb.Text = (sender as Calendar).SelectedDate.ToShortDateString();
 }
 }
</script>

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