Mengenal ASP.NET MVC 1: Ajax (1)

Program web yang interaktif saat ini sudah banyak yang menerapkan AJAX di dalamnya. Seperti kita ketahui bersama AJAX adalah suatu mekanisme di dalam komunikasi antara user-agent (browser) dan server yang membuat interaksi antara user dan program menjadi lebih baik, salah satunya dengan membuat program web tersebut menjadi lebih interaktif.

ASP.NET MVC memudahkan kita untuk membuat program web yang sudah menerapkan AJAX di dalamnya. Salah satu fasilitas yang disediakan oleh ASP.NET MVC adalah tersedianya method Json() di dalam controller. Method ini akan memberikan result berupa JSON (JavaScript Object Notation) kepada browser untuk dimanipulasi lebih lanjut di dalam browser oleh client-script.

Untuk memudahkan pemahaman kita akan ASP.NET MVC dan AJAX, kita akan melakukan demo dengan program Hello World dengan menambahkan kemampuan AJAX di dalamnya. Buka HelloWorld.sln, lalu ikuti langkah-langkah berikut ini:

1. Buatlah sebuah view bernama AjaxDemo.aspx. HTML source view tersebut terlihat dalam Listing di bawah ini.
   
   
   
   
   Tujuan kita adalah membuat sebuah view yang akan menerima masukan angka antara 1 s/d 5, kemudian mengirimkan masukan tersebut ke server untuk mendapatkan tulisan huruf-huruf dari angka tersebut. Misalnya angka 1 akan mendapatkan jawaban 'satu' dari server, angka 2 dijawab 'dua', dan seterusnya sampai dengan angka 5. Memang cukup sederhana, dan kita bisa melakukan hal ini cukup engan JavaScript, namun untuk keperluan demo ini kita mengambil contoh yang sederhana agar mekanisme AJAX dapat dipahami dengan mudah.
   Untuk bisa menggunakan ASP.NET AJAX, kita perlu menambahkan referensi terhadap library JavaScript MicrosfotAjax.js yang terdapat dalam folder Scripts.
   Perhatikan dalam Listing di atas, kita membuat satu fungsi JavaScript bernama getServerData(). Fungsi ini menggunakan ASP.NET AJAX, dan akan memanggil URL /Home/GetJson/{id}, dimana {id} akan diisi dengan angka yang diketikkan oleh user di dalam view.
   Gambar di bawah ini menunjukkan view AjaxDemo.aspx dijalankan dalam browser Internet Explorer.
   
   
2. Buatlah satu action-method dalam HomeController untuk menangani request yang dikirim dari view AjaxDemo.aspx. Action-method tersebut akan mengirimkan objek JSON ke browser. Kita bisa memakai method Json() yang sudah tersedia dalam controller.  Parameter dari method ini adalah objek yang akan dikirim ke client. Dalam Listing di bawah terlihat bahwa kita mengirimkan objek anonymous dengan satu property yaitu Message. Properti tersebut kita isi dengan isi array dari hasil pencocokan dengan parameter dan indeks array.
   
   
3. Jalankan program Hello World, lalu ketikkan /home/ajaxdemo dalam web browser.  Masukkan angka 1 dalam input yang tersedia, lalu klik tombol "Get Data". Perhatikan bahwa label di bawah tombol "Get Data" akan berubah menjadi "You enter Satu" seperti terlihat dalam Gambar di bawah ini. Perhatikan bahwa dengan AJAX, berubahnya label tersebut tidak perlu me-refresh seluruh layar walaupun web browser melakukan pemanggilan ke server.
   
   

Note: posting ini adalah bagian dari content e-book "Mengenal ASP.NET MVC Edisi 1" yang akan terbit pertengahan Desember 2008. Silakan comment dan feedback untuk membuat content e-book tersebut lebih mudah dimengerti, mengena dan bermanfaat.

Posted in: ASP