Meluncurkan Jendela Popup Modal dari Kode Server (C#)

oleh Christian Wenz

Unduh PDF

Kontrol ModalPopup di Toolkit Kontrol AJAX menawarkan cara sederhana untuk membuat popup modal menggunakan cara sisi klien. Namun beberapa skenario mengharuskan pembukaan popup modal dipicu di sisi server.

Gambaran Umum

Kontrol ModalPopup di Toolkit Kontrol AJAX menawarkan cara sederhana untuk membuat popup modal menggunakan cara sisi klien. Namun beberapa skenario mengharuskan pembukaan popup modal dipicu di sisi server.

Langkah-langkah

Pertama-tama, kontrol web tombol ASP.NET diperlukan untuk menunjukkan cara kerja kontrol ModalPopup. Tambahkan tombol seperti itu dalam <elemen formulir> di halaman baru:

<asp:Button ID="ClientButton" runat="server" Text="Launch Modal Popup (Client)" />

Kemudian, Anda memerlukan markup untuk popup yang ingin Anda buat. Tentukan sebagai <asp:Panel> kontrol dan pastikan kontrol menyertakan kontrol Tombol. Kontrol ModalPopup menawarkan fungsionalitas untuk membuat tombol seperti itu menutup popup; jika tidak, tidak ada cara mudah untuk membiarkannya menghilang.

<asp:Panel ID="ModalPanel" runat="server" Width="500px">
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
 <asp:Button ID="OKButton" runat="server" Text="Close" />
</asp:Panel>

Selanjutnya tambahkan kontrol ModalPopup dari ASP.NET AJAX Toolkit ke halaman. Atur properti untuk tombol yang memuat kontrol, tombol yang membuatnya menghilang, dan ID popup yang sebenarnya.

<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" TargetControlId="ClientButton" 
 PopupControlID="ModalPanel" OkControlID="OKButton" />

Seperti semua halaman web berdasarkan ASP.NET AJAX; Manajer Skrip diperlukan untuk memuat pustaka JavaScript yang diperlukan untuk browser target yang berbeda:

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

Jalankan contoh di browser. Saat Anda mengklik tombol , popup modal muncul. Untuk mencapai efek yang sama menggunakan kode sisi server, tombol baru diperlukan:

<asp:Button ID="ServerButton" runat="server" Text="Launch Modal Popup (Server)" 
 OnClick="ServerButton_Click" />

Seperti yang Anda lihat, klik tombol menghasilkan postback dan menjalankan ServerButton_Click() metode di server. Dalam metode ini, fungsi JavaScript yang disebut launchModal() dijalankan tepatnya, fungsi JavaScript akan dijalankan setelah halaman dimuat:

<script runat="server">
 protected void ServerButton_Click(object sender, EventArgs e)
 {
 ClientScript.RegisterStartupScript(this.GetType(), "key", "launchModal();", true);
 }
</script>

Tugasnya launchModal() adalah menampilkan ModalPopup. Fungsi launchModal() dijalankan setelah halaman HTML lengkap dimuat. Namun, pada saat itu, kerangka kerja AJAX ASP.NET belum sepenuhnya dimuat. Oleh karena itu, launchModal() fungsi ini hanya mengatur variabel yang harus ditunjukkan kontrol ModalPopup nanti:

<script type="text/javascript">
 var launch = false;
 function launchModal() 
 {
 launch = true;
 }

Fungsi pageLoad() JavaScript adalah fungsi khusus yang dijalankan setelah ASP.NET AJAX telah dimuat sepenuhnya. Oleh karena itu kami menambahkan kode ke fungsi ini untuk menampilkan kontrol ModalPopup, tetapi hanya jika launchModal() telah dipanggil sebelumnya:

function pageLoad() 
 {
 if (launch) 
 {
 $find("mpe").show();
 }
 }
</script>

Fungsi ini $find() mencari elemen bernama di halaman dan mengharapkan ID sisi server sebagai parameter. Oleh karena itu, $find("mpe") mengembalikan representasi klien dari kontrol ModalPopup; metodenya show() memungkinkan popup muncul.

Popup modal muncul saat salah satu tombol diklik (Klik untuk melihat gambar ukuran penuh)

Berikutnya