Modal Pop Up – AJAX Control Toolkit – ASP.NET – Belajar, Tutorial, Contoh Program

Sebetulnya modul popup pemakaiannya hampir mirip dengan popup control, perbedaan utamanya adalah cara menampilkan kotak popup yang lebih dominan dan menguasai browser. Sehingga perhatian dari pengunjung benar-benar tertuju ke dalam isi kotak popup tersebut.

Contoh pemakaiannya adalah sebagai berikut :

Pastikan kamu sudah memiliki ASP.NET AJAX Control Toolkit. Jika belum kamu bisa download disini : ASP.NET AJAX Control Toolkit.

Buat solution baru dengan tipe ASP.NET AJAX Web Enabled Website. Kemudian buat folder bin (bisa dengan memilih menu add ASP.NET Folder -> bin saat diklik kanan pada solution explorer) didalam solution. Tambahkan file dll dari AJAX Control Toolkit kedalam folder bin. File AJAXControlToolkit.dll dapat kamu ambil dari folder SampleWebSite/Bin setelah diekstract dari paket hasil download.

Dalam contoh kali ini akan diimplementasikan pemakaian Modal Pop Up pada sebuah halaman web yang didalamnya akan menampilkan sebuah gambar berdasarkan data file pada sebuah folder. Langkah-langkahnya adalah sebagai berikut :

Buat solution baru dengan tipe ASP.NET AJAX Enabled Web Site.

Jangan lupa untuk menambahkan beberapa gambar pada folder solution tersebut.

Sekarang pada Script Manager tambahkan ListBox, sebuah komponen ModalPopUpExtender dan sebuah Panel yang didalamnya diisi dengan komponen Image dan Button.

Desain tampilannya adalah sebagai berikut :

Set Property CSSClass dalam Panel menjadi modalPopup

Buat File CSS Baru dengan memilih menu WebSite -> Add New Item dan pilih tipe file StyleSheet.

Didalam file css tersebut, ketikkan class CSS berikut :

.modalBackground
{
    background-color:Gray;
}

.modalPopup
{
    background-color:#ffffdd;
    border-width:3px;
    border-style:solid;
    border-color:Gray;
    padding:3px;
    width:150px;
    margin:0;
    position:static;
    float:left;
}

Kemudian modifikasi source code untuk halaman aspx sebagai berikut :

Pada tag head tambahkan perintah untuk menempatkan file CSS sebagai berikut :

	<link
        href="MyStyle.css"
        rel="stylesheet"
        type="text/css"
     />

Pada Code untuk Modal Popup ubah menjadi sebagai berikut :

                <cc1:ModalPopupExtender
                    ID="ModalPopupExtender1"
                    runat="server"
                    PopupControlID="Panel1"
                    TargetControlID="ListBox1"
                    DropShadow="true"
                    X="10" Y="10"
                    BackgroundCssClass="modalBackground">                 </cc1:ModalPopupExtender>

Kemudian double klik ListBox dan masukkan listing berikut :

Image1.ImageUrl = Server.MapPath(“~\”) & _
ListBox1.SelectedValue

Selanjutnya double klik bagian kosong dari halaman web, dan didalam prosedur page_load ketikkan listing berikut :

If Not IsPostBack Then
Dim di As New IO.DirectoryInfo _
(Server.MapPath(“~\”))
Dim fi As IO.FileInfo() = _
di.GetFiles(“*.jpg”)
Dim xTemp As String
For i As Integer = 0 To UBound(fi)
xTemp &= fi(i).Name & _
IIf(i = UBound(fi), “”, “,”)
Next
Dim xTemp2() As String = _
Split(xTemp, “,”)
ListBox1.DataSource = xTemp2
ListBox1.DataBind()
End If

Pada saat loading maka listbox akan diisi oleh seluruh file gambar yang ada dalam folder disolution

Berikutnya double klik Button dan ketikkan listing berikut :

Me.ModalPopupExtender1.Hide()

Nah sekarang bisa kamu test dengan menekan CTRL + F5. Hasilnya kurang lebih sebagai berikut :

Nah mungkin ada tambahan masukan atau pertanyaan? Silahkan posting comment dibawah. Semoga membantu, thanks