Contoh Multiple Update Panel – Database Zero Code – ASP.NET AJAX Tutorial

Berikut ini akan diberikan sebuah contoh sederhana cara mengentry database kemudian ditampilkan kedalam GridView dihalaman yang sama. Tanpa menggunakan teknik AJAX, maka akan terjadi flicker pada browser bila dijalan di server local dan akan terjadi full postback jika dijalan pada web hosting. Dengan teknik AJAX maka proses refresh hanya akan dijalan pada gridview saja. Pastikan untuk membuat program yang ada didalam contoh berikut ini kamu sudah mempunyai database (apa saja SQLServer/Express). Ikuti langkah-langkah beirkut :

Buat sebuah solution baru ASP.NET AJAX Enabled Website. Pada ScriptManager tambahkan 2 buah UpdatePanel.

Drag table yang akan digunakan dari Server Explorer kedalam UpdatePanel1. Kemudian tambahkan komponen FormView ke UpdatePanel1 dan pada Smart Tag FormView1 arahkan koneksi ke SQLDataSource1.

Kemudian tambahkan komponen GridView kedalam UpdatePanel2. Atur property AllowPagging menjadi True. Kemudian atur PageSize bernilai 5. Jangan lupa untuk mengatur koneksi pada Smart Tag dan beri nama SQLDataSource2.

Desain tampilannya adalah sebagai berikut :

Berikutnya atur property Triggers pada UpdatePanel2, dengan menambahkan trigger dari behavior AsyncPostBack pada saat komponen FormView selesai melakukan inputan data atau pada saat ItemInserted. Penambahan Trigger kedalam UpdatePanel akan menyebabkan update panel dipaksa melakukan proses refresh seluruh komponen yang ada secara asyncronous berdasarkan event yang didefiniskan didalam triger tersebut.

Sekarang sudah bisa kamu jalankan dengan menekan Ctrl + F5. Hasilnya adalah sebagai berikut :

Nah mungkin ada tambahan masukan atau pertanyaan? Silahkan isikan comment dibawah, semoga membantu yaw. Thanks