Ajax Call di ASP.NET MVC

Ceritanya waktu itu sedang bosan, task sudah selesai dan menjelang long weekend, mau nulis blog tapi masih mikir mau nulis apa. Pas di tengah kebosanan ada teman saya Grace nanya bagaimana cara ngambil data yang ada di controller buat diproses di view pakai Javascript. Pikiran saya sih langsung lari ke Ajax dan pakai JQuery.

MVC Multiple Model

Berangkat dari pertanyaan teman saya tersebut maka jadilah tulisan kali ini tentang Ajax call di ASP.NET MVC 😀

Langkah pertama silahkan buat project ASP.NET MVC 5 di Visual Studio. Setelah itu buat sebuah controller dengan nama BooksController. Controller ini nanti yang akan kita gunakan untuk menyuplai data buku untuk diproses di view menggunakan Javascript.

Untuk modelnya seperti biasa karena saya pecinta buku dan tidak bisa jauh-jauh dari buku maka modelnya pun buku. Buat model yang bernama Book.

Kembali pada controller. Tambahkan variabel yang berisi koleksi buku dimana kita anggap sebagai simulasi pengganti database. Selain itu tambahkan juga method yang digunakan untuk mendapatkan salah satu data buku berdasarkan id-nya.

Perhatikan pada method Search, nilai kembaliannya berupa Json karena data yang diambil oleh Javascript nanti di view harus berupa Json. Jika penasarn silahkan akses ke http://localhost:port/books/search/1 dan lihat data yang dikembalikan.

1. json result

Selanjutnya buat sebuah view untuk method Index dan jadikan kodenya seperti berikut

Baris yang saya highlight adalah baris yang berperan memanggil data json yang dikirimkan oleh controller dan kemudian menampilkannya pada browser. Parameter url adalah url yang ingin dipanggil untuk mendapatkan data json, url ini sudah kita coba tadi pada langkah sebelumnya. Parameter type kita isi GET karena method pada Search adalah bertipe GET dan yang terakhir parameter success adalah fungsi yang akan dijalankan saat data berhasil diterima, dalam contoh ini adalah ditulis pada elemen paragraf (p) yang memiliki id result.

Berikut berturut-turut adalah tampilan awal dan ketika mengambil data dengan memasukkan id buku.

2. Index

3. Result

Semoga bermanfaat, terimakasih sudah mampir 😉

Facebook Comments
 

Agung Setiawan

Agung Setiawan adalah software engineer di BukaLapak.com, penulis sekaligus pecinta sastra, dan pembaca buku

 
Halo, perkenalkan saya Agung Setiawan.
Saya Software Engineer di BukaLapak.
Simak pemikian saya soal dunia Software Engineering via Twitter di @agungsetiawanmu dan facebook
Blog ini saya update seminggu sekali jadi sering-sering saja mampir
Mau belajar Vim bareng saya?
Belajar ngoding dari nol menggunakan PHP

2 thoughts on “Ajax Call di ASP.NET MVC

Leave a Reply

Your email address will not be published. Required fields are marked *