Menangani Postback dari ModalPopup (C#)

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 void SaveData(object sender, EventArgs e)
{
    lblName.Text = HttpUtility.HtmlEncode(tbName.Text);
    lblEmail.Text = HttpUtility.HtmlEncode(tbEmail.Text);
}

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.

void Page_Load()
{
    if (!Page.IsPostBack)
    {
        tbName.Text = lblName.Text;
        tbEmail.Text = lblEmail.Text;
    }
}

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

SebelumnyaBerikutnya