Menangani Postback dari ModalPopup (VB)

oleh Christian Wenz

Unduh PDF

Kontrol ModalPopup di Toolkit Kontrol AJAX menawarkan cara sederhana untuk membuat popup modal menggunakan cara sisi klien. Perawatan khusus harus diambil ketika postback dibuat dari dalam popup.

Gambaran Umum

Kontrol ModalPopup di Toolkit Kontrol AJAX menawarkan cara sederhana untuk membuat popup modal menggunakan cara sisi klien. Perawatan khusus harus diambil ketika postback dibuat dari dalam popup.

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 modal. Di sana, pengguna dapat memasukkan nama dan alamat email. Tombol digunakan untuk menutup popup dan menyimpan informasi. Perhatikan bahwa OnClick atribut diatur sehingga postback terjadi saat tombol ini diklik:

<asp:Panel ID="ModalPanel" runat="server" Width="500px">
 Name: <asp:TextBox ID="tbName" runat="server" /><br/>
 Email: <asp:TextBox ID="tbEmail" runat="server" /><br/>
 <asp:Button ID="OKButton" runat="server" Text="Save"OnClick="SaveData" />
</asp:Panel>

Halaman itu sendiri terdiri dari dua label untuk informasi yang sama persis: nama dan alamat email. Tombol digunakan untuk memicu popup modal:

<div>
 Contact Information:
 <asp:Label ID="lblName" runat="server" Text="AJAX Fanatic"/><br />
 <asp:Label ID="lblEmail" runat="server" Text="ajax@fanatic"/><br />
 <asp:Button ID="btn1" runat="server" Text="Edit"/>
</div>

Untuk membuat popup muncul, tambahkan ModalPopupExtender kontrol. Atur PopupControlID atribut ke ID panel dan TargetControlID ke ID tombol:

<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" TargetControlID="btn1" PopupControlID="ModalPanel" />

Sekarang setiap kali tombol Save dalam popup modal diklik, metode sisi SaveData() server dijalankan. Di sana, Anda dapat menyimpan data yang dimasukkan di penyimpanan data. Demi kesederhanaan, data baru hanyalah output dalam label:

Protected Sub SaveData(ByVal sender As Object, ByVal e As EventArgs)
 lblName.Text = HttpUtility.HtmlEncode(tbName.Text)
 lblEmail.Text = HttpUtility.HtmlEncode(tbEmail.Text)
End Sub

Selain itu, kontrol kotak teks dalam popup modal harus diisi dengan nama dan email saat ini. Namun ini hanya diperlukan ketika tidak ada postback yang terjadi. Jika ada postback, fitur ASP.NET viewstate akan secara otomatis mengisi kotak teks dengan nilai yang sesuai.

Sub Page_Load()
 If Not Page.IsPostBack Then
 tbName.Text = lblName.Text
 tbEmail.Text = lblEmail.Text
 End If
End Sub

Popup modal menyebabkan postback (Klik untuk melihat gambar ukuran penuh)

SebelumnyaBerikutnya